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:
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:
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.
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.
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.
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.
When using grid classes this mixin will allow you to specify a limit for the amount of elements in a row.
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;
Easlily generate animation keyframes with this mixin. The sass @content directive is used to wrap the mixin's content with the various vendor prefixes.
Easlily generate transform based animation keyframes with this mixin. Sass maps are used to replicate the keyframe syntax.
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.
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.
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.
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.
Predefined class and keyframes for a looping pulse animation. Can be used as a subtle attention grabber for buttons.
Predefined class and keyframes for a looping magical reveal. Can be used as a subtle attention grabber for buttons or other elements.
Predefined class and keyframes for a looping elastic animation. Can be used as a subtle attention grabber for buttons or other elements.
Predefined class and keyframes for a looping sway animation. Can be used as a subtle attention grabber for buttons or other elements.
Add classes for a flipping card effect. Argumants allow you to control the flip axis and duration of the animation.
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.
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.
Add styles for a flat ui style button group. Arguments allow you to control colour font size and border radius.
Add styles for a gradient style button group. Arguments allow you to control colour contrast amount, font size and border radius.
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:
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.
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.
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.
Programmatically generate css3 columns with breakpoints by using this mixin.
Convert a pixel value into rem value with this mixin. Pixel values are still output for legacy browsers.
Add styles for an alert style message element. Arguments allow you to asign a class name, add colour, edit rounding and border effect.
Generate styles for a notification badge with this mixin. Arguments allow you to contol the colour and font size.
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.
Normalise Html elements and programtically computes heading sizes
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.
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.
Mixin for creating a css circle with equal dimentions for height, width, line-height & border-radius.
Mixin for creating css triangle arrows
Helper to stop unwanted highlighting effect on elements
Mixin for generating vendor prefixes for css3 properties.
Generate link :psuedo classes with colours for each link state with this mixin.
Generate classes for a colour swatch. Creates text, border, background and contrast classes.
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
Adds icon classes generated with the icomoon app feather set.
Adds icon classes generated with the icomoon app Entypo set.
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.
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.
Nested include to apply full screen styles to a selector. Uses the vh css property see caniuse for more information
Apply sticky header styles to a selector with this mixin. Arguments allow you to specify the height of the header and css positioning.
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'.
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.
Centralises a fluid container element to its nearest relatively posisiotned parent. Can be used within an element with the fullscreen class.
This mixin genrates 4 classes for centering elements or text. Can be used within an element with the fullscreen class.
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.
Add flat ui pagination classes with this mixin. Arguments allow you to control Colours, sizing, outer roundness and thickness of the bottom border.
Add styles for a flat ui list dropdaown. Arguments allow you to control Colours, sizing & outer roundness.
Add styles for a flat UI style tabbing interface.
Add styles for a vertical, sidebar style navigation menu with indentented sub-navigation. Arguments allow you to control the colour of the links at various states, font size and padding.
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 styles for a form with bottom-bordered inputs and textareas. Arguments Allow you to control the border thickness, padding and font size of elements.
Control the colours of form elements by passing in arguments for text, background and focus colours.
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 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.
For styling doughnut svgs