Modular grid powered by Lost and BEM
CSS JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

README.md

Sharps

Modular grid powered by Lost and BEM

Usage

The easiest way:

  1. bower install --save sharps
  2. <link rel="stylesheet" href="./bower_components/sharps/dist/sharps.min.css">

As plugin for postcss:

  1. npm i --save sharps
  2. Prepend your plugins with sharps
const postcss = require('postcss');
const sharps = require('sharps').postcss;

postcss([sharps({
  columns: 12, // default
  maxWidth: '1100px',
  gutter: '10px',
  flex: 'flex'
})]).process('a {color: red}').then(function(result) {
  console.log(result.css);
});

As ENB module:

  1. npm i --save-dev sharps
  2. Add sharps in your ENB config
[require('sharps').enb, {
  config: {
    columns: 12, // default
    maxWidth: '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:

[techs.stylus, {
  target: '?.no-grid.css', // there is the changed target
  sourcemap: false,
  autoprefixer: {
    browsers: ['ie >= 10', 'last 2 versions', 'opera 12.1', '> 2%']
  }
}],

[require('sharps').enb, {
  config: {
    maxWidth: '1100px',
    gutter: '10px',
    flex: 'flex'
  },
  source: '?.no-grid.css' // there is the source
}]

Easy example

<div class="row">
    <div class="row__col row__col_mw_6">left column</div>
    <div class="row__col row__col_mw_6">right column</div>
</div>
{
  block: 'row',
  content: [
    {
      elem: 'col',
      elemMods: { mw: 6 },
      content: 'left column'
    },
    {
      elem: 'col',
      elemMods: { mw: 6 },
      content: '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

Ideas

Please, talk about your ideas by GitHub issues.

MIT License