cleaned up sass files

dope · Feb 6, 2016 · 4a3fa22 · 4a3fa22
1 parent 9d38e84
commit 4a3fa22
Show file tree

Hide file tree

Showing 11 changed files with 143 additions and 174 deletions.
diff --git a/README.md b/README.md
@@ -45,7 +45,7 @@ Creating the css is also simple:
 ### Support
 If you have any questions or you're struggling with it, get in touch:
 
--   [[email protected]](mailto:[email protected])
+-   [[email protected]](mailto:[email protected])
 -   [@joericho](http://twitter.com/joericho)
 -   [@lemonadegrid](http://twitter.com/lemonadegrid)
 
@@ -63,7 +63,7 @@ Also want to thank people who are testing and contributing to the product.
 
 ### License
 ```
-Copyright (C) 2014 Joe Richardson
+Copyright (C) 2016 Joe Richardson
 
 Permission is hereby granted, free of charge, to any person obtaining a
 copy of this software and associated documentation files (the

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
     "name": "lemonade",
-    "version": "2",
+    "version": "2.5",
     "main": "css/lemonade.min.css",
     "author": "Joe Richardson",
     "ignore": [

diff --git a/css/lemonade.css b/css/lemonade.css
@@ -154,15 +154,3 @@
     width: 50%;
   }
 }
-
-.box {
-  background: #FCD920;
-  font-family: "Futura", sans-serif;
-  font-size: 14px;
-  text-align: center;
-  padding: 20px 0;
-}
-
-.box--new {
-  background: #87D37C;
-}
diff --git a/css/lemonade.min.css b/css/lemonade.min.css
diff --git a/gulpfile.js b/gulpfile.js
@@ -29,6 +29,8 @@ gulp.task('browser-sync', function() {
 });
 
 // default task (just run gulp)
-gulp.task('default', ['sass', 'browser-sync'], function () {
+gulp.task('default', ['sass']);
+
+gulp.task('watch', ['sass', 'browser-sync'], function () {
     gulp.watch("scss/**/*.scss", ['sass']);
 });
diff --git a/index.html b/index.html
@@ -3,7 +3,20 @@
 <head>
     <meta name="viewport" content="width=device-width, minimal-ui">
     <meta charset="UTF-8">
-    <title>Lemonade v2 - Demo</title>
+    <title>Lemonade v2.5 - Demo</title>
+    <style>
+        .box {
+            background: #FCD920;
+            font-family: "Futura", sans-serif;
+            font-size: 14px;
+            text-align: center;
+            padding: 20px 0;
+        }
+
+        .box--new {
+            background: #87D37C;
+        }
+    </style>
     <link rel="stylesheet" href="css/lemonade.min.css">
 </head>
 <body>

diff --git a/package.json b/package.json
diff --git a/scss/_config.scss b/scss/_config.scss
diff --git a/scss/_demo.scss b/scss/_demo.scss
diff --git a/scss/_grid.scss b/scss/_grid.scss
diff --git a/scss/lemonade.scss b/scss/lemonade.scss
@@ -1,14 +1,128 @@
-// Lemonade V2
+// Lemonade v2.5
 // By Joe Richardson (@joericho)
-// Licensed under the MIT license, 2014
+// Licensed under the MIT license, 2016
 // Documentation: http://lemonade.im
 
+// Helpers
+$full:              100%;
+$half:              100% / 2;
 
-// Config (variables, widths etc.)
-@import 'config';
+// Media Queries Breakpoints
+// Can be tweaked if need be.
+$small:             30em; // Portrait mobile to landscape mobile
+$medium:            50em; // Portrait tablet to landscape tablet
+$large:             68.750em; // Small desktop to large desktop
 
-// 12 column grid system
-@import 'grid';
+// Example padding for grid
+// Doesn't actually need to be kept in.
+$bit-padding:       0.3em;
 
-// Demo styles
-@import 'demo';
+// Grid widths
+// ----------------------------------------------
+// Feel free to change this to how many columns
+// you want this grid system to have.
+$start:             1;
+$end:               12;
+
+// Commons widths
+// ----------------------------------------------
+// A list that contains common percentage widths
+// as column classes e.g bit-60, bit-40, bit-75
+// customise this list as you require
+$common: 25, 40, 60, 75;
+
+// Frame width (grid wrapper)
+$frame-width:       100%;
+
+// Start the grid.
+// Optional hard reset
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+// clearfix
+.frame {
+    margin: 0 auto;
+    max-width: $frame-width;
+    &:after {
+        content: "";
+        display: table;
+        clear: both;
+    }
+}
+
+// Attribute selector
+// Also I've removed :last-of-type
+[class*='bit-'] {
+    float: left;
+    padding: $bit-padding;
+}
+
+// Create grid widths (1-12)
+@for $i from $start through $end {
+    .bit-#{$i} {
+        width: $full / $i;
+    }
+}
+
+// Common widths
+// Please use the media queries below to respond these widths
+// Feel free to pull request new widths
+@each $i in $common {
+    .bit-#{$i} {
+        width: percentage($i / 100);
+    }
+}
+
+
+// Responsiveness
+// Feel free to use your own responsive widths and styles for the grid
+// These are mostly for example use only.
+// -------------------------------------------------------------------
+
+// Mobile
+@media (max-width: $small) {
+    @for $i from $start through $end {
+        .bit-#{$i} {
+            width: $full
+        }
+    }
+}
+
+// Portrait Tablet
+@media (min-width: $small) and (max-width: $medium) {
+    .bit-4,
+    .bit-6,
+    .bit-8,
+    .bit-10,
+    .bit-12 {
+        width: $half;
+    }
+
+    .bit-1,
+    .bit-2,
+    .bit-3,
+    .bit-5,
+    .bit-7,
+    .bit-9,
+    .bit-11 {
+        width: $full;
+    }
+}
+
+// Landscape Tablet
+@media (min-width: $medium) and (max-width: $large) {
+    .bit-2,
+    .bit-7 {
+        width: $full;
+    }
+
+    .bit-4,
+    .bit-8,
+    .bit-10,
+    .bit-12 {
+        width: $half;
+    }
+}