Grid


@include flexGrid;

This mixin genrates classes for a flex-box grid system. Arguments allow you to define the amount of columns you want, the guttering, the screen width at which you want elements to stack and optional outdent/indent classes. Default settings can be overwritten to suit your template.

Default Settings:

  • $grid-col-count : 12;
  • $grid-gutter-width : 2%;
  • $grid-stack-point : 550px;
  • $grid-shift-classes : true;

@include gridClasses;

This mixin genrates classes for a fluid grid system. Arguments allow you to define the amount of columns you want, the guttering, the screen width at which you want elements to stack and optional outdent/indent classes. Default settings can be overwritten to suit your template.

Default Settings:

  • $grid-col-count : 12;
  • $grid-gutter-width : 2%;
  • $grid-stack-point : 550px;
  • $grid-mobile-first : true;
  • $grid-shift-classes : true;

@include gridColumns;

This mixin is used by @include gridClasses to calculate widths of column elements but it can also be used nested in selectors in the same way that you might use the susy ruby gem. This is useful if you dont need all the grid classes or if you want to apply column widths to elements that are dynamicly added on to the page - e.g. iframes.


@include gridIndent;

This mixin is used by @include gridClasses to calculate the margin indents needed for the various push classes. as with @include gridColumns this mixin can be used individually, nested in a selector to calculate the margin width of an element.


@include gridOutdent;

This mixin is used by @include gridClasses to calculate the margin outdents needed for the various pull classes. as with @include gridIndent this mixin can be used individually, nested in a selector to calculate the margin width of an element.


@include griddedList;

Add grid system styles to a list of elements. Arguments allow you to control the amont of blocks to display on a row, the grid column count, the gutter width, the screen width at which the elements will stack on top of each other.


@include gridRowLimit;

When using grid classes this mixin will allow you to specify a limit for the amount of elements in a row.


Animations Core


@include animation;

Add animation attributes to a selector with this mixin. It allows for a staggering effect using nth-child selectors. Please note that you will also need to define the keyframes that match the animation name. See @include keyframes; or @include transformKeyframes;


@include keyframes;

Easlily generate animation keyframes with this mixin. The sass @content directive is used to wrap the mixin's content with the various vendor prefixes.


@include transformKeyframes;

Easlily generate transform based animation keyframes with this mixin. Sass maps are used to replicate the keyframe syntax.


Animation Presets


@include fadeIn;

Predefined class and keyframes for a fade in style animation. This is a good example of the power of the @include animation; & @include transformKeyframes; mixins. Arguments allow you to change the easing, duration & nth-child(n) stagger count.


@include slideIn;

Predefined class and keyframes for a slide in transform animation. This is a good example of the power of the @include animation; & @include transformKeyframes; mixins. Arguments allow you to change the direction, slide distance, easing, duration & nth-child(n) stagger count.


@include slideOut;

Predefined class and keyframes for a slide out transform animation. Working in the exact opposite way to the Slide in animation. Arguments allow you to change the direction, slide distance, easing, duration & nth-child(n) stagger count.


@include rotateIn;

Predefined class and keyframes for a rotate in style animation. This is a good example of the power of the @include animation; & @include transformKeyframes; mixins. Arguments allow you to change the rotate angle, easing, duration & nth-child(n) stagger count.


@include pulse;

Predefined class and keyframes for a looping pulse animation. Can be used as a subtle attention grabber for buttons.


@include magic;

Predefined class and keyframes for a looping magical reveal. Can be used as a subtle attention grabber for buttons or other elements.


@include elastic;

Predefined class and keyframes for a looping elastic animation. Can be used as a subtle attention grabber for buttons or other elements.


@include sway;

Predefined class and keyframes for a looping sway animation. Can be used as a subtle attention grabber for buttons or other elements.


@include flipClass;

Add classes for a flipping card effect. Argumants allow you to control the flip axis and duration of the animation.


Buttons


@include flatButton;

Add styles for a flat ui button with a bottom border to give an embossed effect. Arguments allow you to control colour, border thickness, text contrast, optional icon styles and rounding.


@include gradientButton;

Add styles for an old school gradient button for that retro vibe. Arguments allow you to control colour, gradient contrast, text contrast, optional icon styles and rounding.


@include flatButtonGroup;

Add styles for a flat ui style button group. Arguments allow you to control colour font size and border radius.


@include gradientButtonGroup;

Add styles for a gradient style button group. Arguments allow you to control colour contrast amount, font size and border radius.


Fonts & Typography


@include googleFont;

Add selected Google web fonts and assign them to selectors with this mixin and eliminate the need to reference an external stylesheet. Arguments allow you to select the font you wish to add, the selectors to assign and optional weight of the font.

Currently available fonts:

  • open-sans
  • open-sans-condensed
  • roboto
  • roboto-slab
  • leckerli-one
  • quicksand
  • oswald
  • source-sans
  • lobster
  • arvo

@include verticalRhythm;

Generate styles for a consistant vertical rhythm for text with this mixin. Arguments allow you to control the base font size, line & margin height and the size of headings. Heading siszes can be entered as an array of pixel values, e.g: 40px 36px 32px 28px 24px 20px corresponds to h1 h2 h3 h4 h5 h6 elements respectively. You can alternatively use a single value for the h1 and all other heading font sizes will be programmatically calculated.


@include headerSizes;

Programmatically calculate the sizes of your heading elements. This mixin uses the @include fontSize mixin in order to calulate both rem and pixel value fallbacks. by passing in the ceiling(h1) and floor(h6) size values. These integers will be converted into px and rem values using the @include fontSize(); mixin.


@include gradientText;

Add a vertical linear gradient to text. Webkit support only. Other browsers will fall back to a flat colour generated by mixin the top and bottom colours.


@include textColumns;

Programmatically generate css3 columns with breakpoints by using this mixin.


@include fontSize;

Convert a pixel value into rem value with this mixin. Pixel values are still output for legacy browsers.


Messages & Alerts


@include message;

Add styles for an alert style message element. Arguments allow you to asign a class name, add colour, edit rounding and border effect.


@include badge;

Generate styles for a notification badge with this mixin. Arguments allow you to contol the colour and font size.


@include tooltip;

Generate styles for a css tooltip triggered on hover. Arguments allow you to contol the direction, shift distance from trigger element, background colour, font size, width, padding and arrow size. Note: the font colour will be automatically generated using the contrast function using the background colour as it's base value.


Helpers


@include normalise;

Normalise Html elements and programtically computes heading sizes


@include retinaImage;

Add retina/HD background images really easily with this mixin. It takes arguments for the image path (relative to the compiled css file) and for image dimentions to scale to.


@include scrollbar;

Create modern looking flat UI scrollbars with this mixin. Note: This is supported by webkit browsers only. Un supported browsers will fall-back to the default srcollbar. Arguments allow you to control colour, size and contrast values. To see an example, please view this documentation page in Chrome or Safari. This mixin is being used by both the sidebar and main documentation elements.


@include circle;

Mixin for creating a css circle with equal dimentions for height, width, line-height & border-radius.


@include arrow;

Mixin for creating css triangle arrows


@include noSelect;

Helper to stop unwanted highlighting effect on elements


@include vendorPrefix;

Mixin for generating vendor prefixes for css3 properties.


Colour Palette


@include linkColours;

Generate link :psuedo classes with colours for each link state with this mixin.


@include swatch;

Generate classes for a colour swatch. Creates text, border, background and contrast classes.


@include palette;

Generate classes for a colour palette. Creates text, border, background and contrast classes for each colour in the sass map required for the first argument. The map format requires a


Icons


@include lineIcons;

Adds icon classes generated with the icomoon app feather set.


@include blockIcons;

Adds icon classes generated with the icomoon app Entypo set.


Layout


@include masonryColumns;

Programmatically generate masonry style css layouts with breakpoints by using this mixin. It uses both the masonryClasses and breakPoint mixins to generate columns for various sizes using the column-count css3 property.


@include masonryClasses;

Modern masonry css layout. Uses *column-count to arange content This mixin can be used with the @include cardClass; mixin to create "Pinterest" style layouts. Html5 browser support only. See caniuse for more info on column-count browser support.


@include fullScreen;

Nested include to apply full screen styles to a selector. Uses the vh css property see caniuse for more information


@include stickyHeader;

Apply sticky header styles to a selector with this mixin. Arguments allow you to specify the height of the header and css positioning.


@include fitContainer;

Absolutely position an element to the nearest releatively positioned ancestor with this mixin. It takes a single argument for the css box model - e.g. 10px 20px 10px 20px would refer to top right bottom left in the same way as padding or magin shorthands. Accepted values are pixel values, em values, percentages or 'auto'.


@include sideBarAppend;

This mixin can be used to absolutely position an element to fit the remainder of the screen if a sidebar has been included. Best used with the sideBar mixin. For an example of usage, look no further than this documentation page. The side navigation was generated with @include sidebar and the main documentation section was generated with @include sideBarAppend bot using the same width variable.


@include centre;

Centralises a fluid container element to its nearest relatively posisiotned parent. Can be used within an element with the fullscreen class.


@include centreClasses;

This mixin genrates 4 classes for centering elements or text. Can be used within an element with the fullscreen class.


@include breakPoint;

A more symantic wrapper for handling breakpoints. It takes two arguments. Firstly for the size. This can be 'large' - 1420px, 'medium' - 1200px, 'small' - 760px or a pixel value of your choosing. The second argument allows you to specify the type of breakpoint i.e. 'min' = min-width or 'max' = max-width.


Forms


@include formRounded;

Include styles for a form with rounded inputs and textareas. Arguments Allow you to control the rounding amount, padding and font size of elements.


@include formLined;

Include styles for a form with bottom-bordered inputs and textareas. Arguments Allow you to control the border thickness, padding and font size of elements.


@include formsTheme;

Control the colours of form elements by passing in arguments for text, background and focus colours.


@include switch;

Include styles for a modern looking javascript form switch with this mixin. A class name is required for the first argument. Optional arguments allow you to control on colour, off colour, width and font size. Note: the javascript for this is yet to be included. See below for expected markup.


@include slider;

Include styles for a modern looking javascript range slider element. A class name is required for the first argument. Optional arguments allow you to control slide colour, track colour, and height. Note: the javascript for this is yet to be included. See below for expected markup.


Svg


@include doughnut;

For styling doughnut svgs