fixed sass loop for the common widths

.gitignore

@@ -1,2 +1,2 @@
 .DS_Store
-node_modules
+node_modules

README.md

@@ -82,4 +82,4 @@ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-```
+```

bower.json

@@ -1,7 +1,7 @@
 {
     "name": "lemonade",
     "version": "2",
-    "main": "css/lemonade.min.css",
+    "main": "css/lemonade.css",
     "author": "Joe Richardson",
     "ignore": [
         "README.md",

css/lemonade.css

@@ -1 +1,111 @@
-*{margin:0;padding:0;box-sizing:border-box;}.frame{margin:0 auto;max-width:100%;}.frame:after{content:"";display:table;clear:both;}[class*='bit-']{float:left;padding:0.3em;}.bit-1{width:8.33333%;}.bit-2{width:16.66667%;}.bit-3{width:25%;}.bit-4{width:33.33333%;}.bit-5{width:41.66667%;}.bit-6{width:50%;}.bit-7{width:58.33333%;}.bit-8{width:66.66667%;}.bit-9{width:75%;}.bit-10{width:83.33333%;}.bit-11{width:91.66667%;}.bit-12{width:100%;}.bit-25{width:25%;}.bit-40{width:40%;}.bit-60{width:60%;}.bit-75{width:75%;}@media (max-width: 30em){.bit-1{width:100%;}.bit-2{width:100%;}.bit-3{width:100%;}.bit-4{width:100%;}.bit-5{width:100%;}.bit-6{width:100%;}.bit-7{width:100%;}.bit-8{width:100%;}.bit-9{width:100%;}.bit-10{width:100%;}.bit-11{width:100%;}.bit-12{width:100%;}}@media (min-width: 30em) and (max-width: 50em){.bit-4,.bit-6,.bit-8,.bit-10,.bit-12{width:50%;}.bit-1,.bit-2,.bit-3,.bit-5,.bit-7,.bit-9,.bit-11{width:100%;}}@media (min-width: 50em) and (max-width: 68.75em){.bit-2,.bit-7{width:100%;}.bit-4,.bit-8,.bit-10,.bit-12{width:50%;}}.box{background:#FCD920;font-family:"Futura",sans-serif;font-size:14px;text-align:center;padding:20px 0;}.box--new{background:#87D37C;}
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box; }
+
+.frame {
+  margin: 0 auto;
+  max-width: 100%; }
+  .frame:after {
+    content: "";
+    display: table;
+    clear: both; }
+
+[class*='bit-'] {
+  float: left;
+  padding: 0.3em; }
+
+.bit-1 {
+  width: 100%; }
+
+.bit-2 {
+  width: 50%; }
+
+.bit-3 {
+  width: 33.33333%; }
+
+.bit-4 {
+  width: 25%; }
+
+.bit-5 {
+  width: 20%; }
+
+.bit-6 {
+  width: 16.66667%; }
+
+.bit-7 {
+  width: 14.28571%; }
+
+.bit-8 {
+  width: 12.5%; }
+
+.bit-9 {
+  width: 11.11111%; }
+
+.bit-10 {
+  width: 10%; }
+
+.bit-11 {
+  width: 9.09091%; }
+
+.bit-12 {
+  width: 8.33333%; }
+
+.bit-25 {
+  width: 25%; }
+
+.bit-40 {
+  width: 40%; }
+
+.bit-60 {
+  width: 60%; }
+
+.bit-75 {
+  width: 75%; }
+
+@media (max-width: 30em) {
+  .bit-1 {
+    width: 100%; }
+  .bit-2 {
+    width: 100%; }
+  .bit-3 {
+    width: 100%; }
+  .bit-4 {
+    width: 100%; }
+  .bit-5 {
+    width: 100%; }
+  .bit-6 {
+    width: 100%; }
+  .bit-7 {
+    width: 100%; }
+  .bit-8 {
+    width: 100%; }
+  .bit-9 {
+    width: 100%; }
+  .bit-10 {
+    width: 100%; }
+  .bit-11 {
+    width: 100%; }
+  .bit-12 {
+    width: 100%; } }
+
+@media (min-width: 30em) and (max-width: 50em) {
+  .bit-4, .bit-6, .bit-8, .bit-10, .bit-12 {
+    width: 50%; }
+  .bit-1, .bit-2, .bit-3, .bit-5, .bit-7, .bit-9, .bit-11 {
+    width: 100%; } }
+
+@media (min-width: 50em) and (max-width: 68.75em) {
+  .bit-2, .bit-7 {
+    width: 100%; }
+  .bit-4, .bit-8, .bit-10, .bit-12 {
+    width: 50%; } }
+
+.box {
+  background: #FCD920;
+  font-family: "Futura", sans-serif;
+  font-size: 14px;
+  text-align: center;
+  padding: 20px 0; }
+  .box--new {
+    background: #87D37C; }

gulpfile.js

@@ -7,7 +7,7 @@ var prefix       = require('gulp-autoprefixer');
 // create sass tasks
 gulp.task('sass', function () {
     gulp.src('scss/**/*.scss')
-        .pipe(sass({outputStyle: 'compressed', includePaths: ['scss']}))
+        .pipe(sass({outputStyle: 'compact', includePaths: ['scss']}))
         .pipe(prefix("last 2 versions", "> 1%", "ie 8", "Android 2", "Firefox ESR"))
         .pipe(gulp.dest('css'))
 });
@@ -24,4 +24,4 @@ gulp.task('browser-sync', function() {
 // default task (just run gulp)
 gulp.task('default', ['sass', 'browser-sync'], function () {
     gulp.watch("scss/**/*.scss", ['sass']);
-});
+});

index.html

@@ -3,7 +3,7 @@
 <head>
     <meta name="viewport" content="width=device-width, minimal-ui">
     <meta charset="UTF-8">
-    <title>Lemonade V2 - Demo</title>
+    <title>Lemonade v2 - Demo</title>
     <link rel="stylesheet" href="css/lemonade.css">
 </head>
 <body>
@@ -31,7 +31,7 @@
         <div class="bit-1">
             <div class="box">.bit-1</div>
         </div>
-        
+
         <!-- 2 columns -->
         <div class="bit-2">
             <div class="box">.bit-2</div>
@@ -350,8 +350,6 @@
         <div class="bit-12">
             <div class="box">.bit-12</div>
         </div>
-
     </div>
-
 </body>
-</html>
+</html>

package.json

@@ -29,4 +29,4 @@
     "url": "https://github.com/dope/lemonade/issues"
   },
   "homepage": "http://lemonade.im"
-}
+}

scss/_demo.scss

@@ -9,4 +9,4 @@
 	&--new {
 		background: $new-grid-color;
 	}
-}
+}

scss/_grid.scss

@@ -37,7 +37,7 @@
 // Create grid widths (1-12)
 @for $i from $start through $end {
     .bit-#{$i} {
-        width: percentage($i / $end);
+        width: $full / $i;
     }
 }
 

scss/lemonade.scss

@@ -11,4 +11,4 @@
 @import 'grid';
 
 // Demo styles
-@import 'demo';
+@import 'demo';