postcss-structure - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

index.js

@@ -13,50 +13,124 @@ var postcss = require('postcss');
         align: 'center',
-        type: 'float'
+        display: 'flex'
     };
     var r = postcss.root();
 
-    var createGrid = function (a, b, blocWidth, columnCount) {
-        for (var col = 1; col <= b; col++) {
-            var i1 = false;
-            if (col >= a) {
-                i1 = a;
-            } else if (a === b) {
-                i1 = col;
+    var createBlocs = function (a, b, media) {
+
+        var blocWidth = {},
+            blocWidthValue, idx;
+        for (idx = 1; idx <= a; idx++) {
+            blocWidth[idx] = postcss.rule();
+            blocWidthValue = opts.width * idx - opts.gutter;
+            if (opts.display === 'flex') {
+                blocWidth[idx].append({
+                    prop: 'flex',
+                    value: '0 1 ' + blocWidthValue + 'rem'
+                });
+            } else if (opts.display === 'float') {
+                blocWidth[idx].append({
+                    prop: 'width',
+                    value: blocWidthValue + 'rem'
+                });
             }
-            if (i1) {
-                blocWidth[i1].selector = blocWidth[i1].selector ?
-                    blocWidth[i1].selector + ', .bloc-' + b + '-' + col :
-                    '.bloc-' + b + '-' + col;
-                columnCount[i1].selector = columnCount[i1].selector ?
-                    columnCount[i1].selector + ', .columns-' + b + '-' + col :
-                    '.columns-' + b + '-' + col;
+        }
+
+        for (b = 1; b <= a; b++) {
+            for (var col = 1; col <= b; col++) {
+                var i1 = false;
+                if (col >= a) {
+                    i1 = a;
+                } else if (a === b) {
+                    i1 = col;
+                }
+                if (i1) {
+                    blocWidth[i1].selector = blocWidth[i1].selector ?
+                        blocWidth[i1].selector + ', .bloc-' + b + '-' + col :
+                        '.bloc-' + b + '-' + col;
+                }
+
+                if (col > 1 && col < opts.max) {
+                    for (var off = 1; off <= opts.max - col; off++) {
+                        var i2 = false;
+                        if (col + off <= a && a === b) {
+                            i2 = col;
+                        } else if (col + off >= a && a - off >= 1) {
+                            i2 = a - off;
+                        } else if (a === b) {
+                            i2 = 1;
+                        }
+                        if (i2) {
+                            blocWidth[i2].selector = blocWidth[i2].selector ?
+                                blocWidth[i2].selector +
+                                ', .bloc-' + b + '-' + col + '-' + off :
+                                '.bloc-' + b + '-' + col + '-' + off;
+                        }
+                    }
+                }
             }
+        }
+        for (idx = 1; idx <= a; idx++) {
+            if (blocWidth[idx].selector) {
+                media.append(blocWidth[idx]);
+            }
+        }
+    };
 
-            if (col > 1 && col < opts.max) {
-                for (var off = 1; off <= opts.max - col; off++) {
-                    var i2 = false;
-                    if (col + off <= a && a === b) {
-                        i2 = col;
-                    } else if (col + off >= a && a - off >= 1) {
-                        i2 = a - off;
-                    } else if (a === b) {
-                        i2 = 1;
+    var createColumns = function (a, b, media) {
+
+        var columnCount = {},
+            idx;
+        for (idx = 1; idx <= a; idx++) {
+            columnCount[idx] = postcss.rule();
+            columnCount[idx].append({
+                prop: 'column-count',
+                value: idx.toString()
+            });
+        }
+
+        for (b = 1; b <= a; b++) {
+            for (var col = 1; col <= opts.max; col++) {
+                var i1 = false;
+                if (col >= a) {
+                    i1 = a;
+                } else if (a === b) {
+                    i1 = col;
+                }
+                if (i1) {
+                    columnCount[i1].selector = columnCount[i1].selector ?
+                        columnCount[i1].selector +
+                        ', .columns-' + b + '-' + col :
+                        '.columns-' + b + '-' + col;
+                }
+
+                if (col > 1 && col < opts.max) {
+                    for (var off = 1; off <= opts.max - col; off++) {
+                        var i2 = false;
+                        if (col + off <= a && a === b) {
+                            i2 = col;
+                        } else if (col + off >= a && a - off >= 1) {
+                            i2 = a - off;
+                        } else if (a === b) {
+                            i2 = 1;
+                        }
+                        if (i2) {
+                            columnCount[i2].selector =
+                                columnCount[i2].selector ?
+                                columnCount[i2].selector +
+                                ', .columns-' + b + '-' + col + '-' + off :
+                                '.columns-' + b + '-' + col + '-' + off;
+                        }
                     }
-                    if (i2) {
-                        blocWidth[i2].selector = blocWidth[i2].selector ?
-                            blocWidth[i2].selector +
-                            ', .bloc-' + b + '-' + col + '-' + off :
-                            '.bloc-' + b + '-' + col + '-' + off;
-                        columnCount[i2].selector = columnCount[i2].selector ?
-                            columnCount[i2].selector +
-                            ', .columns-' + b + '-' + col + '-' + off :
-                            '.columns-' + b + '-' + col + '-' + off;
-                    }
                 }
             }
         }
+        for (idx = 1; idx <= a; idx++) {
+            if (columnCount[idx].selector) {
+                media.append(columnCount[idx]);
+            }
+        }
     };
 
     var createMediaQuerie = function (a) {
-        var b, col, off, idx;
+        var b, col, off;
         var containerWidth = a * opts.width - opts.gutter + 2 * opts.padding;
@@ -79,49 +153,32 @@ var totalWidth = a * opts.width - opts.gutter + 4 * opts.padding;
         var floatRight = postcss.rule({ selector: '.right-' + a });
-        floatRight.append({ prop: 'float', value: 'right' });
+        if (opts.display === 'flex') {
+            floatRight.append({ prop: 'margin-left', value: 'auto' });
+        } else if (opts.display === 'float') {
+            floatRight.append({ prop: 'float', value: 'right' });
+        }
         media.append(floatRight);
 
-        var blocFloat = postcss.rule();
-        blocFloat.append({ prop: 'float', value: 'left' });
-        blocFloat.append({ prop: 'clear', value: 'none' });
-        for (col = a; col > 0; col--) {
-            blocFloat.selector = blocFloat.selector ?
-                blocFloat.selector + ', .bloc-' + a + '-' + col :
+
+        if (opts.display === 'float') {
+            var blocFloat = postcss.rule();
+            blocFloat.append({ prop: 'float', value: 'left' });
+            blocFloat.append({ prop: 'clear', value: 'none' });
+            for (col = a; col > 0; col--) {
+                blocFloat.selector = blocFloat.selector ?
+                    blocFloat.selector + ', .bloc-' + a + '-' + col :
                     '.bloc-' + a + '-' + col;
 
-            if (col > 1 && col < opts.max) {
-                for (off = 1; off <= opts.max - col; off++) {
-                    blocFloat.selector = blocFloat.selector +
-                        ', .bloc-' + a + '-' + col + '-' + off;
+                if (col > 1 && col < opts.max) {
+                    for (off = 1; off <= opts.max - col; off++) {
+                        blocFloat.selector = blocFloat.selector +
+                            ', .bloc-' + a + '-' + col + '-' + off;
+                    }
                 }
             }
+            media.append(blocFloat);
         }
-        media.append(blocFloat);
 
-        var blocWidth = {},
-            columnCount = {},
-            blocWidthValue;
-        for (idx = 1; idx <= a; idx++) {
-            blocWidth[idx] = postcss.rule();
-            blocWidthValue = opts.width * idx - opts.gutter;
-            blocWidth[idx].append({
-                prop: 'width',
-                value: blocWidthValue + 'rem'
-            });
-            columnCount[idx] = postcss.rule();
-            columnCount[idx].append({
-                prop: 'column-count',
-                value: idx.toString()
-            });
-        }
+        createColumns(a, b, media);
+        createBlocs(a, b, media);
 
-        for (b = 1; b <= a; b++) {
-            createGrid(a, b, blocWidth, columnCount);
-        }
-        for (idx = 1; idx <= a; idx++) {
-            if (blocWidth[idx].selector) {
-                media.append(blocWidth[idx]);
-                media.append(columnCount[idx]);
-            }
-        }
-
         r.append(media);
@@ -132,9 +189,7 @@ };
         css.walkAtRules('structure', function (rule) {
-            var thumbQty = 1;
-
             rule.each(function (decl) {
                 if (decl.prop in opts) {
-                    opts[decl.prop] = parseFloat(decl.value) ?
-                        parseFloat(decl.value) :
-                        decl.value;
+                    opts[decl.prop] = Number(decl.value) ?
+                        Number(decl.value) :
+                        decl.value.substring(1, decl.value.length - 1);
                 }
@@ -152,4 +207,6 @@ });
             });
-            container.append({ prop: 'margin-left', value: 'auto' });
-            container.append({ prop: 'margin-right', value: 'auto' });
+            if (opts.align === 'center') {
+                container.append({ prop: 'margin-left', value: 'auto' });
+                container.append({ prop: 'margin-right', value: 'auto' });
+            }
             r.append(container);
@@ -163,2 +220,8 @@
             });
+            if (opts.display === 'flex') {
+                grid.append({ prop: 'display', value: 'flex' });
+                grid.append({ prop: 'flex-flow', value: 'row wrap' });
+                grid.append({ prop: 'align-items', value: 'flex-start' });
+                grid.append({ prop: 'align-content', value: 'flex-start' });
+            }
             r.append(grid);
@@ -175,43 +238,87 @@
             bloc.append({ prop: 'margin-bottom', value: opts.gutter + 'rem' });
-            bloc.append({ prop: 'clear', value: 'both' });
+            if (opts.display === 'flex') {
+                bloc.append({ prop: 'flex', value: '0 1 100%' });
+            } else if (opts.display === 'float') {
+                bloc.append({ prop: 'clear', value: 'both' });
+            }
             r.append(bloc);
 
             var blocLeft = postcss.rule({ selector: '.bloc-left' });
-            blocLeft.append({ prop: 'float', value: 'left' });
-            blocLeft.append({ prop: 'clear', value: 'none' });
+            if (opts.display === 'flex') {
+                blocLeft.append({ prop: 'flex', value: '0 1 auto' });
+            } else if (opts.display === 'float') {
+                blocLeft.append({ prop: 'float', value: 'left' });
+                blocLeft.append({ prop: 'clear', value: 'none' });
+                blocLeft.selector +=
+                    ', .bloc-one-half, .bloc-one-third' +
+                    ', .bloc-two-third, .bloc-thumb';
+            }
             r.append(blocLeft);
 
-            blocLeft.selector +=
-            ', .bloc-1/2, .bloc-1/3, .bloc-2/3, .bloc-thumb';
-
-            var blocOneHalf = postcss.rule({ selector: '.bloc-1/2' });
+            var blocOneHalf = postcss.rule({ selector: '.bloc-one-half' });
             var blocOneHalfValue = opts.width / 2 - opts.gutter;
-            blocOneHalf.append({
-                prop: 'width',
-                value: blocOneHalfValue + 'rem'
-            });
+            if (opts.display === 'flex') {
+                blocOneHalf.append({
+                    prop: 'flex',
+                    value: '0 1 ' + blocOneHalfValue + 'rem'
+                });
+            } else if (opts.display === 'float') {
+                blocOneHalf.append({
+                    prop: 'width',
+                    value: blocOneHalfValue + 'rem'
+                });
+            }
             r.append(blocOneHalf);
 
-            var blocOneThird = postcss.rule({ selector: '.bloc-1/3' });
+            var blocOneThird = postcss.rule({ selector: '.bloc-one-third' });
             var blocOneThirdValue = opts.width / 3 - opts.gutter;
-            blocOneThird.append({
-                prop: 'width',
-                value: blocOneThirdValue + 'rem'
-            });
+            if (opts.display === 'flex') {
+                blocOneThird.append({
+                    prop: 'flex',
+                    value: '0 1 ' + blocOneThirdValue + 'rem'
+                });
+            } else if (opts.display === 'float') {
+                blocOneThird.append({
+                    prop: 'width',
+                    value: blocOneHalfValue + 'rem'
+                });
+            }
             r.append(blocOneThird);
 
-            var blocTwoThird = postcss.rule({ selector: '.bloc-2/3' });
+            var blocTwoThird = postcss.rule({ selector: '.bloc-two-third' });
             var blocTwoThirdValue = opts.width * 2 / 3 - opts.gutter;
-            blocTwoThird.append({
-                prop: 'width',
-                value: blocTwoThirdValue + 'rem'
-            });
+            if (opts.display === 'flex') {
+                blocTwoThird.append({
+                    prop: 'flex',
+                    value: '0 1 ' + blocTwoThirdValue + 'rem'
+                });
+            } else if (opts.display === 'float') {
+                blocTwoThird.append({
+                    prop: 'width',
+                    value: blocTwoThirdValue + 'rem'
+                });
+            }
             r.append(blocTwoThird);
 
+            var thumbQty = 1;
             var blocThumb = postcss.rule({ selector: '.bloc-thumb' });
-            while (opts.width / thumbQty - opts.gutter > opts.width) {
+            blocThumb.append({
+                prop: 'text-align',
+                value: 'center'
+            });
+            while (opts.width / thumbQty - opts.gutter > opts.thumb) {
                 thumbQty++;
             }
             var blocThumbValue = opts.width / (thumbQty - 1) - opts.gutter;
-            blocThumb.append({ prop: 'width', value: blocThumbValue + 'rem' });
+            if (opts.display === 'flex') {
+                blocThumb.append({
+                    prop: 'flex',
+                    value: '0 1 ' + blocThumbValue + 'rem'
+                });
+            } else if (opts.display === 'float') {
+                blocThumb.append({
+                    prop: 'width',
+                    value: blocThumbValue + 'rem'
+                });
+            }
             r.append(blocThumb);
@@ -233,3 +340,4 @@
 /*
-size:    bloc
+size
+-------------------------------
 xxs:     1
@@ -251,19 +359,19 @@ xs:      2
 -----------------------------------------------------------------------------
-bloc = 1
-   xxs      1 to 7 /a      -                -                -             -
+a = 1
+b = 1       1 to 7 /a      -                -                -             -
 
-bloc = 2
-  xxs       (1)            2 to 7 /a        -                -             -
-  xs        1 /b           2 to 7 /a        -                -             -
+a = 2
+b = 1       (1)            2 to 7 /a        -                -             -
+b = 2       1 /b           2 to 7 /a        -                -             -
 
-bloc = 3
-  xxs       (1)            (2)              3 to 7 /a        -             -
-  xs        (1)            (2)              3 to 7 /a        -             -
-  s         1 /b           2 /b             3 to 7 /a        -             -
+a = 3
+b = 1       (1)            (2)              3 to 7 /a        -             -
+b = 2       (1)            (2)              3 to 7 /a        -             -
+b = 3       1 /b           2 /b             3 to 7 /a        -             -
 
-bloc = 4
- xxs        (1)            (2)              (3)              4 to 7 /a     -
- xs         (1)            (2)              (3)              4 to 7 /a     -
- s          (1)            (2)              (3)              4 to 7 /a     -
- m          1 /b           2 /b             3 /b             4 to 7 /a     -
+a = 4
+b = 1       (1)            (2)              (3)              4 to 7 /a     -
+b = 2       (1)            (2)              (3)              4 to 7 /a     -
+b = 3       (1)            (2)              (3)              4 to 7 /a     -
+b = 4       1 /b           2 /b             3 /b             4 to 7 /a     -
 
@@ -278,3 +386,3 @@ etc.
 -----------------------------------------------------------------------------
-bloc = 1
+a = 1
             2-1 > 2-6      -                -                -             -
@@ -286,3 +394,3 @@ 3-1 > 3-5      -                -                -             -
 
-bloc = 2
+a = 2
             (2-1 > 2-6)    -                -                -             -
@@ -294,3 +402,3 @@ (3-1 > 3-5)    -                -                -             -
 
-bloc = 3
+a = 3
             (2-2 > 2-6)    2-1              -                -             -
@@ -303,3 +411,3 @@ (3-2 > 3-5)    3-1              -                -             -
 
-bloc = 4
+a = 4
             (2-3 > 2-6)    2-2 (2-1)        -                -             -
@@ -312,3 +420,3 @@ (3-3 > 3-5)    3-2              3-1              -             -
 
-bloc = 5
+a = 5
             (2-4 > 2-6)    2-3 (2-1 > 2-2)  -                -             -
@@ -321,3 +429,3 @@ (3-4 > 3-5)    3-3              3-2 (3-1)        -             -
 
-bloc = 6
+a = 6
             (2-5 > 2-6)    2-4 (2-1 > 2-3)  -                -             -
@@ -324,0 +432,0 @@ (3-5)          3-4              3-3 (3-2 > 3-1)  -             -

package.json

 {
   "name": "postcss-structure",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "PostCSS plugin that create a grid based on a fixed block width",
@@ -5,0 +5,0 @@ "keywords": [

README.md

 # PostCSS Structure [![Build Status][ci-img]][ci]
 
-[PostCSS] plugin create a grid based on a fixed block width.
+[PostCSS] plugin to create grids based on a fixed block width.
 
@@ -9,11 +9,14 @@ [PostCSS]: https://github.com/postcss/postcss
 
-```css
-.foo {
-    /* Input example */
-}
-```
+PostCSS Structure creates a grid based on the width of a "bloc". This bloc has the same width whatever the size of the screen is. Media-queries are created depending the number of bloc that fits in the page. 
 
 ```css
-.foo {
-  /* Output example */
+@structure {
+  width:    18;     
+  gutter:   1.5;   
+  padding:  1.5;  
+  max:      2;        
+  min:      8;        
+  thumb:    3;         
+  display:  flex;
+  align:    center;    
 }
@@ -20,0 +23,0 @@ ```

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

19356

increased by29.09%

Lines of code

380

increased by37.68%

Number of lines in readme file

31

increased by10.71%

No dependency changes