Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

This package has been deprecated

Author message:

bem-grid was renamed to Sharps and it was much better

bem-grid

2.5.0 • Public • Published

bem-grid

Build Status

BEM on Lost Grid.

Usage

The easiest way:

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

As ENB module:

  1. npm i --save-dev bem-grid
  2. Add bem-grid in your ENB config
[require('bem-grid').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 bem-grid 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('bem-grid').enb, {
  config: {
    maxWidth: '1100px',
    gutter: '10px',
    flex: 'flex'
  },
  source: '?.no-grid.css' // there is the source
}]

As plugin for postcss:

  1. npm i --save bem-grid
  2. Prepend your plugins with bem-grid
const postcss = require('postcss');
const bemGrid = require('bem-grid').postcss;
 
postcss([bemGconstrid({
  maxWidth: '1100px',
  gutter: '10px',
  flex: 'flex'
})]).process('a {color: red}').then(function(result) {
  console.log(result.css);
});

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'
    }
  ]
}

Row

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

install

npm i bem-grid

Downloadsweekly downloads

5

version

2.5.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability