Skip to content

Instantly share code, notes, and snippets.

Ben Frain benfrain

Block or report user

Report or block benfrain

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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.