2.1.1

LICENSE

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright © 2018 Dmitrii Lavrik
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

index.js

@@ -96,6 +96,7 @@ module.exports = function (dest, options) {
 
         patterns.debug = patternDebug.toString()
                                      .replace('{{sizes}}', sizeCalling.join('\n'), 'g')
+                                     .replace('{{mixinNames.container}}', options.mixinNames.container, 'g')
                                      .replace('{{mixinNames.row-flex}}', options.mixinNames.row, 'g')
                                      .replace('{{mixinNames.col}}', options.mixinNames.column, 'g');
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "smart-grid",
-  "version": "2.0.1",
+  "version": "2.1.1",
   "description": "Smart CSS Grid with different preprocessors: LESS, SCSS, SASS or Stylus",
   "main": "index.js",
   "dependencies": {},
@@ -16,7 +16,7 @@
     "stylus"
   ],
   "author": "Dmitry Lavrik",
-  "license": "ISC",
+  "license": "MIT",
   "homepage": "https://github.com/dmitry-lavrik/smart-grid#readme",
   "repository": {
     "type": "git",

readme.md

@@ -5,8 +5,8 @@
 ```
 $ npm i smart-grid --save-dev
 ```
-##### smart-grid 2.0.0 is in beta! You can use stable version 1.1.0
-## Usage
+
+* Create a file with the following config. Tweak it where needed.
 
 ```js
 var smartgrid = require('smart-grid');
@@ -15,7 +15,7 @@ var smartgrid = require('smart-grid');
 var settings = {
     outputStyle: 'less', /* less || scss || sass || styl */
     columns: 12, /* number of grid columns */
-    offset: '30px', /* gutter width px || % */
+    offset: '30px', /* gutter width px || % || rem */
     mobileFirst: false, /* mobileFirst ? 'min-width' : 'max-width' */
     container: {
         maxWidth: '1200px', /* max-width оn very large screen */
@@ -50,17 +50,26 @@ var settings = {
 smartgrid('./path-to-your-folder', settings);
 ```
 
+* Run this file with node
+
+```
+node smart-grid-config.js
+```
+
+* You can also implement this code in Gulp tasks, Grunt e t.c.
+
 ## Why? How does it work?
 
 We set JS array with settings and get LESS, SCSS, SASS or Stylus file with Smart Grid.
 
 ### And what?
 
-The fact that the standard bootstrap grid, makes us write a lot of classes in html, that spoils the structure of the code.
+Standard bootstrap grid forces us to write a lot of classes in html and spoils the structure of the code.
+
+In the proposed version, we won't touch classes in the html code at all. Instead we'll only add mixins to the existing selectors.
 
-In the proposed version, we do not touch at all the classes in the html code, but only add the mixins to the existing selectors.
+### Usage examples
 
-### Sample. We write
 LESS
 ```less
 .items{
@@ -113,7 +122,7 @@ OR Stylus
         size-md(5)
         size-xs(10)
 ```
-### And we get big CSS
+### Result is large CSS
 
 ```css
 .items {
@@ -146,9 +155,9 @@ OR Stylus
 }
 ```
 
-It's nice! But it's generate a lot of media queries.
+Mostly nice! But too many media queries.
 
-### But after use group-css-media-queries get the same code written by hand.
+### After using group-css-media-queries media queries are neatly grouped, same as you would do manually
 
 ```css
 .items {
@@ -181,9 +190,9 @@ It's nice! But it's generate a lot of media queries.
 
 ### So, ideal CSS scheme
 
-1. Smart Grid generate libruary for LESS, SCSS, SASS or Stylus
-2. We used mixins to write code quickly
-3. And finaly, we used:
+1. Smart Grid generates mixins for LESS, SCSS, SASS or Stylus
+2. You use mixins to write code quickly
+3. And finaly, we compile the result through:
     - group-css-media-queries
     - autoprefixer
     - clean-css

system/patterns/debug

@@ -4,7 +4,7 @@
 {{tab}}
 {{tab}}> div{{brace}}
 {{tab}}{{tab}}height{{:}}inherit{{;}}
-{{tab}}{{tab}}{{call}}wrapper(){{;}}
+{{tab}}{{tab}}{{call}}{{mixinNames.container}}(){{;}}
 {{tab}}{{tab}}
 {{tab}}{{tab}}> div{{brace}}
 {{tab}}{{tab}}{{tab}}height{{:}}inherit{{;}}

system/replaces.js

@@ -14,6 +14,7 @@ class Replaces {
                 '{{/i}}': '"',
                 '{{before_mixin}}': '.',
                 '{{call}}': '.',
+                '{{call_with_content}}': '.',
                 '{{brace}}': '{',
                 '{{/brace}}': '}',
                 '{{:}}': ': ',
@@ -33,6 +34,7 @@ class Replaces {
                 '{{/i}}': '}',
                 '{{before_mixin}}': '@mixin ',
                 '{{call}}': '@include ',
+                '{{call_with_content}}': '@include ',
                 '{{brace}}': '{',
                 '{{/brace}}': '}',
                 '{{:}}': ': ',
@@ -52,15 +54,16 @@ class Replaces {
                 '{{/i}}': 'iclose',
                 '{{before_mixin}}': '',
                 '{{call}}': '',
+                '{{call_with_content}}': '+',
                 '{{brace}}': '',
                 '{{/brace}}': '',
                 '{{:}}': ' ',
                 '{{;}}': '',
-                '{{block-content-var-delimeter}}': ', ',
-                '{{block-content-var}}': '$content',
-                '{{block-content-extract}}': '{$content}',
-                '{{block_callable_brace}}': '(@block{\n',
-                '{{/block_callable_brace}}': '})'
+                '{{block-content-var-delimeter}}': '',
+                '{{block-content-var}}': '',
+                '{{block-content-extract}}': '{block}',
+                '{{block_callable_brace}}': '()\n',
+                '{{/block_callable_brace}}': ''
             },
             sass: {
                 '{{var}}': '$',
@@ -71,6 +74,7 @@ class Replaces {
                 '{{/i}}': '}',
                 '{{before_mixin}}': '=',
                 '{{call}}': '+',
+                '{{call_with_content}}': '+',
                 '{{brace}}': '',
                 '{{/brace}}': '',
                 '{{:}}': ': ',

system/styles.js

@@ -47,7 +47,7 @@ class Styles{
             }
             else{
                 let inner = this.objToStyles(obj, left + 1);
-                styles += `{{call}}${callable}{{block_callable_brace}}${inner}`;
+                styles += `{{call_with_content}}${callable}{{block_callable_brace}}${inner}`;
                 styles += this.left(offset) + '{{/block_callable_brace}}';
             }
         }