Skip to content

Instantly share code, notes, and snippets.

Chris Michel hatefulcrawdad

Block or report user

Report or block hatefulcrawdad

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
@hatefulcrawdad
hatefulcrawdad / Foundation 3.0 SCSS Button Extrapolation
Created May 25, 2012
Trying out a new button implementation in scss using mixins and such. It should be more flexible, but we'll see after some review.
View Foundation 3.0 SCSS Button Extrapolation
// Normal Button Padding
$btn-top-pad: 9px;
$btn-rl-pad: 34px;
$btn-bottom-pad: 11px;
// Tiny Button Padding
$btn-top-pad-tiny: 6px;
$btn-rl-pad-tiny: 14px;
$btn-bottom-pad-tiny: 8px;
@hatefulcrawdad
hatefulcrawdad / grid-settings.scss
Created Jun 28, 2012
Foundation 3 grid variables
View grid-settings.scss
// Grid Settings
$rowWidth: 1000px;
$columnGutter: 30px;
$totalColumns: 12;
$mobileTotalColumns: 4;
@hatefulcrawdad
hatefulcrawdad / color-settings.scss
Created Jun 28, 2012
Foundation 3 Color Settings
View color-settings.scss
// Colors Settings
$mainColor: #2ba6cb;
$secondaryColor: #e9e9e9;
$alertColor: #c60f13;
$successColor: #5da423;
$txtColor: #222;
$highlightColor: #ffff99;
$black: #000;
$white: #fff;
$shinyEdge: rgba(#fff, .5);
@hatefulcrawdad
hatefulcrawdad / button-settings.scss
Created Jun 28, 2012
Foundation 3 Color Settings
View button-settings.scss
// Button Settings
$buttonRadius: 3px;
$btnBase: 10px;
$tinyBtnBase: $btnBase - 5;
$smallBtnBase: $btnBase - 3;
$largeBtnBase: $btnBase + 5;
@hatefulcrawdad
hatefulcrawdad / type-settings.scss
Created Jun 28, 2012
Foundation 3 Type Settings
View type-settings.scss
// Typography Settings
$headerFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
$headerFontWeight: bold;
$headerFontColor: #222;
$bodyFontFamily: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
$bodyFontWeight: normal;
$bodyFontColor: $txtColor;
...
@hatefulcrawdad
hatefulcrawdad / ui-settings.scss
Created Jun 28, 2012
Foundation 3 UI Settings
View ui-settings.scss
// Form Settings
$formSpacing: 12px;
// Tab Settings
$tabHeight: 40px;
// Nav Bar Settings
$navBarHeight: 40px;
$navFlyoutBaseWidth: 250px;
View example.html
<header>
<aside></aside>
<section>
<article>
<header></header>
<div></div>
</article>
</section>
</header>
View semantic-grid.scss
header { @include outerRow();
aside { @include column(4); }
section { @include column(8);
article { @include innerRow();
header { @include column(2);
mid-width: 0; }
div { @include column(10); }
}
}
}
View css-triangles.scss
.element {
@include cssTriangle(5px, #ff0000, [top, bottom, left, right]);
}
View font-size.scss
.element {
@include font-size(18);
}
You can’t perform that action at this time.