grids_lite 1.0.0 → 1.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 2ad28decfbe2f2549bc2aeae15a3e3dc40bb89ef
-  data.tar.gz: b04cca7c15981bfaf43e4f31cf2116651a358e77
+  metadata.gz: 6fdc5ba2fac54e175d1466e82074058591cd430c
+  data.tar.gz: 51e01ddf7e4001226acaf65c38852b93a7edbd80
 SHA512:
-  metadata.gz: 8e83ac444514efcc25da1c59f23bac3c459c4b61384020c82ded2782e54939a990888a515fc7bba34a21fb132d9d7b9766a7997d9c8194d2567f22dd136995e6
-  data.tar.gz: 41bab0d8a2cb3541f4b364d827b3f1ff2410416268b33c804476067d261a00fd408cefe91831b60aa84eb291e9a00bc9038c683419f36fc2083c5b2ed14ccce9
+  metadata.gz: 13408a9edce5737910723c1922831d114a5824231fbf60669a7794cf0e5e4c7b4a95d59eb0a490b091391cd6236d5b869fbd5920cabf3533eb82a20d23adf842
+  data.tar.gz: 3b030031e1e164aa5b9c526edd3c2306335e83cfd79ef2fa994265c137ae902b7d09e39d51ffdfacbc82a56e2d6806bc50e173433ea62b47e9b2c60297741a87

data/README.md

@@ -7,7 +7,7 @@ A responsive grid system doesn't have to be complicated or full of unused styles
 Add this line to your application's Gemfile:
 
 ```ruby
-gem 'grids_lite', '~> 1.0.0'
+gem 'grids_lite'
 ```
 
 And then execute:
@@ -19,6 +19,7 @@ Or install it yourself as:
     $ gem install grids_lite
 
 ## Setup
+
 Pick and choose which column stylesheets to include in your asset pipeline. **base is not optional.**
 
 ```
@@ -33,6 +34,12 @@ Pick and choose which column stylesheets to include in your asset pipeline. **ba
 *= require "grids_lite/col-6"
 *= require "grids_lite/col-7"
 *= require "grids_lite/col-8"
+*= require "grids_lite/col-9"
+*= require "grids_lite/col-10"
+*= require "grids_lite/col-11"
+*= require "grids_lite/col-12"
+*= require "grids_lite/col-13"
+*= require "grids_lite/col-14"
 ```
 
 
@@ -91,21 +98,35 @@ Example using gutters
 </div>
 ```
 
-## Gotchas
+## Customize
+
+To change media query breakpoints and gutter widths run the variables generator
+```
+rails g grids_lite variables
+```
+
+Then you can change the sass variables in the generated file located at ```app/assets/stylesheets/grids_lite_variables.scss```
+
+```
+$med-width: 768px;
+$lrg-width: 1024px;
+$gutter-width: 20px;
+```
+
+
+
+## Notes
 
 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.
+When using ```gutters```, be aware a side margin is applied to that class and ```col-``` elements have side padding applied to them. It would be advisable when using ```gutters``` to not use any side margin/padding directly on those elements 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
+- Be able to nest columns within columns while using gutters and gutters not multiply on each level
+
+
 
 ## Contributing
 

data/app/assets/stylesheets/grids_lite/{base.css → base.scss}

@@ -1,5 +1,7 @@
+@import "grids_lite_variables";
+
 .gutters {
-  margin: 0 -10px;
+  margin: 0 calc(#{$gutter-width} * -0.5);
 }
 .gutters [class*=col-] {
   -webkit-box-sizing: border-box;
@@ -7,7 +9,7 @@
   -ms-box-sizing: border-box;
   -o-box-sizing: border-box;
   box-sizing: border-box;
-  padding: 0 10px;
+  padding: 0 calc(#{$gutter-width} * 0.5);
 }
 [class*=col-] {
   display: inline-block;

data/app/assets/stylesheets/grids_lite/col-10.scss

@@ -0,0 +1,97 @@
+@import "grids_lite_variables";
+@import "mixins";
+
+.col-10-10 {
+  @include percentage(10, 10);
+}
+.col-9-10 {
+  @include percentage(9, 10);
+}
+.col-8-10 {
+  @include percentage(8, 10);
+}
+.col-7-10 {
+  @include percentage(7, 10);
+}
+.col-6-10 {
+  @include percentage(6, 10);
+}
+.col-5-10 {
+  @include percentage(5, 10);
+}
+.col-4-10 {
+  @include percentage(4, 10);
+}
+.col-3-10 {
+  @include percentage(3, 10);
+}
+.col-2-10 {
+  @include percentage(2, 10);
+}
+.col-1-10 {
+  @include percentage(1, 10);
+}
+@media only screen and (min-width: $med-width) {
+  .col-10-10-med {
+    @include percentage(10, 10);
+  }
+  .col-9-10-med {
+    @include percentage(9, 10);
+  }
+  .col-8-10-med {
+    @include percentage(8, 10);
+  }
+  .col-7-10-med {
+    @include percentage(7, 10);
+  }
+  .col-6-10-med {
+    @include percentage(6, 10);
+  }
+  .col-5-10-med {
+    @include percentage(5, 10);
+  }
+  .col-4-10-med {
+    @include percentage(4, 10);
+  }
+  .col-3-10-med {
+    @include percentage(3, 10);
+  }
+  .col-2-10-med {
+    @include percentage(2, 10);
+  }
+  .col-1-10-med {
+    @include percentage(1, 10);
+  }
+}
+@media only screen and (min-width: $lrg-width) {
+  .col-10-10-lrg {
+    @include percentage(10, 10);
+  }
+  .col-9-10-lrg {
+    @include percentage(9, 10);
+  }
+  .col-8-10-lrg {
+    @include percentage(8, 10);
+  }
+  .col-7-10-lrg {
+    @include percentage(7, 10);
+  }
+  .col-6-10-lrg {
+    @include percentage(6, 10);
+  }
+  .col-5-10-lrg {
+    @include percentage(5, 10);
+  }
+  .col-4-10-lrg {
+    @include percentage(4, 10);
+  }
+  .col-3-10-lrg {
+    @include percentage(3, 10);
+  }
+  .col-2-10-lrg {
+    @include percentage(2, 10);
+  }
+  .col-1-10-lrg {
+    @include percentage(1, 10);
+  }
+}

data/app/assets/stylesheets/grids_lite/col-11.scss

@@ -0,0 +1,106 @@
+@import "grids_lite_variables";
+@import "mixins";
+
+.col-11-11 {
+  @include percentage(11, 11);
+}
+.col-10-11 {
+  @include percentage(10, 11);
+}
+.col-9-11 {
+  @include percentage(9, 11);
+}
+.col-8-11 {
+  @include percentage(8, 11);
+}
+.col-7-11 {
+  @include percentage(7, 11);
+}
+.col-6-11 {
+  @include percentage(6, 11);
+}
+.col-5-11 {
+  @include percentage(5, 11);
+}
+.col-4-11 {
+  @include percentage(4, 11);
+}
+.col-3-11 {
+  @include percentage(3, 11);
+}
+.col-2-11 {
+  @include percentage(2, 11);
+}
+.col-1-11 {
+  @include percentage(1, 11);
+}
+@media only screen and (min-width: $med-width) {
+  .col-11-11-med {
+    @include percentage(11, 11);
+  }
+  .col-10-11-med {
+    @include percentage(10, 11);
+  }
+  .col-9-11-med {
+    @include percentage(9, 11);
+  }
+  .col-8-11-med {
+    @include percentage(8, 11);
+  }
+  .col-7-11-med {
+    @include percentage(7, 11);
+  }
+  .col-6-11-med {
+    @include percentage(6, 11);
+  }
+  .col-5-11-med {
+    @include percentage(5, 11);
+  }
+  .col-4-11-med {
+    @include percentage(4, 11);
+  }
+  .col-3-11-med {
+    @include percentage(3, 11);
+  }
+  .col-2-11-med {
+    @include percentage(2, 11);
+  }
+  .col-1-11-med {
+    @include percentage(1, 11);
+  }
+}
+@media only screen and (min-width: $lrg-width) {
+  .col-11-11-lrg {
+    @include percentage(11, 11);
+  }
+  .col-10-11-lrg {
+    @include percentage(10, 11);
+  }
+  .col-9-11-lrg {
+    @include percentage(9, 11);
+  }
+  .col-8-11-lrg {
+    @include percentage(8, 11);
+  }
+  .col-7-11-lrg {
+    @include percentage(7, 11);
+  }
+  .col-6-11-lrg {
+    @include percentage(6, 11);
+  }
+  .col-5-11-lrg {
+    @include percentage(5, 11);
+  }
+  .col-4-11-lrg {
+    @include percentage(4, 11);
+  }
+  .col-3-11-lrg {
+    @include percentage(3, 11);
+  }
+  .col-2-11-lrg {
+    @include percentage(2, 11);
+  }
+  .col-1-11-lrg {
+    @include percentage(1, 11);
+  }
+}

data/app/assets/stylesheets/grids_lite/col-12.scss

@@ -0,0 +1,115 @@
+@import "grids_lite_variables";
+@import "mixins";
+
+.col-12-12 {
+  @include percentage(12, 12);
+}
+.col-11-12 {
+  @include percentage(11, 12);
+}
+.col-10-12 {
+  @include percentage(10, 12);
+}
+.col-9-12 {
+  @include percentage(9, 12);
+}
+.col-8-12 {
+  @include percentage(8, 12);
+}
+.col-7-12 {
+  @include percentage(7, 12);
+}
+.col-6-12 {
+  @include percentage(6, 12);
+}
+.col-5-12 {
+  @include percentage(5, 12);
+}
+.col-4-12 {
+  @include percentage(4, 12);
+}
+.col-3-12 {
+  @include percentage(3, 12);
+}
+.col-2-12 {
+  @include percentage(2, 12);
+}
+.col-1-12 {
+  @include percentage(1, 12);
+}
+@media only screen and (min-width: $med-width) {
+  .col-12-12-med {
+    @include percentage(12, 12);
+  }
+  .col-11-12-med {
+    @include percentage(11, 12);
+  }
+  .col-10-12-med {
+    @include percentage(10, 12);
+  }
+  .col-9-12-med {
+    @include percentage(9, 12);
+  }
+  .col-8-12-med {
+    @include percentage(8, 12);
+  }
+  .col-7-12-med {
+    @include percentage(7, 12);
+  }
+  .col-6-12-med {
+    @include percentage(6, 12);
+  }
+  .col-5-12-med {
+    @include percentage(5, 12);
+  }
+  .col-4-12-med {
+    @include percentage(4, 12);
+  }
+  .col-3-12-med {
+    @include percentage(3, 12);
+  }
+  .col-2-12-med {
+    @include percentage(2, 12);
+  }
+  .col-1-12-med {
+    @include percentage(1, 12);
+  }
+}
+@media only screen and (min-width: $lrg-width) {
+  .col-12-12-lrg {
+    @include percentage(12, 12);
+  }
+  .col-11-12-lrg {
+    @include percentage(11, 12);
+  }
+  .col-10-12-lrg {
+    @include percentage(10, 12);
+  }
+  .col-9-12-lrg {
+    @include percentage(9, 12);
+  }
+  .col-8-12-lrg {
+    @include percentage(8, 12);
+  }
+  .col-7-12-lrg {
+    @include percentage(7, 12);
+  }
+  .col-6-12-lrg {
+    @include percentage(6, 12);
+  }
+  .col-5-12-lrg {
+    @include percentage(5, 12);
+  }
+  .col-4-12-lrg {
+    @include percentage(4, 12);
+  }
+  .col-3-12-lrg {
+    @include percentage(3, 12);
+  }
+  .col-2-12-lrg {
+    @include percentage(2, 12);
+  }
+  .col-1-12-lrg {
+    @include percentage(1, 12);
+  }
+}

data/app/assets/stylesheets/grids_lite/col-13.scss

@@ -0,0 +1,124 @@
+@import "grids_lite_variables";
+@import "mixins";
+
+.col-13-13 {
+  @include percentage(13, 13);
+}
+.col-12-13 {
+  @include percentage(12, 13);
+}
+.col-11-13 {
+  @include percentage(11, 13);
+}
+.col-10-13 {
+  @include percentage(10, 13);
+}
+.col-9-13 {
+  @include percentage(9, 13);
+}
+.col-8-13 {
+  @include percentage(8, 13);
+}
+.col-7-13 {
+  @include percentage(7, 13);
+}
+.col-6-13 {
+  @include percentage(6, 13);
+}
+.col-5-13 {
+  @include percentage(5, 13);
+}
+.col-4-13 {
+  @include percentage(4, 13);
+}
+.col-3-13 {
+  @include percentage(3, 13);
+}
+.col-2-13 {
+  @include percentage(2, 13);
+}
+.col-1-13 {
+  @include percentage(1, 13);
+}
+@media only screen and (min-width: $med-width) {
+  .col-13-13-med {
+    @include percentage(13, 13);
+  }
+  .col-12-13-med {
+    @include percentage(12, 13);
+  }
+  .col-11-13-med {
+    @include percentage(11, 13);
+  }
+  .col-10-13-med {
+    @include percentage(10, 13);
+  }
+  .col-9-13-med {
+    @include percentage(9, 13);
+  }
+  .col-8-13-med {
+    @include percentage(8, 13);
+  }
+  .col-7-13-med {
+    @include percentage(7, 13);
+  }
+  .col-6-13-med {
+    @include percentage(6, 13);
+  }
+  .col-5-13-med {
+    @include percentage(5, 13);
+  }
+  .col-4-13-med {
+    @include percentage(4, 13);
+  }
+  .col-3-13-med {
+    @include percentage(3, 13);
+  }
+  .col-2-13-med {
+    @include percentage(2, 13);
+  }
+  .col-1-13-med {
+    @include percentage(1, 13);
+  }
+}
+@media only screen and (min-width: $lrg-width) {
+  .col-13-13-lrg {
+    @include percentage(13, 13);
+  }
+  .col-12-13-lrg {
+    @include percentage(12, 13);
+  }
+  .col-11-13-lrg {
+    @include percentage(11, 13);
+  }
+  .col-10-13-lrg {
+    @include percentage(10, 13);
+  }
+  .col-9-13-lrg {
+    @include percentage(9, 13);
+  }
+  .col-8-13-lrg {
+    @include percentage(8, 13);
+  }
+  .col-7-13-lrg {
+    @include percentage(7, 13);
+  }
+  .col-6-13-lrg {
+    @include percentage(6, 13);
+  }
+  .col-5-13-lrg {
+    @include percentage(5, 13);
+  }
+  .col-4-13-lrg {
+    @include percentage(4, 13);
+  }
+  .col-3-13-lrg {
+    @include percentage(3, 13);
+  }
+  .col-2-13-lrg {
+    @include percentage(2, 13);
+  }
+  .col-1-13-lrg {
+    @include percentage(1, 13);
+  }
+}

data/app/assets/stylesheets/grids_lite/col-14.scss

@@ -0,0 +1,133 @@
+@import "grids_lite_variables";
+@import "mixins";
+
+.col-14-14 {
+  @include percentage(14, 14);
+}
+.col-13-14 {
+  @include percentage(13, 14);
+}
+.col-12-14 {
+  @include percentage(12, 14);
+}
+.col-11-14 {
+  @include percentage(11, 14);
+}
+.col-10-14 {
+  @include percentage(10, 14);
+}
+.col-9-14 {
+  @include percentage(9, 14);
+}
+.col-8-14 {
+  @include percentage(8, 14);
+}
+.col-7-14 {
+  @include percentage(7, 14);
+}
+.col-6-14 {
+  @include percentage(6, 14);
+}
+.col-5-14 {
+  @include percentage(5, 14);
+}
+.col-4-14 {
+  @include percentage(4, 14);
+}
+.col-3-14 {
+  @include percentage(3, 14);
+}
+.col-2-14 {
+  @include percentage(2, 14);
+}
+.col-1-13 {
+  @include percentage(1, 14);
+}
+@media only screen and (min-width: $med-width) {
+  .col-14-14-med {
+    @include percentage(14, 14);
+  }
+  .col-13-14-med {
+    @include percentage(13, 14);
+  }
+  .col-12-14-med {
+    @include percentage(12, 14);
+  }
+  .col-11-14-med {
+    @include percentage(11, 14);
+  }
+  .col-10-14-med {
+    @include percentage(10, 14);
+  }
+  .col-9-14-med {
+    @include percentage(9, 14);
+  }
+  .col-8-14-med {
+    @include percentage(8, 14);
+  }
+  .col-7-14-med {
+    @include percentage(7, 14);
+  }
+  .col-6-14-med {
+    @include percentage(6, 14);
+  }
+  .col-5-14-med {
+    @include percentage(5, 14);
+  }
+  .col-4-14-med {
+    @include percentage(4, 14);
+  }
+  .col-3-14-med {
+    @include percentage(3, 14);
+  }
+  .col-2-14-med {
+    @include percentage(2, 14);
+  }
+  .col-1-13-med {
+    @include percentage(1, 14);
+  }
+}
+@media only screen and (min-width: $lrg-width) {
+  .col-14-14-lrg {
+    @include percentage(14, 14);
+  }
+  .col-13-14-lrg {
+    @include percentage(13, 14);
+  }
+  .col-12-14-lrg {
+    @include percentage(12, 14);
+  }
+  .col-11-14-lrg {
+    @include percentage(11, 14);
+  }
+  .col-10-14-lrg {
+    @include percentage(10, 14);
+  }
+  .col-9-14-lrg {
+    @include percentage(9, 14);
+  }
+  .col-8-14-lrg {
+    @include percentage(8, 14);
+  }
+  .col-7-14-lrg {
+    @include percentage(7, 14);
+  }
+  .col-6-14-lrg {
+    @include percentage(6, 14);
+  }
+  .col-5-14-lrg {
+    @include percentage(5, 14);
+  }
+  .col-4-14-lrg {
+    @include percentage(4, 14);
+  }
+  .col-3-14-lrg {
+    @include percentage(3, 14);
+  }
+  .col-2-14-lrg {
+    @include percentage(2, 14);
+  }
+  .col-1-13-lrg {
+    @include percentage(1, 14);
+  }
+}

data/app/assets/stylesheets/grids_lite/col-2.scss

@@ -0,0 +1,25 @@
+@import "grids_lite_variables";
+@import "mixins";
+
+.col-2-2 {
+  @include percentage(2, 2);
+}
+.col-1-2 {
+  @include percentage(1, 2);
+}
+@media only screen and (min-width: $med-width) {
+  .col-2-2-med {
+    @include percentage(2, 2);
+  }
+  .col-1-2-med {
+    @include percentage(1, 2);
+  }
+}
+@media only screen and (min-width: $lrg-width) {
+  .col-2-2-lrg {
+    @include percentage(2, 2);
+  }
+  .col-1-2-lrg {
+    @include percentage(1, 2);
+  }
+}