This repository has been archived by the owner. It is now read-only.
SASS/SCSS library to help building awesome websites 📌
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Shield SCSS logo


Shield is a little library with the files that I use on my job/projects

How to


  1. Copy everything inside of src/ folder and just include shield.scss on your main SASS/SCSS file


  1. For manipulate/get variables/values you need to use @functions that are stored in functions/ folder (like get a map value or calculate height)
  2. For generating css dinamically or things like that you should use mixins, they're stored in mixins/
  3. For customizing shield-scss with your own font-sizes, media-queries-sizes and etc you should write your things in _base.scss, _mixins.scss and _functions.scss, where you can customize as you want to. Do not worry about overriding an existing map because it will be merged with original map and just the changed' values will be overridden. But the changed variables will be like you settled.
  4. _triggers.scss are short-hand for mixins(i.e the short-hand for flex-flow() is fx-fw() or I don't know, change as you want to), they are highly compatible with emmets short-hands so if you use emmet this is easy
  5. You can't override existing functions and mixins.

Problems, issues, questions...

Whatever, just open an issue and let's talk bro.

Why do not I store all of the variables in a separate file?

Just because having to open another file and keep looking at him just for check variables and maps are painful. It is easier just edit one file.