Usage
BaseWeb is designed to be worked on within a SCSS development workflow. The easiest way to get started is to open up _baseweb.scss
and include all the modules that your project needs and comment out all the ones that you don't.
// Settings (Required)
@import "settings/palette";
@import "settings/media";
@import "settings/grid";
@import "settings/typography";
@import "settings/global";
// Core (Required)
@import "core/functions";
@import "core/mixins";
@import "core/media";
@import "core/grid";
// Elements
...
// Blocks
...
// Custom
...
At a bare minimum, the only required files are in the settings and core directories. These files also don't output any CSS directly so the CSS footprint of using BaseWeb is nonexistent. This puts all the power of CSS output into the hands of the author.
Elements, Blocks and Custom
BaseWeb's organizes its CSS output in three categories: Elements, Blocks and Custom.
- Elements
- A full range of element modules are included in BaseWeb that add base styles, classes, variables and mixins for styling the most basic of HTML elements.
- Blocks
- Blocks on the other hand are a collection of HTML elements that form a component. Think of it like the difference between an unordered list (element) and a breadcrumb (block).
- Custom
- The custom directory is where an author stores their project specific styles. The great thing about keeping custom styles tied to the BaseWeb output is that it makes all variables, functions and mixins available throughout a project. It also means that all your styles are output in a single CSS file which reduced server requests.
Compiling BaseWeb
While the BaseWeb docs are built using Node, Jake and the node-sass module to compile and minify the CSS output, you can use any method for your project workflow.
It is recommended that you output both a non-compressed CSS file along with a production ready CSS file. This is mainly for monitoring your CSS footprint while working with BaseWeb.
var 'scss' = ({
'input' : '/scss/_baseweb.scss',
'output' : '/css/baseweb.css',
'style' : 'expanded'
}, {
'input' : '/scss/_baseweb.scss',
'output' : '/css/baseweb.min.css',
'style' : 'compressed'
});