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;