Merge pull request #108 from bem-incubator/feature/module

feat(*): modularize grid
awinogradov · Dec 7, 2015 · 5f5ab67 · 5f5ab67
2 parents 0b1971e + e9e3410
commit 5f5ab67
Show file tree

Hide file tree

Showing 17 changed files with 1,975 additions and 162 deletions.
diff --git a/.enb/make.js b/.enb/make.js
@@ -7,7 +7,9 @@ var path = require('path'),
         files : require('enb-bem-techs/techs/files'),
         postcss : require('enb-postcss/techs/enb-postcss'),
         bemhtml : require('enb-bemxjst/techs/bemhtml'),
-        html : require('enb-bemxjst/techs/html-from-bemjson')
+        borschik : require('enb-borschik/techs/borschik'),
+        html : require('enb-bemxjst/techs/bemjson-to-html'),
+        grid : require('../engines/enb-bem-grid/techs/enb-bem-grid')
     };
 
 module.exports = function(config) {
@@ -18,8 +20,8 @@ module.exports = function(config) {
         nodeConfig.addTechs([
             [techs.levels, {
                 levels : [
-                    { path : path.join('libs', 'bem-core',  'common.blocks'), check : false },
-                    { path : 'common.blocks', check : true },
+                    { path : path.join('libs', 'bem-core', 'common.blocks'), check : false },
+                    { path : path.join('libs', 'bem-components', 'common.blocks'), check : false },
                     { path : 'test.blocks', check : true }
                 ]
             }],
@@ -30,8 +32,18 @@ module.exports = function(config) {
 
         nodeConfig.addTechs([
             [techs.postcss, {
-                sourcemap : true,
-                plugins : require('./postcss-plugins')
+                source : '?.css',
+                target : '?.tmp.css',
+                plugins : []
+            }],
+            [techs.grid, {
+                source : '?.tmp.css',
+                target : '?.css',
+                config : {
+                    maxWidth : '1100px',
+                    gutter : '10px',
+                    flex : 'flex'
+                }
             }],
             [techs.bemhtml, {
                 devMode : false
@@ -43,4 +55,42 @@ module.exports = function(config) {
             '?.css', '?.html'
         ]);
     });
+
+    config.node('dist/', function(nodeConfig) {
+        nodeConfig.addTechs([
+            [techs.levels, {
+                levels : []
+            }],
+            [techs.provide, { target : '?.bemdecl.js' }],
+            [techs.deps],
+            [techs.files],
+            [techs.postcss, {
+                source : '?.css',
+                target : '?.tmp.css',
+                plugins : []
+            }],
+            [techs.grid, {
+                source : '?.tmp.css',
+                target : '?.tmp.grid.css',
+                config : {
+                    maxWidth : '1100px',
+                    gutter : '10px',
+                    flex : 'flex'
+                },
+                browsers : [
+                    'last 2 versions',
+                    'ie 10',
+                    'ff 24',
+                    'android 4',
+                    'ios >= 5'
+                ]
+            }],
+            [techs.borschik, { source : '?.tmp.grid.css', target : 'bem-grid.css', minify : false }],
+            [techs.borschik, { source : '?.tmp.grid.css', target : 'bem-grid.min.css', minify : true }]
+        ]);
+
+        nodeConfig.addTargets([
+            'bem-grid.css', 'bem-grid.min.css'
+        ]);
+    });
 };
diff --git a/.enb/postcss-plugins.js b/.enb/postcss-plugins.js
@@ -1,23 +1,15 @@
-module.exports = [
-    require('postcss-mixins'),
-    require('postcss-for'),
-    require('postcss-simple-vars')({
-        variables : {
-            gridMaxWidth : '1100px',
-            gridGutter : '10px',
-            gridFlex : 'flex'
-        }
-    }),
-    require('lost'),
-    require('cssnext')(),
-    require('postcss-nested'),
-    require('autoprefixer-core')({
-        browsers : [
-            'last 2 versions',
-            'ie 10',
-            'ff 24',
-            'android 4',
-            'ios >= 5'
-        ]
-    })
-];
+module.exports = function(config) {
+    return [
+        require('postcss-mixins'),
+        require('postcss-for'),
+        require('postcss-simple-vars')({
+            variables : config.grid
+        }),
+        require('lost'),
+        require('cssnext')(),
+        require('postcss-nested'),
+        require('autoprefixer-core')({
+            browsers : config.browsers
+        })
+    ];
+};
diff --git a/.gitignore b/.gitignore
@@ -22,7 +22,13 @@ libs
 /coverage.json
 /gemini-report/
 
-/dist
+/engines/enb-bem-grid/techs/.enb/tmp
+/engines/enb-bem-grid/techs/build/build.deps.js
+/engines/enb-bem-grid/techs/build/build.css
+/dist/dist.css
+/dist/dist.tmp.css
+/dist/dist.tmp.grid.css
+/dist/dist.deps.js
 /*.docs
 /*.examples
 /*.specs

diff --git a/.jscsrc b/.jscsrc
@@ -33,7 +33,6 @@
     "disallowKeywords": ["with"],
     "disallowKeywordsOnNewLine": ["else"],
     "requireLineFeedAtFileEnd": true,
-    "disallowMultipleLineBreaks": true,
     "validateJSDoc": {
         "checkParamNames": true,
         "requireParamTypes": true

diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,8 @@
+dist/
+.gitignore
+
+node_modules/
+libs/
+.githooks/
+desktop.bundles/
+test.blocks/
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,7 +1,5 @@
 ## Workflow
 
-This README also available in [russian](https://github.com/bem-incubator/bem-grid/blob/master/CONTRIBUTING.ru.md).
-
 You can read more about workflow on GitHub [guides](http://guides.github.com/).
 
 ### How to contribute

diff --git a/CONTRIBUTING.ru.md b/CONTRIBUTING.ru.md
diff --git a/README.md b/README.md
@@ -4,30 +4,41 @@
 
 [![Build Status](https://travis-ci.org/bem-incubator/bem-grid.svg?branch=master&style=flat)](https://travis-ci.org/bem-incubator/bem-grid)
 
-This README also available in [russian](https://github.com/bem-incubator/bem-grid/blob/master/README.ru.md).
+BEM-methodology for [Lost](https://github.com/corysimmons/lost).
 
-Library for do awesome grid in bem-projects. This grid based on [lost grid](https://github.com/corysimmons/lost).
+## Usage
 
-## Dependencies
+Like Twitter Bootstrap:
 
-- `i-bem` block from [bem-core](https://github.com/bem/bem-core)
+1. `bower install --save bem-grid`
+2. `<link type="text/css" rel="stylesheet" href="./bower_components/bem-grid/dist/bem-grid.css">`
 
-## Install
+As [ENB](https://github.com/enb-make/enb) module:
 
-Take way like connecting with [bem-core](https://github.com/bem/bem-core)
-and [bem-components](https://github.com/bem/bem-components) libraries.
-
-Add levels from bem-grid to your `make.js` file:
-
-``` javascript
-[ 'libs/bem-grid/common.blocks' ]
+1. `npm i --save-dev enb-bem-grid`
+2. Add `enb-grid` after any css builder
+``` js
+[require('enb-grid'), {
+    config : {
+        maxWidth : '1100px',
+        gutter : '10px',
+        flex : 'flex'
+    }
+}]
 ```
+Example [config](https://github.com/bem-incubator/bem-grid/blob/master/.enb/make.js#L34-L47) file [ENB](https://github.com/enb-make/enb) with [postcss](https://github.com/postcss/postcss) builder.
 
 ## Easy example
 
-Example for two columns on devices with medium screen. They will be collapsed on small.
+``` html
+<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>
+```
 
 ``` javascript
+// bemjson
 {
     block : 'row',
     content : [
@@ -45,8 +56,6 @@ Example for two columns on devices with medium screen. They will be collapsed on
 }
 ```
 
-See more examples in `promo.pages/index/index.bemjson.js` (build it with `enb make`) or on [landing page](http://bem-incubator.github.io/bem-grid).
-
 ## Row
 
 __Useful mods for row block:__
@@ -55,9 +64,9 @@ __Useful mods for row block:__
 - __(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 verticaly to top on needed displays
-- __(s|m|l|xl|xxl)vam__ - align cols verticaly to middle on needed displays
-- __(s|m|l|xl|xxl)vab__ - align cols verticaly to bottom 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:__
 
@@ -68,8 +77,6 @@ __Useful mods for col element:__
 - __(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
 
-## [Customize](https://github.com/bem-incubator/bem-grid/blob/master/.enb/postcss-plugins.js)
-
 ### Authors
 
 - Anton Winogradov ([verybigman](https://github.com/verybigman)) @awinogradov

diff --git a/README.ru.md b/README.ru.md
diff --git a/bower.json b/bower.json
@@ -1,14 +1,15 @@
 {
   "name": "bem-grid",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Flexbox grid on BEM methodology",
   "repository": {
     "type": "git",
     "url": "git://github.com/bem-incubator/bem-grid.git"
   },
   "keywords": [
     "bem",
-    "stylus",
+    "lost",
+    "postcss",
     "flexbox",
     "grid"
   ],
@@ -20,9 +21,9 @@
     "libs"
   ],
   "dependencies": {
-    "bem-core": "~2.6.0"
   },
   "devDependencies": {
+    "bem-components": "2.4.0",
     "bem-pr": "~0.10.0"
   },
   "license": "MIT"