groot-sass - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

package.json

 {
   "name": "groot-sass",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "The root of all projects",
@@ -5,0 +5,0 @@ "author": "Luke Whitehouse <[e-mail]> (http://lukewhitehouse.co.uk)",

readme.md

@@ -20,3 +20,2 @@ # Groot
 bower install --save groot
-gem install --save groot
 ```
@@ -51,4 +50,7 @@
 ```scss
-// Alter Config here
+
+// Override default config here
+
 @import "groot";
+
 // Include mixin here
@@ -59,19 +61,28 @@ ```
 
+Avaiable confirgurations can be seen by visiting the [`_variables.scss`](https://github.com/lukewhitehouse/groot/blob/master/assets/app/scss/_variables.scss) file. Here's a list for your convenience:
+
 ```scss
-// Namespace Options
-$gr-grid: "grid";             // The Grid's class namespace.
-$gr-item: "grid__item";       // Grid Item's class namespace.
-$gr-unit: "grid__item";       // Grid Unit's class namespace.
+// Core
+$gr-grid: "grid" !default;                           // Main grid container which holds all elements
+$gr-item: "grid__item" !default;                     // Individual grid item/cell/unit/whatever you want to call it.
+$gr-item-unit: "grid__item" !default;                // The class chained onto the same element as above which controls the sizing.
 
+// Modifiers
+$gr-grid-spaced: "grid--spaced" !default;           // Increase gutter size
+$gr-grid-compact: "grid--compact" !default;          // Remove all gutters
+$gr-grid-reversed: "grid--reversed" !default;        // Reverse direction of the grid. i.e. direction: rtl;
+$gr-grid-centered: "grid--centered" !default;        // Centers the entire Grid, which grid items will inherit.
+$gr-item-centered: "grid__item--centered" !default;  // Center an individual item, rather than all items.
+
 // Sizing
-$gr-gutter: 1em;              // The space between each Grid Item.
+$gr-gutter: 1em !default;                            // The size between each grid item. Can use any CSS unit of measurement.
 
-// Grid alignment
-$gr-grid-direction: inherit;  // Controls the *direction* CSS property for the Grid.
-$gr-grid-align-x: inherit;    // Controls the *text-align* property for the Grid.
+// Grid Alignment
+$gr-grid-direction: inherit !default;                // Initial direction of the $gr-grid
+$gr-grid-align-x: inherit !default;                  // Initial horizontal alignment of the $gr-grid.
 
-// Item alignment
-$gr-item-direction: inherit;  // Controls the *direction* CSS property for the Grid Item.
-$gr-item-align-x: inherit;    // Controls the *text-align* property for the Grid Item.
-$gr-item-align-y: top;        // Controls the *vertical-align* property for the Grid Item.
+// Item Alignment
+$gr-item-direction: inherit !default;                // Initial direction of the $gr-item
+$gr-item-align-x: inherit !default;                  // Initial horizontal alignment of the $gr-item
+$gr-item-align-y: top !default;                      // Initial vertical alignment of the $gr-item
 ```
@@ -81,6 +92,30 @@
 
+Here's a list of the modifier's are their default class names. You can see examples of all these by going to the [examples](https://github.com/lukewhitehouse/groot#examples) section of the README.
 
+##### `.grid--spaced`
+Add this to the containing grid and the gutters width will be doubled.
+
+##### `.grid--compact`
+Add this to the containing gird and the gutters will be removed.
+
+##### `.grid--reversed`
+Add this to the container grid to reverse direction of it.
+
+##### `.grid--centered`
+Add this to the containing grid centers it and anything within (through CSS inheritance).
+
+##### `.grid__item--centered`
+Adding this to a grid item centers only it, rather than all items.
+
+
 ## Examples
 
+An [accompanying website](http://github.com/lukewhitehouse/groot-website) has been created to demonstrate Groot's capabilities and how to correctly use it.
 
+- [Basic Usage](): How to create a basic grid without any modifications of any kind and using the system defaults.
+- [Altered Defaults](): Same as the basic usage, but with changes to the default variables.
+- [Nesting](): Gridception yo. Example grid with other grid's inside of it.
+- [Modifiers](): An example of each of the default modifiers, as [described above](https://github.com/lukewhitehouse/groot#modifiers).
+
+
 ## Credits
@@ -87,0 +122,0 @@

No alert changes

Improved metrics

Total package byte prevSize

19952

increased by32.53%

Number of package files

11

increased by57.14%

Number of lines in readme file

133

increased by35.71%

No dependency changes