grids_lite 0.1.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 73006503bc8b43760f9297347e08de120eb4681e
-  data.tar.gz: 48598bf7dde8a303361c6c6a37f6b0703f48fbe6
+  metadata.gz: 2ad28decfbe2f2549bc2aeae15a3e3dc40bb89ef
+  data.tar.gz: b04cca7c15981bfaf43e4f31cf2116651a358e77
 SHA512:
-  metadata.gz: 163815d110ab22d63818612aa0f95ffada29e2d794cff94c4a22fa989deb26fca09b84afc785b3db8ed6416873d7fb2bfea45397dcb7adfb0acb0121e2cbd639
-  data.tar.gz: 3c7deed3bd79c9e20d0e71eb58a485e588143aa5808c39521705bfa8ea0dded8d947e2382372f33bae5f0a12355c632c77aa36c3ebe3df92ff9e67daec7ef107
+  metadata.gz: 8e83ac444514efcc25da1c59f23bac3c459c4b61384020c82ded2782e54939a990888a515fc7bba34a21fb132d9d7b9766a7997d9c8194d2567f22dd136995e6
+  data.tar.gz: 41bab0d8a2cb3541f4b364d827b3f1ff2410416268b33c804476067d261a00fd408cefe91831b60aa84eb291e9a00bc9038c683419f36fc2083c5b2ed14ccce9

data/README.md

@@ -1,13 +1,13 @@
 # GridsLite
 
-A responsive grid system doesn't have to be complicated or full of unused styles. GridsLite.css is a lightweight and simple solution to responsive grids where you include the columns that you need and leave out the ones you don't. Supports gutters for columns too!
+A responsive grid system doesn't have to be complicated or full of unused styles. GridsLite is a lightweight and simple solution to responsive grids where you include the columns that you need and leave out the ones you don't. Also supports gutters for columns.
 
 ## Installation
 
 Add this line to your application's Gemfile:
 
 ```ruby
-gem 'grids_lite'
+gem 'grids_lite', '~> 1.0.0'
 ```
 
 And then execute:
@@ -38,32 +38,74 @@ Pick and choose which column stylesheets to include in your asset pipeline. **ba
 
 ## Usage
 
-example 1
-```
-.col-1-1.col-1-2-med.col-2-8-lrg
-  %div{style: "font-size: 20px"}
-    = "100% wide at mobile width, 50% wide at tablet width, 25% wide at desktop width and above"
+Wrap your ```col-``` classes in a ```columns``` class. If you are using text inside your ```col-``` classes you will also need to set a font-size for the text somewhere inside for the text to appear.
 
-.col-1-1.col-1-2-med.col-6-8-lrg
-  %div{style: "font-size: 20px"}
-    = "100% wide at mobile width, 50% wide at tablet width, 75% wide at desktop width and above"
+Example 1
 ```
-
-example 2
+<div class="columns">
+  <div class="col-1-1 col-1-2-med col-2-8-lrg">
+    <div style="font-size: 20px">
+      100% wide at mobile width, 50% wide at tablet width, 25% wide at desktop width and above
+    </div>
+  </div>
+
+  <div class="col-1-1 col-1-2-med col-6-8-lrg">
+    <div style="font-size: 20px">
+      100% wide at mobile width, 50% wide at tablet width, 75% wide at desktop width and above
+    </div>
+  </div>
+</div>
+````
+
+Example 2
+```
+<div class="columns">
+  <div class="col-1-1 col-1-5-med">
+    <div style="font-size: 20px">
+      100% wide at mobile width, 20% wide at tablet width and above
+    </div>
+  </div>
+
+  <div class="col-1-1 col-4-5-med">
+    <div style="font-size: 20px">
+      100% wide at mobile width, 80% wide at tablet width and above
+    </div>
+  </div>
+</div>
 ```
-.col-1-1.col-1-5-med
-  %div{style: "font-size: 20px"}
-    = "100% wide at mobile width, 20% wide at tablet width and above"
 
-.col-1-1.col-4-5-med
-  %div{style: "font-size: 20px"}
-    = "100% wide at mobile width, 80% wide at tablet width and above"
+Example using gutters
+```
+<div class="columns gutters">
+  <div class="col-1-1">
+    <div style="font-size: 20px">
+      100% wide at mobile width and above
+    </div>
+  </div>
+
+  <div class="col-1-1">
+    <div style="font-size: 20px">
+      100% wide at mobile width and above
+    </div>
+  </div>
+</div>
 ```
 
 ## Gotchas
 
-GridsLite uses ```display: inline-block``` to arrange the columns. To account for the default horizontal space between inline-block elements, GridsLite sets ```font-size: 0``` on the body tag. This means that **you MUST declare font-sizes for your elements** with classes or inline or however you wish.
+GridsLite uses ```display: inline-block``` to arrange the columns. To account for the default horizontal space between inline-block elements, GridsLite sets ```font-size: 0``` using the ```columns``` class. This means that **you MUST declare font-sizes for your text elements** with classes, id's, inline or however you wish.
+
+When using ```gutters```, be aware that your div has side margin applied to it and the ```col-``` elements have side padding applied to them. It would be advisable when using ```gutters``` to not use any side margin or side padding directly on those divs and instead use it above or below them in the dom hierarchy so no conflicts occur.
+
 
+## Future releases
+To include: Customizing media query breakpoints and gutter distances.
+<br>
+**Current settings**
+- tablet width starting at 768px
+- desktop width starting at 1024px
+- gutters distances set to 20px
+- multiple nesting layers for gutters without extra padding
 
 ## Contributing
 

data/app/assets/stylesheets/grids_lite/base.css

@@ -1,6 +1,3 @@
-body {
-  font-size: 0;
-}
 .gutters {
   margin: 0 -10px;
 }
@@ -15,3 +12,6 @@ body {
 [class*=col-] {
   display: inline-block;
 }
+.columns {
+  font-size: 0;
+}

data/lib/grids_lite/version.rb

@@ -1,3 +1,3 @@
 module GridsLite
-  VERSION = "0.1.0"
+  VERSION = "1.0.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: grids_lite
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 1.0.0
 platform: ruby
 authors:
 - Miles Stanfield
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-01-09 00:00:00.000000000 Z
+date: 2016-01-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails