Info
This project is a collection of useful utilities, applicable to any web project. This includes Sass mixins., (*1)
Install
Then include it in your composer:, (*2)
"require": {
"wearebase/web-front-end-utilities" : "*"
}
And specify a version or minimum version., (*3)
If you want to install somewhere other than vendor, in your composer.json add the following:, (*4)
"extra": {
"installer-paths": {
"wp-content/themes/timber/packages/{$name}": ["wearebase/web-front-end-utilities"]
}
}
Enabling
Sass
Enabling Sass
Add the package to your Compass build path. In this example, I've imported all of the packages for this project., (*5)
add_import_path "wp-content/themes/timber/packages"
Using Sass
- In your project variables, you can optionally add the following to override default values:
- $grid-gutter-width
- $magic-gutter
- $magic-margin-gutters
- $magic-padding-gutters
- $magic-tablet-margin-gutters
- $magic-tablet-padding-gutters
- $magic-mobile-margin-gutters
- $magic-mobile-padding-gutters
Order of files:
* Font Stack
* - Your project setup file -
* - Your bootstrap variables -
* Responsive
* Mixins
* - Your Sass code -
* Magic Margins, (*6)
Sass: What's included
Mixins
Provides a huge array of includes that will assist you in writing your CSS., (*7)
Highlights include:
* Pseudo-Element Generation
* Magical Vertical-Align
* hocus (hover + focus in one rule)
* Proportion generator
* Responsive font sizer - requires "responsive" file
* Sprite mixins
* Bonus Bootstraps!, (*8)
Responsive
Responsive includes a bunch of responsive utilities for targeting bootstrap breakpoints - mobile, tablet, desktop, and large desktop. These will change based on your bootstrap config but will default to the bootstrap defaults if not provided., (*9)
Also provides mixins for retina devices, retina-sm, retina-xs, and iPhone 5's., (*10)
Include this file after your bootstrap variables., (*11)
Font-Stack
Include this file first in your Sass and you can use a whole load of font stacks. Totally optional but may be useful., (*12)
Magic Margins
Use classes like mt4 to quickly add a margin top of 4 gutters to your item. The gutter is automatically pulled in if you're using bootstrap but defaults to 10px., (*13)
Examples of classes:
* [type][direction][x]: type: p or m, direction: t r b l of x gutters
* Examples: pt2, mb0, mt2, pl2
* If direction is left empty then padding or margin will apply to all directions
* Examples: m0, p1, p4
* Append t- to apply to tablets only (requires import of "responsive")
* Append m- to apply to mobile only (requires import of "responsive"), (*14)
If you're referencing a gutter size that isn't being generated, simply adjust the variable for the amount of gutters you want. Gutters are generated from 0 up to the amount you specify., (*15)
Wallogit.com
