Sasso
NPM
$ npm i -D sasso
main.sass
With Webpack
Usage
Sass
Scss
main
By default the margin
(set as the gutter between grids) is 0
.
In order to increase it, grid()
can receive a third argument.
// That would be a two columns grid: // flex-basis: 49%// margin: 0.5% // Three columns grid: // flex-basis: 33%// margin: 0.15%
Breakpoints & Media queries
//480px //768px //992px //1200px //or use a custom size
Example
Colors
From Material design color palette
Custom buttons, links and panels
Use the same palette.
//Create a custom Button with white background and black color //The oposite case
Navbars & footers
Custom horizontal lists. Use justify-content
values as input. The default value is flex-start
Helpers
// width & height // flex justify-content & align-items // extends to +position(center, center) // font-size & font-weight // border: 2px solid green// default color red
Resets
Normalize.css is included