Skip to content

Instantly share code, notes, and snippets.

Avatar

Ben Frain benfrain

View GitHub Profile
@benfrain
benfrain / dabblet.css
Created Apr 20, 2012
Flexbox 2012 basic
View dabblet.css
/**
* Flexbox 2012 basic
*/
ul { display: flex; }
@benfrain
benfrain / dabblet.css
Created Apr 20, 2012
CSS Flexible Layout Module
View dabblet.css
/**
* CSS Flexible Layout Module
*/
body {
background: #bfbfbf;
min-height: 100%;
}
header {
background-color: blue;
min-height: 100px;
@benfrain
benfrain / dabblet.css
Created Apr 24, 2012
CSS Flexible Layout Module - extra div
View dabblet.css
/**
* CSS Flexible Layout Module - extra div
*/
body {
background: #bfbfbf;
min-height: 100%;
}
header {
background-color: blue;
min-height: 100px;
@benfrain
benfrain / dabblet.css
Created Apr 24, 2012
CSS Flexible Layout Module - extra div
View dabblet.css
/**
* CSS Flexible Layout Module - extra div
*/
body {
background: #bfbfbf;
min-height: 100%;
}
header {
background-color: blue;
min-height: 100px;
@benfrain
benfrain / dabblet.css
Created Apr 24, 2012
CSS Flexible Layout Module - flexbox styling
View dabblet.css
/**
* CSS Flexible Layout Module - flexbox styling
*/
body {
background: #bfbfbf;
min-height: 100%;
}
header {
background-color: blue;
min-height: 100px;
@benfrain
benfrain / dabblet.css
Created Apr 25, 2012
CSS Flexible Layout Module - flex property
View dabblet.css
/**
* CSS Flexible Layout Module - flex property
*/
* { transition: all 2s; }
body {
background: #bfbfbf;
}
header,aside,.mainContent,.extraDiv,footer {
padding: 1em;
font-size: 1.4em;
@benfrain
benfrain / _media32.scss
Last active Nov 26, 2019
A Sass 3.2 mixin for dealing with Media Queries
View _media32.scss
// Here are some variables, then a mixin and then an application of the mixin - this will only compile using Sass 3.2
//variables
$XS: 12.5em; // 200px;
$S: 18.75em; // 300px
$SM: 35em; // 560px
$M: 47.5em; // 760px
$L: 63em; // 1008px
$XL: 110em; // 1760px
$XXL: 180em; // 2880px
@benfrain
benfrain / dabblet.css
Created May 26, 2012
CSS Flexible Layout Module - flex property
View dabblet.css
/**
* CSS Flexible Layout Module - flex property
*/
body {
background: #bfbfbf;
display: flexbox;
flex-flow: row wrap;
width: 100%;
}
header {
@benfrain
benfrain / dabblet.css
Created May 26, 2012
Use the following CSS code if you want to use data attributes for inserting your icons
View dabblet.css
@font-face {
font-family: 'IcoMoon';
src: url('http://benfrain.com/downloads/IcoMoon.eot');
src: url('http://benfrain.com/downloads/IcoMoon.eot?#iefix') format('embedded-opentype'),
url('http://benfrain.com/downloads/IcoMoon.svg#IcoMoon') format('svg'),
url('http://benfrain.com/downloads/IcoMoon.woff') format('woff'),
url('http://benfrain.com/downloads/IcoMoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@benfrain
benfrain / dabblet.css
Created May 26, 2012
Use the following CSS code if you want to use data attributes for inserting your icons
View dabblet.css
@font-face {
font-family: 'IcoMoon';
src: url('http://benfrain.com/downloads/IcoMoon.eot');
src: url('http://benfrain.com/downloads/IcoMoon.eot?#iefix') format('embedded-opentype'),
url('http://benfrain.com/downloads/IcoMoon.svg#IcoMoon') format('svg'),
url('http://benfrain.com/downloads/IcoMoon.woff') format('woff'),
url('http://benfrain.com/downloads/IcoMoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
You can’t perform that action at this time.