GUFF

Lets keep this shit simple.

CSS Reset Mixin

@include reset;

Breakpoint Mixin

$desktop: "(min-width: 1024px)"; div { @include breakpoint($desktop){ width: 100%; } }

Renders the following media query:

@media (min-width: 1024px) { div { width: 100%; } }

Container Mixin

// Use on divs wrapping span mixins .container { @include container; } // Use on divs wrapping col mixins .container { @include col-container; }

Span Mixin

// cols : int - Column count // padding : boolean - Use grid padding : optional @include span(cols, padding);
// Requires container with container() mixin // Use span function to just get width .tile { @include span(4); }

Col Mixin

// Creates columns with margins using the justify method // cols : int - Column count @include col(cols);
// Requires a container with col-container mixin .col { @include col(4); }

Offset Mixin

// cols : int - Column count @include offset(cols);
.tile.offset-tile { @include @offset(4); }

Span Function

// Use to simply get column width .tile-no-float { width: span(4); margin-left: span(2); }

Prefix Mixins

// Generates browser prefixes for properties // Transistion @include transition(all 1s linear); // Transform @include transform(translateZ(0)); // Box Sizing @include box-sizing(border-box); // Anything you want @include prefixer(text-shadow, 5px, webkit moz);

rem-calc()

// rem-calc(int) // Calculates rem value for px value font-size: rem-calc(14);

safe-rem()

// property : string // num : int @include safe-rem(property, num); // Calculates rem value for px value and renders both for compatibility fallback @include safe-rem(font-size, 14); // Outputs: font-size: 14px; font-size: 0.875rem;

Helper Mixins

// Clearfix Mixin // // &:after { // content:""; // display:table; // clear:both; // } // @include clear; // clear(boolean) : Use false inside media queries to use mixin instead of placeholder @include clear(false); // Ellipsis Mixin - ellipsis($width) // // display: inline-block; // max-width: $width; // overflow: hidden; // text-overflow: ellipsis; // white-space: nowrap; // @include ellipsis(200px); // Hide Text // // overflow:hidden; // text-indent: 100%; // white-space: nowrap; // @include hide-text; // hide-text(boolean) : Use false inside media queries to use mixin instead of placeholder @include hide-text(false); // Inline List (use on <ul>) // // list-style-type:none; // padding:0; // margin:0; // overflow:hidden; // > li{ // display:block; // float:left; // } @include inline-list; // Pass false to render list items as inline-block instead of float @include inline-list(false);

Typographic Rhythm

// Uses the following variable settings // // $rem-base - base rem size in px // $line-height-base - line height base // $type-rhythm-ratio - header scaling ratio @include type(16px, 26px, 1.14); @include type(16px, 1.5, 1.14); // No arguments required, falls back to settings variables @include type;

H1

H2

H3

H4

H5
H6

Paragraph

Installation

// Bower bower install guff // In your SCSS file @import "guff" // Compass gem install guff-compass // In your config.rb file require "guff" // In your SCSS file @import "guff" Download Latest version from GitHub

Settings

Override these variables at the top of your scss file.

// Set base font size $rem-base: 16px !default; // Set line height ratio base. Accepts px, em, rem or int values $line-height-base: 26px !default; // Vertical rhythm ratio $type-rhythm-ratio: 1.14 !default; // Desktop Media Query $desktop: "(min-width: 1024px)" !default; // Tablet Media Query $tablet: "(min-width: 768px) and (max-width: 1023px)" !default; // Mobile Media Query $mobile: "(max-width: 767px)" !default; // Set Grid Column Count $grid-columns: 12 !default; // Set Grid Gutter (percentage) $grid-gutter: 4 !default; // Set Grid Padding (as px) $grid-padding: 20px !default; // Set Grid Max Width (as px) $grid-max-width: 1024px !default;

Playground

Try it out live On The Codepen Sandbox