Sharps
Modular grid powered by Lost and BEM
Usage
The easiest way:
bower install --save sharps
<link rel="stylesheet" href="./bower_components/sharps/dist/sharps.min.css">
As plugin for postcss:
npm i --save sharps
- Prepend your plugins with
sharps
const postcss = ;const sharps = postcss;;
As ENB module:
npm i --save-dev sharps
- Add
sharps
in your ENB config
enbconfig:columns: 12 // defaultmaxWidth: '1100px'gutter: '10px'flex: 'flex'
Note: If you have any css builder, you should change its target
and add source
to sharps parameters for preventing conflicts, like this:
techsstylustarget: '?.no-grid.css' // there is the changed targetsourcemap: falseautoprefixer:browsers: 'ie >= 10' 'last 2 versions' 'opera 12.1' '> 2%'enbconfig:maxWidth: '1100px'gutter: '10px'flex: 'flex'source: '?.no-grid.css' // there is the source
Easy example
left columnright column
block: 'row'content:elem: 'col'elemMods: mw: 6content: 'left column'elem: 'col'elemMods: mw: 6content: 'right column'
Options
Useful mods for row block:
-
(s|m|l|xl|xxl)al - align cols to left on needed displays
-
(s|m|l|xl|xxl)ac - align cols to center on needed displays
-
(s|m|l|xl|xxl)ar - align cols to right on needed displays
-
(s|m|l|xl|xxl)vat - align cols vertically to top on needed displays
-
(s|m|l|xl|xxl)vam - align cols vertically to middle on needed displays
-
(s|m|l|xl|xxl)vab - align cols vertically to bottom on needed displays
Useful mods for col element:
-
(s|m|l|xl|xxl) - auto width on needed displays
-
(s|m|l|xl|xxl)w - width on needed displays, 0 hide col on this device
-
(s|m|l|xl|xxl)o - offset on needed displays
-
(s|m|l|xl|xxl)of - order first this col on needed displays
-
(s|m|l|xl|xxl)ol - order last this col on needed displays
Authors
- Anton Winogradov (awinogradov) @awinogradov
Ideas
Please, talk about your ideas by GitHub issues.