updates documentation

README.md

@@ -22,7 +22,7 @@ npm install -D @morsecodemedia/containers.css
 In the `nuxt.config.js` file
 ```js
 css: [
-  '@morsecodemedia/containers.css/dist/css/containers.css'
+  '@morsecodemedia/containers.css'
 ]
 ```
 
@@ -34,42 +34,53 @@ css: [
 * Safari 8+
 * Opera
 
-## Containers Breakdown
-### 0px-767px
+## Containers
+Containers are the max-width areas in which content blocks can take up. Currently there are three (1-3), 1 being the widest and 3 being the most narrow.
+### A Visual Representation
+https://morsecodemedia.github.io/containers.css/
+
+### Containers Breakdown
+
+#### 0px-767px
 `.container1` 100% - 30px (15px on either side)
 
 `.container2` 100% - 30px (15px on either side)
 
 `.container3` 100% - 30px (15px on either side)
 
-### 768px-991px
+#### 768px-991px
 `.container1` 100% - 50px (25px on either side)
 
 `.container2` 100% - 70px (35px on either side)
 
 `.container3` 100% - 110px (55px on either side)
 
-### 992px-1199px
+#### 992px-1199px
 `.container1` 100% - 70px (35px on either side)
 
 `.container2` 100% - 200px (100px on either side)
 
 `.container3` 100% - 400px (200px on either side)
 
-### 1200px-1399px
+#### 1200px-1399px
 `.container1` 100% - 100px (50px on either side)
 
 `.container2` 100% - 300px (150px on either side)
 
 `.container3` 100% - 500px (250px on either side)
 
-### 1400px+
+#### 1400px+
 `.container1` max-width: 1300px
 
 `.container2` max-width: 1000px
 
 `.container3` max-width: 700px
 
+## Gaps
+Gaps are vertical spacing used between columns to keep a consistent vertical rhythm among sections
+
+### Gaps Breakdown
+
 ## Content Blocks
 `.half` `.half`
 
@@ -88,6 +99,3 @@ css: [
 `.quarter` `.three-quarter`
 
 `.three-quarter` `.quarter`
-
-## TODO
-* Write up better documentation.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morsecodemedia/containers.css",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "A starting point for containers and gaps when you don't want to use Bootstrap and you can't go evergreen with CSS Grid.",
   "main": "dist/css/containers.css",
   "style": "dist/css/containers.css",