Skip to content

Instantly share code, notes, and snippets.

View elisechant's full-sized avatar

Elise Chant elisechant

30 followers · 28 following
View GitHub Profile
@elisechant
elisechant / _component-a.scss
Last active August 12, 2021 09:15
SCSS Design Patterns - Mixin Constructor
/*
|--------------------------------------------------------------------------
| class ComponentA
|--------------------------------------------------------------------------
|
| [long description]
|
| Example
<div class="{{ identifier }}">
<div class="component-a__element">
@elisechant
elisechant / Vagrantfile
Last active August 28, 2018 20:47
Vagrantfile for IE testing
# Usage: IE={box} vagrant up
#
# Eg. IE=XPIE6 vagrant up
boxes = {
"XPIE6" => "http://aka.ms/vagrant-xp-ie6",
"XPIE8" => "http://aka.ms/vagrant-xp-ie8",
"VistaIE7" => "http://aka.ms/vagrant-vista-ie7",
"Win7IE8" => "http://aka.ms/vagrant-win7-ie8",
"Win7IE9" => "http://aka.ms/vagrant-win7-ie9",
@elisechant
elisechant / app.js
Created January 28, 2018 22:02
React page transitions - Js Transition - react-transition-group v1, react router v4 (animate with JS)
import React from 'react';
import { Route } from "react-router-dom";
import TransitionGroup from "react-transition-group/TransitionGroup";
import TransitionedPage from './transitionedPage';
const HomePage = () => <div>Home</div>
const ContactPage = () => <div>Contact</div>
const firstChild = props => {
@elisechant
elisechant / app.js
Created January 28, 2018 22:01
React page transitions - CSS Transition - react-transition-group v1, react router v4
import React from 'react';
import { Route } from "react-router-dom";
import TransitionGroup from "react-transition-group/TransitionGroup";
import TransitionedPage from './transitionedPage';
const HomePage = () => <div>Home</div>
const ContactPage = () => <div>Contact</div>
const App = () => {
@elisechant
elisechant / _config.scss
Last active October 9, 2017 15:38
IE handling with SASS, Susy and HTML Conditionals. See https://github.com/bensmithett/style, http://jakearchibald.github.io/sass-ie/ Use a global SASS variable to state IE as Boolean. Serve different stylesheets.
$ie8: false !default;
$ie9: false !default;
$lt-ie9: $ie7 or $ie8;
// Compass cross-browser support configuration
// http://compass-style.org/reference/compass/support/
$legacy-support-for-ie6: false;
$legacy-support-for-ie7: $ie7;
$legacy-support-for-ie8: $ie8;
@elisechant
elisechant / index.js
Last active September 12, 2017 03:56
scaling-timeout.js
const RETRIES = 10;
[...Array(RETRIES).keys()].forEach(i => {
const timeout = Math.pow(2, i);
console.log(timeout);
});
@elisechant
elisechant / index.html
Last active July 31, 2016 07:40
Manifest quick start
<html>
<head>
// ...
<link rel="manifest" href="/manifest.webmanifest">
@elisechant
elisechant / namespace-an-application.scss
Last active January 2, 2016 01:49
Conceptual ideas for disallowed use of the SASS import directive. Throws errors: Import directives may not be used within control directives or mixins Refer to: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import
@mixin App(
// usual config.scss stuff with set !default values
){
@import 'base';
@import 'ui.type';
@import 'ui.buttons';
// ...
}
// Init
@elisechant
elisechant / namespace.articleitem.js
Last active December 30, 2015 20:29
JS Module Prototype Skeleton
var MyNamespace = MyNamespace || {};
(function ($) {
"use strict";
var $w = $(window),
BU = MyNamespace.Util
;
@elisechant
elisechant / namespace.article.js
Last active December 30, 2015 20:29
JS Module Skeleton
var MyNamespace = MyNamespace || {};
(function ($) {
"use strict";
var $w = $(window),
BU = MyNamespace.Util
;