From 8b95c4cfe78973ef7023eeed2fc766d886884cf7 Mon Sep 17 00:00:00 2001 From: Mitya Date: Sun, 3 Jun 2018 11:48:10 +0300 Subject: [PATCH] 2.1.1 --- LICENSE | 9 +++++++++ index.js | 1 + package.json | 4 ++-- readme.md | 33 +++++++++++++++++++++------------ system/patterns/debug | 2 +- system/replaces.js | 14 +++++++++----- system/styles.js | 2 +- 7 files changed, 44 insertions(+), 21 deletions(-) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..02c1e9e --- /dev/null +++ b/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. \ No newline at end of file diff --git a/index.js b/index.js index 4bb1203..6bc1169 100644 --- a/index.js +++ b/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'); diff --git a/package.json b/package.json index 8527c44..963ee9e 100644 --- a/package.json +++ b/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", diff --git a/readme.md b/readme.md index 26a768f..99d499e 100644 --- a/readme.md +++ b/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 \ No newline at end of file diff --git a/system/patterns/debug b/system/patterns/debug index 4d0b1fb..9a5fc78 100644 --- a/system/patterns/debug +++ b/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{{;}} diff --git a/system/replaces.js b/system/replaces.js index 435e05a..73a503f 100644 --- a/system/replaces.js +++ b/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}}': '', '{{:}}': ': ', diff --git a/system/styles.js b/system/styles.js index d38e6bb..75f8577 100644 --- a/system/styles.js +++ b/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}}'; } }