postcss-structure - npm Package Compare versions

Comparing version 0.5.4 to 0.6.0

lib/index.js

@@ -45,5 +45,7 @@ 'use strict';
     css.walkAtRules('structure', function (rule) {
-      rule.each(function (decl) {
-        if (decl.prop in opts) {
-          opts[decl.prop] = isNaN(decl.value) ? decl.value.substring(1, decl.value.length - 1) : Number(decl.value);
+      rule.walkDecls(function (decl) {
+        if (decl.prop.match(/^unit/) || decl.prop.match(/^gutter/) || decl.prop.match(/^padding/) || decl.prop.match(/^max/) || decl.prop.match(/^min/)) {
+          opts[decl.prop] = parseFloat(decl.value, 10);
+        } else if (decl.prop.match(/^align/) || decl.prop.match(/^display/)) {
+          opts[decl.prop] = decl.value;
         }
@@ -81,3 +83,2 @@ });
           var _i2 = decl.value.replace('/', '-').split('-');
-
           e.blobs[_i2[0]] = e.blobs[_i2[0]] || [];
@@ -84,0 +85,0 @@ e.blobs[_i2[0]][_i2[2]] = e.blobs[_i2[0]][_i2[2]] || [];

lib/structure.js

@@ -79,3 +79,3 @@ 'use strict';
     var queryWidth = breakpoint * opts.unit - opts.gutter + 2 * opts.padding + scrollbarsWidth;
-    var mediaQuery = _postcss2.default.atRule({ name: 'media', params: '(width > ' + queryWidth + 'rem)' });
+    var mediaQuery = _postcss2.default.atRule({ name: 'media', params: '(min-width: ' + queryWidth + 'rem)' });
 
@@ -82,0 +82,0 @@ (0, _containersQuery2.default)(opts, breakpoint, mediaQuery, e.containers);

package.json

 {
   "name": "postcss-structure",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "A PostCSS plugin to create CSS grids based on a fixed block width.",
@@ -46,2 +46,5 @@ "keywords": [
   "ava": {
+    "files": [
+      "test/tests.js"
+    ],
     "require": [
@@ -48,0 +51,0 @@ "babel-register"

README.md

@@ -11,8 +11,12 @@ # PostCSS-structure [![Build Status][ci-img]][ci]
 
-PostCSS-structure outputs a few CSS classes to make grids. 
+## Usage
 
-The idea behind PostCSS-structure is that the bloc width doesn't change depending on the screen-size. Media-queries are created depending the number of units that fit into the page. 
+Install PostCSS-structure from npm:
 
-## Usage
+```
+$ npm install postcss-structure --save-dev
+```
 
+Add PostCSS-structure to the required PostCSS plugins:
+
 ``` js
@@ -22,33 +26,194 @@ postcss([ require('postcss-structure') ])
 
-## Options and default values
+Check [PostCSS usage instructions](https://github.com/postcss/postcss#usage) to setup with Gulp, Grunt, Webpack, Npm scripts… 
 
+## Settings
+
+- [Global](#global)
+- [Container](#containers)
+- [Rows](#rows)
+- [Blocs](#blocs)
+- [Bloc fractions](#bloc-fractions)
+- [Blobs](#blobs)
+- [Columns](#columns)
+- [Show](#show)
+- [Right](#right)
+
+### Global
+
+- _unit_: width of a single column
+- _gutter_: width of the gutter
+- _padding_: padding of the main container
+- _max_: maximum number of blocs
+- _min_: minimum number of blocs
+- _align_: center or left
+- _display_: float or flex
+
+A media-query is created for each _unit_ multiple, from _min_ to _max_.
+
 ``` css
+
+/* default values */ 
+
 @structure {
-  unit:    18,       /* width of a single bloc (rem) */  
-  gutter:  1.5,      /* width of the gutter (rem) */  
-  padding: 1.5,      /* padding of the main container (rem) */  
-  max:     8,        /* maximum number of blocs */ 
-  min:     2,        /* minimum number of blocs */  
-  thumb:   3,        /* number of .bloc-thumb fitting in one bloc */ 
-  align:   'center', /* 'center' or 'left' */     
-  display: 'flex',   /* 'float' or 'flex' */
+  unit:    18rem,
+  gutter:  1.5rem,
+  padding: 1.5rem,
+  max:     8,
+  min:     2,
+  align:   center,
+  display: flex      
 }
 ```
 
-## Output example
 
-to-do
+### Containers
 
+`structure-element: container`
 
-## Markup example
+The container width is defined for each media-query.
 
-to-do
+``` css
 
+.my-container {
+  structure-element: container;
+}
 
+```
+
+Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/01.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/01.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/01.html)
+
+### Rows
+
+`structure-element: row`
+
+Rows have a negative right margin and are intended to contain either a _bloc_ or a _blob_ element.
+
+``` css
+
+.my-row {
+  structure-element: row;
+}
+
+```
+
+Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/02.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/02.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/02.html)
+
+### Blocs
+
+`structure-bloc: breakpoint-width(-offset)`
+
+Blocs have a fixed width.
+
+- _breakpoint_: defined by the number of _units_ that fit into the screen. If the screen is narrower than the _breakpoint_, the bloc takes full width.
+- _width_: width of the bloc.
+- _offset_ (optional): remaining space before the bloc can take its width. if (_width_ + _offset_) is wider than _breakpoint_, then _width_ shrinks first.
+
+``` css
+
+.my-bloc {
+  structure-bloc: 3-2;
+}
+
+.my-bloc-with-offset {
+  structure-bloc: 3-2-3;
+}
+
+```
+
+Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/03.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/03.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/03.html)
+
+Example (with offset): [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/04.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/04.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/04.html)
+
+### Bloc fractions
+
+`structure-fraction: ratio/total`
+
+- _ratio_: fraction of the total in one row.
+- _total_: aribitrary divider, relative to _unit_.
+
+``` css
+
+.my-fraction {
+  structure-fraction: 3/2;
+}
+
+```
+
+Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/05.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/05.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/05.html)
+
+### Blobs
+
+`structure-blob: breakpoint-ratio/total`
+
+Unlike blocs, blobs width will change depending on the breakpoint.
+
+- _breakpoint_: defined by the number of _units_ that fit in the screen.
+- _ratio_: fraction of the _total_.
+- _total_: aribitrary divider, relative to the _breakpoint_.
+
+``` css
+
+.my-blob {
+  structure-blob: 3-2/3;
+}
+
+```
+
+Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/06.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/06.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/06.html)
+
+### Columns
+
+`structure-columns: breakpoint-columns(-offset)`
+
+- _breakpoint_:  defined by the number of _units_ that fit into the screen. If the screen is narrower than the _breakpoint_, the element has one column.
+- _columns_: number of columns.
+- _offset_ (optional): remaining space before the columns are active. If (_columns_ + _offset_) is greater than _breakpoint_, then _columns_ shrinks first.
+
+``` css
+
+.my-columns {
+  structure-columns: 3-4;
+}
+
+.my-columns-with-offset {
+  structure-columns: 3-4-2;
+}
+
+```
+
+Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/07.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/07.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/07.html)
+
+Example (with offset): [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/08.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/08.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/08.html)
+
+### Show
+
+`structure-show: breakpoint`
+
+- _breakpoint_: the element is made visible when the screen is wider than _breakpoint_. A class has to be defined above in the CSS to make it invisible. 
+
+``` css
+.my-element {
+  structure-show: 3;
+}
+```
+
+Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/09.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/09.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/09.html)
+
+### Right
+
+`structure-right: breakpoint`
+
+- _breakpoint_: the element is pushed to the right when the screen is wider than _breakpoint_.
+
+``` css
+.my-element {
+  structure-show: 3;
+}
+```
+
+Example: [input](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/src/10.css), [output](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/dist/10.css), [markup](https://github.com/francoisromain/postcss-structure/blob/gh-pages/test/10.html)
+
 ## To do
 
-- [ ] Add markup example in README.md
-- [ ] Add Css output example in README.md
-- [ ] Add unit to declaration (p.e.: width: 18rem) 
 - [ ] Make rtl
 - [ ] write tests

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53215

increased by60.44%

Number of package files

34

increased by41.67%

Lines of code

1602

increased by119.45%

Number of lines in readme file

218

increased by311.32%

No dependency changes