underscore.css.scss v3.1.0
Underscore.css.scss
Underscore.css.scss is a library for CSS and SASS that provides common, reusable, helper classes for structural, layout, and textual properties. Best used in large size applications with long life-spans and CMS style websites.
Main Goals
- Easy to build upon.
- Lightweight.
- Easily integrate with other frameworks and toolkits.
Directory Structure
CSS
The /css
directory contains all the individual css
files that make up underscore.css.scss
. Each stylesheet provides some basic helpers that addresses the theme of the file name.
Example:
// image.css
._imgFluid {
height: auto;
max-width: 100%;
}
...
Full list of css
files:
SCSS
The /scss
directory contains all the individual css
files that make up underscore.css.scss
in their .scss
form. The .scss
files also contains more detailed comments explaining what the various selectors address, any specific imports
the file depends on, etc...
Full list of scss
files:
mixins, functions, and addons
The /scss/mixins
, /scss/functions
, and /scss/addons
directories contains some useful helper mixins and functions.
Compiling Stylesheets
Underscore.css.scss uses Grunt for task management.
Generate css
files
From a command shell and at root of project:
npm run build
If you want to generate css
on updates to the main scss
files:
npm run watch
Underscore.css.scss also uses the grunt-autoprefixer plugin. Running either command above will parse the CSS and add the appropriate vendor-prefixes using the Can I use database.
Requirement
There are no hard requirements to underscore.css.scss, b/c anybody can just take the css
files and do as they please, but in order to use the task manager Grunt or to work with SASS you will need to install them on your computer.
Installing Grunt
Grunt and the associated plugins are installed through npm, package manager for node.js.
- Install Node v0.10.0 or greater.
- From a command shell:
npm install -g grunt-cli
- Navigate to project root directory and type
npm install
Alternatively you can go here to read up on how to install Grunt.
Installing SASS
Uses SASS 3+
Note: SASS has a Ruby dependency.
Open Terminal or Command Prompt.
Install SASS.
gem install sass
Double-check.
sass -v
More information on how to install SASS here.
Styling Format
Namespace
All selectors are namespaced with an underscore to avoid any possible naming collisions with your personal application and other third-party libraries.
._selectorname { ... }
Declaration order
Declaration properties are grouped by context, with a single line seperating each group, and properties arranged in alphabetical order per group.
Group contexts and order within declaration block are as follows:
- layout
- box
- background
- typographical
- Other
- generated content
- list properties
- table properties
- ...
Example:
._selector {
display: block;
overflow: hidden;
position: relative;
border: 1px solid;
box-sizing: border-box;
margin: 10px;
padding: 10px;
background: transparent;
color: #333;
font-size: 16px;
list-style: none;
}
Versioning
Underscore.css.scss is maintained under the Semantic Versioning guidelines as best as possbile.
Releases are numbered <major><minor><patch>
, increment the:
- MAJOR version breaking backwards compatibility (reset minor and patch).
- MINOR version when you add functionality in a backwards-compatible manner (reset patch).
- PATCH version when you make backwards-compatible bug fixes.
For information about Semantic Versioning, visit semver.org.
Browser Support
- Chrome
- Firefox
- Opera
- Safari
- IE 8+ (I think!)
License
MIT license