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.
Installation (assuming you have Bower and Compass installed):
- From the root of your project, install the Upbase repo using
bower install firstname.lastname@example.org:Upstatement/upbase.git
- Copy the
config.rbfile to your root from the
configfolder inside the
- Verify that the paths in
config.rbmatch the paths you'd like to watch for your project
compass watchon the root of your directory
- Verify that the
sassdirectories have been created
- Navigate to your
sassfolder and create a file like
- Add the line
@import "base";to the top of the
style.scssfile. This connects the files in
sassto the components in upbase.
- You're good! Sass away and make sure the output is showing up in
cssor 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.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