This is a CSS helper library to assist in all kinds of common front-end tasks. It's not a "framework" like Boilerplate, but is meant to support a designer coding their own front end and make common tasks easier and more robust.
- From the root of your project, install the Upbase repo using
bower install [email protected]:Upstatement/upbase.git
- Copy the
config.rb
file to your root from theconfig
folder inside theupbase
folder - Verify that the paths in
config.rb
match the paths you'd like to watch for your project - Run
compass watch
on the root of your directory - Verify that the
css
andsass
directories have been created - Navigate to your
sass
folder and create a file likestyle.scss
. - Add the line
@import "base";
to the top of thestyle.scss
file. This connects the files insass
to the components in upbase. - You're good! Sass away and make sure the output is showing up in
css
or wherever you told it to put the compiled output.
This library requires Compass or a compiler like LiveReload to watch and compile the scss. Optimal installation requires Bower.
The primary usage for this right now is to deploy it with Yeoman using the Upbase generator found here: https://github.com/Upstatement/generator-upbase/
Here's a guide to what lives where, and how to use it:
+--README.MD
// you're reading it!
|
+--bower.json
// tells bower to grab it
|
+--/config/
| |
| +--config.rb
// this is the config file for compass. Move this to the root of your project.
|
+--/components
// Where all the Upbase scss files live
| |
| +--_base.scss
// Imports all the junk
| +--_layout.scss
// Helpers for layout including Media-grid and cols()
| +--_mixins.scss
// Mixins for various things like SVG
| +--_normalize.scss
// Not sure
| +--_reset.scss
// Resets CSS
| +--_variables.scss
// Variables for things
|
+--/js
// Where all the Upbase scss files live
|
+--upbase.js
// JS helpers for compatibility in older browsers and stuff like .even
.odd
counting.