New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
groot-sass - npm Package Compare versions
Comparing version 0.0.4 to 0.0.5
| { | ||
| "name": "groot-sass", | ||
| "version": "0.0.5", | ||
| "description": "The root of all projects", | ||
@@ -4,0 +5,0 @@ "keywords": [ |
| { | ||
| "name": "groot-sass", | ||
| "version": "0.0.4", | ||
| "version": "0.0.5", | ||
| "description": "The root of all projects", | ||
@@ -5,0 +5,0 @@ "author": "Luke Whitehouse <luke@lukewhitehouse.co.uk> (http://lukewhitehouse.co.uk)", |
| # Groot | ||
| The root of all projects. | ||
| Groot is a class-based CSS Grid system derived from the amazing work Nicolas Gallagher produced with [Griddle](https://github.com/necolas/griddle). I've been using Griddle for many years professionally now and whilst I love the overall package, its not perfect and could do with a upgrade. I've started Groot with the intention of being that. | ||
| Groot is a class-based declarative CSS Grid system, originally derived from the amazing work Nicolas Gallagher produced with [Griddle](https://github.com/necolas/griddle). I've been using Griddle for many years professionally and whilst I love the overall package, its not perfect and could do with a upgrade. I've started Groot with the intention of being that. | ||
| Groot prides itself on the following: | ||
| - Flexibility: Complete control to fit it into your own workflow or framework. | ||
| - Modular: Defaults to a BEM structured Grid System and keeps the [Single Responsibility Principle](https://en.wikipedia.org/wiki/Single_responsibility_principle) in mind at all times. | ||
| - Configurable: Ability to change any class names, gutter sizes or alignment declarations to your hearts desire. | ||
| - Lightweight: With its opt-in columns, you're looking at around 5kb minified and gzipped | ||
| - **Flexibility**: Complete control to fit it into your own workflow or framework. | ||
| - **Modular**: Defaults to a BEM structured Grid System and keeps the [Single Responsibility Principle](https://en.wikipedia.org/wiki/Single_responsibility_principle) in mind at all times. | ||
| - **Configurable**: Ability to change any class names, gutter sizes or alignment declarations to your hearts desire. Prefer SMACSS or <insert-methodogoly-here>? Don't sweat it. | ||
| - **Lightweight**: With its opt-in columns, don't worry about bloated code, Groot will only create the code you need for your project. You're looking at around 4KB minified and gzipped | ||
| - **Declarative**: Opt-in, breakpoint specific classes for column sizings mean you're in control. Gone are the days of all sections/page conforming to the same Mobile/Tablet/Desktop sizes. | ||
@@ -18,4 +19,4 @@ ## Installation | ||
| ```sh | ||
| npm install --save-dev groot | ||
| bower install --save groot | ||
| npm install --save-dev groot-sass | ||
| bower install --save groot-sass | ||
| ``` | ||
@@ -27,6 +28,4 @@ | ||
| If you've used [Griddle](https://github.com/necolas/griddle) before, you'll see that the syntax is very similar. If you've not used it before, don't fear. Groot is pretty easy to get to grips with. | ||
| Groot is pretty easy to get to grips with. Once you've imported to the Groot system, use the `groot` mixin provided to build out the grids you need. | ||
| Once you've imported to the Groot system, use the `groot` mixin provided to build out the grids you need. | ||
| ```scss | ||
@@ -42,4 +41,4 @@ @import "groot"; | ||
| ## Configuration | ||
| ## Configuration | ||
| While Groot may have defaults for the configuration, you still have a lot of freedom in how you'd like to setup your version. | ||
@@ -71,3 +70,3 @@ | ||
| // Modifiers | ||
| $gr-grid-spaced: "grid--spaced" !default; // Increase gutter size | ||
| $gr-grid-spaced: "grid--spaced" !default; // Increase gutter size | ||
| $gr-grid-compact: "grid--compact" !default; // Remove all gutters | ||
@@ -115,11 +114,36 @@ $gr-grid-reversed: "grid--reversed" !default; // Reverse direction of the grid. i.e. direction: rtl; | ||
| - [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). | ||
| - [Basic Usage](http://github.com/lukewhitehouse/groot-website/blob/master/examples/basic.html): How to create a basic grid without any modifications of any kind and using the system defaults. | ||
| - [Nesting](http://github.com/lukewhitehouse/groot-website/blob/master/examples/nested.html): Gridception yo. Example grid with other grid's inside of it. | ||
| - [Modifiers](http://github.com/lukewhitehouse/groot-website/blob/master/examples/modifiers.html): An example of each of the default modifiers, as [described above](https://github.com/lukewhitehouse/groot#modifiers). | ||
| - [Reversed](http://github.com/lukewhitehouse/groot-website/blob/master/examples/reversed.html): An example of each of the default modifiers, as [described above](https://github.com/lukewhitehouse/groot#modifiers). | ||
| - [IE8](http://github.com/lukewhitehouse/groot-website/blob/master/examples/ie8.html): An example of Groot without media query classes (for IE8 and below - read below for more information) | ||
| ## Compatability | ||
| Groot has been tried and tested within the latest browsers, but also works great for those older versions of IE that you may still need to support (I feel your struggle). Here's a full list of the browser/device combinations that Groot has been verified in. If you feel theres a problem with any of these, please [open an issue](https://github.com/lukewhitehouse/groot/issues) and we'll try to resolve it together. | ||
| Mac/Windows: | ||
| - Chrome | ||
| - Firefox | ||
| - Safari | ||
| - Opera | ||
| - Edge | ||
| - IE8+ !! | ||
| Mobile: | ||
| - iOS7+ | ||
| - Android 4.3+ | ||
| - Windows Phone | ||
| > !! Whilst Groot does support IE8, there are caveats. IE8 doesn't support media queries and therefore you'll need to make sure you use something like [respond.js](https://github.com/scottjehl/Respond#respondjs). However, I'd recommend if you need IE8 support that you give [Jake Archibold's Media Query Mixin](http://jakearchibald.github.io/sass-ie/) a read. Its great! Here's an example of [Groot working in IE8](http://github.com/lukewhitehouse/groot-website/blob/master/examples/ie8.html) without any media queries. | ||
| ## Roadmap | ||
| Here's a quick roadmap on where I'd like to take Groot in the coming months. | ||
| - Companion website: To better show Groot off and make it look like I made something. | ||
| - Screencasts: Showing detailed examples on how you can use Groot in your projects. | ||
| - LESS/Stylus support: Because not everyone uses Sass, right? | ||
| ## Credits | ||
| Groot has been produced primarily by Luke Whitehouse, however, special thanks have to be given to the following: | ||
| With any project, theres always special thanks and recognition to be given: | ||
| - [Griddle](https://github.com/necolas/griddle): The inspriation for Groot. | ||
| - [Mixd](http://mixd.co.uk): Who introduced me to Griddle in the first place. If – like us – you work with WordPress then you may be interested in our Open Source project called [wp-deploy](https://github.com/Mixd/wp-deploy); a capistrano-powered deployment tool for WordPress. | ||
@@ -126,0 +150,0 @@ |
Sorry, the diff of this file is not supported yet
No alert changes
Improved metrics
- Total package byte prevSize
- increased by11.19%
22185
- Lines of code
- increased by0.67%
151
- Number of lines in readme file
- increased by18.05%
157
No dependency changes