Merge pull request #24 from felics/selector-variable

v1.0.0

README.md

@@ -70,6 +70,7 @@ By default, the grid is just a light wrapper around flexbox, so go nuts with fle
 ## Options:
  - `$hagrid-gutters`: Specify gutters between items. They are used like modifiers or applied to all grids (default). (see below)
  - `$hagrid-breakpoints`: Set the breakpoints. Can be used with the @bp-mixin too.
+ - `$hagrid-child-selector`: Gutters and modifiers are applied to all children of each grid-container. By default, the selector `> *` is used. If you use a consistent selector for grid-items, you can set it here.
  - `$hagrid-fallback`: If you want to add an `inline-block`-grid for older browsers, set this to true. By default, the whitespace issue is fixed the [pure](http://purecss.io)-way via letter-spacing / font-family. You have to reset item-font with `$hagrid-fallback-font`. If you want to fix the issue via 0-whitespace HTML, set `$hagrid-fallback-fontfix` to false
  - `$hagrid-fallback-warnings:` Displays warnings about modifiers / mixins that won't work on the fallback
  - `$hagrid-dry-mixins`: By default, mixins apply all properties every time they are called. This makes the output CSS more readable, but also larger. GZIP negates this. If you don't have access to gzip or want to bundle static properties for all selectors at the first mixin-call, set this to true.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "hagrid",
-  "version": "0.12.0",
+  "version": "1.0.0",
   "authors": [
     "felics <[email protected]>"
   ],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hagrid",
-  "version": "0.12.0",
+  "version": "1.0.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -16,7 +16,7 @@
   },
   "devDependencies": {
     "gulp": "^3.9.0",
-    "gulp-autoprefixer": "^2.3.1",
+    "gulp-autoprefixer": "^3.0.1",
     "gulp-jade": "^1.1.0",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^2.0.4"

src/_hagrid.scss

@@ -8,7 +8,8 @@
 // Configuration
 //////////////////////////////
 
-// * Set gutters
+// * Gutters
+// * Set gutters used in your project.
 // * do not delete default!
 //////////////////////////////
 
@@ -32,6 +33,13 @@ $hagrid-breakpoints: (
 );
 
 
+// * Gutter & Modifier Selector
+// * Margins and modifiers get applied to the grid by setting them on all children of each grid
+// * By default, the selector used is `> *`. If you use a consistent selector for grid-items, you can set hagrid to use it here
+//////////////////////////////
+
+$hagrid-child-selector: "> *";
+
 // * Fallback Grid
 // * Inline-block grid fallback if you need to support IE9 / Android 4.3-
 // * !Some modifiers won't work on the fallback grid!

src/hagrid/_core.scss

@@ -31,7 +31,6 @@
 
         @if $hagrid-fallback {
             display: inline-block;
-            vertical-align: top;
             zoom: 1;
 
             @if $hagrid-fallback-fontfix {
@@ -95,7 +94,7 @@
     display: flex;
     flex-flow: row wrap;
 
-    > * {
+    #{$hagrid-child-selector} {
         flex: 1 1 100%;
     }
 

src/hagrid/_modifiers.scss

@@ -5,7 +5,7 @@
 
 @mixin grid-modifiers($modifiers...) {
 
-
+    $gutter: hagrid-gutter-get(default);
     $is-y: false;
     $is-wrap: false;
     $is-not-spacing: true;
@@ -35,18 +35,22 @@
     }
 
     @if $is-not-spacing == true {
-        $gutter: hagrid-gutter-get(default);
         margin: {
             left: -$gutter / 2;
             right: -$gutter / 2;
         };
+    }
 
-        > * {
+    #{$hagrid-child-selector} {
+        @if $is-not-spacing == true {
             padding: {
                 left: $gutter / 2;
                 right: $gutter / 2;
             };
         }
+        @if $is-y == false and $hagrid-fallback {
+            vertical-align: top;
+        }
     }
 }
 
@@ -60,7 +64,7 @@
 
         @if $hagrid-fallback {
             text-align: right;
-            > * {
+            #{$hagrid-child-selector} {
                 text-align: left;
             }
         }
@@ -70,7 +74,7 @@
 
         @if $hagrid-fallback {
             text-align: center;
-            > * {
+            #{$hagrid-child-selector} {
                 text-align: left;
             }
         }
@@ -84,8 +88,8 @@
         align-items: flex-end;
 
         @if $hagrid-fallback {
-            > * {
-                vertical-align: bottom!important;
+            #{$hagrid-child-selector} {
+                vertical-align: bottom;
             }
         }
 
@@ -94,8 +98,8 @@
         align-items: center;
 
         @if $hagrid-fallback {
-            > * {
-                vertical-align: middle!important;
+            #{$hagrid-child-selector} {
+                vertical-align: middle;
             }
         }
 
@@ -126,7 +130,7 @@
     ///////////////////////////////
 
     @elseif $modifier == auto {
-        > * {
+        #{$hagrid-child-selector} {
             flex: 1 1 auto;
         }
 
@@ -142,7 +146,7 @@
 
         @if $hagrid-fallback {
             direction: rtl;
-            > * {
+            #{$hagrid-child-selector} {
                 direction: ltr;
                 text-align: left;
             }
@@ -173,7 +177,7 @@
                 right: -$gutter / 2;
             };
 
-            > * {
+            #{$hagrid-child-selector} {
                 padding: {
                     left: $gutter / 2;
                     right: $gutter / 2;