added intro

README.md

@@ -1,7 +1,7 @@
 <p align="center">
   <img src="./assets/images/beegrid_icon_teal.png" width=80 height=80 />
   <h1>Beegrid</h1>
-  A mini CSS microframework to build various types of grids thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes to organize your content.
+  A microframework based on CSS Grid Layout to build various types of grids thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes to organize your content.
 </p>
 
 ## Table of contents

_config.yml

@@ -33,7 +33,7 @@ exclude:
 
 # Social
 title:              BeeGrid
-description:        "A mini CSS microframework to build various types of grids thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes to organize your content."
+description:        "A microframework based on CSS Grid Layout to build various types of grids thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes to organize your content."
 twitter:            beegrid
 authors:            "Davide D'Antonio"
 

docs/1.0/introduction.md

@@ -1,14 +1,28 @@
 ---
 layout: docs
 title: Introduction
-description: Beegrid is a mini CSS microframework to build various types of grids thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes to organize your content easily.
+description: A microframework based on CSS Grid Layout specs to build various types of grids thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes to organize your content.
 redirect_from:
   - /docs/
   - /docs/1.0/
   - /docs/1.0/introduction/
   - /docs/introduction/
 ---
 
+# Before you start
+
+## What is CSS Grid Layout
+
+[CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) is a CSS layout method designed for the two-dimensional layout of items on a webpage. This method offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
+
+## Status of the specs and browser support
+
+Chrome, Firefox and Safari shipped grid support in March 2017. IE10, 11 and Edge 15 and lower support an older, prefixed spec. In October 2017 Edge will update to the new specification to match other implementations. See [Can I Use](http://caniuse.com/#feat=css-grid) to see supported browsers.
+
+## Differences with Flexbox
+
+The main difference is that Flexbox is for one-dimensional layouts while Grid is for two-dimensional layouts.
+
 # Quick start
 
 If you want quickly start to build awesome grids? Download a {{ site-title }} release. If you want to use a package manager or source files, please go to <a href="{{ site.base_url }}/docs/download/">Download page</a>.
@@ -49,4 +63,4 @@ To ensure proper rendering and touch zooming for all devices, add the responsive
 
 {% highlight html %}
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-{% endhighlight %}
+{% endhighlight %}

scss/docs/_variables.scss

@@ -80,7 +80,7 @@ $link-hover-color: $grey-800 !default;
 $link-decoration: none !default;
 $link-hover-decoration: underline !default;
 
-$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $table-cell-padding:          .75rem !default;
 $table-cell-padding-sm:       .3rem !default;