diff --git a/README.md b/README.md index ed7def6..d7a4b16 100755 --- 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: -- [hello.joer@gmail.com](mailto:hello.joer@gmail.com) +- [joe@lifes.gd](mailto:joe@lifes.gd) - [@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 old mode 100644 new mode 100755 index af6b516..61f59a8 --- 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 old mode 100644 new mode 100755 index 0e6b0ac..517b51f --- 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 old mode 100644 new mode 100755 index 02a5e92..c224854 --- a/css/lemonade.min.css +++ b/css/lemonade.min.css @@ -1 +1 @@ -*{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:.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,.bit-10,.bit-11,.bit-12,.bit-2,.bit-3,.bit-4,.bit-5,.bit-6,.bit-7,.bit-8,.bit-9{width:100%}}@media (min-width:30em) and (max-width:50em){.bit-10,.bit-12,.bit-4,.bit-6,.bit-8{width:50%}.bit-1,.bit-11,.bit-2,.bit-3,.bit-5,.bit-7,.bit-9{width:100%}}@media (min-width:50em) and (max-width:68.75em){.bit-2,.bit-7{width:100%}.bit-10,.bit-12,.bit-4,.bit-8{width:50%}}.box{background:#FCD920;font-family:Futura,sans-serif;font-size:14px;text-align:center;padding:20px 0}.box--new{background:#87D37C} \ No newline at end of file +*{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:.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,.bit-10,.bit-11,.bit-12,.bit-2,.bit-3,.bit-4,.bit-5,.bit-6,.bit-7,.bit-8,.bit-9{width:100%}}@media (min-width:30em) and (max-width:50em){.bit-10,.bit-12,.bit-4,.bit-6,.bit-8{width:50%}.bit-1,.bit-11,.bit-2,.bit-3,.bit-5,.bit-7,.bit-9{width:100%}}@media (min-width:50em) and (max-width:68.75em){.bit-2,.bit-7{width:100%}.bit-10,.bit-12,.bit-4,.bit-8{width:50%}} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js old mode 100644 new mode 100755 index 6dd2e5d..8838a36 --- 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 old mode 100644 new mode 100755 index a994e87..1fe2836 --- a/index.html +++ b/index.html @@ -3,7 +3,20 @@ - Lemonade v2 - Demo + Lemonade v2.5 - Demo + diff --git a/package.json b/package.json old mode 100644 new mode 100755 diff --git a/scss/_config.scss b/scss/_config.scss deleted file mode 100644 index 2ef7b25..0000000 --- a/scss/_config.scss +++ /dev/null @@ -1,34 +0,0 @@ -// Helpers -$full: 100%; -$half: 100% / 2; - -// 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 - -// Example padding for grid -// Doesn't actually need to be kept in. -$bit-padding: 0.3em; - -// 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%; - -// Demo Colors -$lemonade-color: #FCD920; -$new-grid-color: #87D37C; diff --git a/scss/_demo.scss b/scss/_demo.scss deleted file mode 100644 index 5cd04a5..0000000 --- a/scss/_demo.scss +++ /dev/null @@ -1,12 +0,0 @@ -// For Demo Purposes Only. -.box { - background: $lemonade-color; - font-family: "Futura", sans-serif; - font-size: 14px; - text-align: center; - padding: 20px 0; - - &--new { - background: $new-grid-color; - } -} diff --git a/scss/_grid.scss b/scss/_grid.scss deleted file mode 100644 index 4106d46..0000000 --- a/scss/_grid.scss +++ /dev/null @@ -1,102 +0,0 @@ - -// Mixins, not worth having its own file. -// Border box -// Should probably use auto-prefix on this. -@mixin box-sizing($type) { - -webkit-box-sizing: $type; - -moz-box-sizing: $type; - box-sizing: $type; -} - -// Start the grid. -// Optional hard reset -* { - margin: 0; - padding: 0; - @include 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; - } -} diff --git a/scss/lemonade.scss b/scss/lemonade.scss old mode 100644 new mode 100755 index cc408b8..53190bf --- 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; + } +} \ No newline at end of file