Useful Sass utilities for most web projects
CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
scss
.gitignore
LICENSE
README.md
composer.json

README.md

Info

This project is a collection of useful utilities, applicable to any web project. This includes Sass mixins.

Install

Then include it in your composer:

"require": {
  "wearebase/web-front-end-utilities" : "*"
}

And specify a version or minimum version.

Configure where you want the package to go

If you want to install somewhere other than vendor, in your composer.json add the following:

"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.

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

Sass: What's included

Mixins

Provides a huge array of includes that will assist you in writing your CSS.

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!

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.

Also provides mixins for retina devices, retina-sm, retina-xs, and iPhone 5's.

Include this file after your bootstrap variables.

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.

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.

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")

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.