diff --git a/Gruntfile.js b/Gruntfile.js index 2b10273..fab86af 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,5 +1,17 @@ module.exports = function(grunt) { grunt.initConfig({ + + pkg: grunt.file.readJSON('package.json'), + cssmin: { + options: { + banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n' + }, + build: { + files: { + 'css/skeleton.min.css': 'css/skeleton.css' + } + } + }, less: { development: { options: { @@ -29,6 +41,7 @@ module.exports = function(grunt) { }); grunt.loadNpmTasks('grunt-contrib-less'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.registerTask('default', ['less', 'watch']); -}; \ No newline at end of file + grunt.registerTask('default', ['less', 'cssmin','watch']); +}; diff --git a/README.md b/README.md index 24e5495..3be9060 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,9 @@ Check out for documentation and details. * [Download zip](https://github.com/whatsnewsaes/Skeleton-Less/archive/master.zip), [clone the repo](github-mac://openRepo/https://github.com/whatsnewsaes/Skeleton-Less) or `bower install skeleton-less` from your terminal * cd to project folder * run `[sudo] npm install` (first time users) - * run `grunt` (to watch and compile Less files) + * run `grunt` (compile and cssmin Less files) + * run `grunt cssmin` (to minify css files) + * run `grunt watch` (to watch and compile Less files) ### What's in the download? @@ -29,6 +31,19 @@ The download includes Skeleton's CSS, ~~Normalize CSS as a reset,~~ a sample fav skeleton/ ├── index.html ├── less/ +│ └── skeleton +│ │ └── _variables.less +│ │ └── _mixins.less +│ │ └── _grid.less +│ │ └── _forms.less +│ │ └── _buttons.less +│ │ └── _type.less +│ │ └── _code.less +│ │ └── _tables.less +│ │ └── _utilities.less +│ │ └── _normalize.less +│ │ └── _medias.less +│ │ │ └── skeleton.less ├── images/ │ └── favicon.png @@ -46,7 +61,7 @@ If you have Less improvements, additional mixins, or other helpful Less techniqu ### Why it's awesome Skeleton is lightweight and simple. It styles only raw HTML elements (with a few exceptions) and provides a responsive grid. Nothing more. -- Minified, it's less than a kb +- Minified to 5,75k - It's a starting point, not a UI framework - ~~No compiling or installing...just vanilla CSS~~ diff --git a/bower.json b/bower.json index 63d0e34..d7a81d7 100644 --- a/bower.json +++ b/bower.json @@ -5,6 +5,13 @@ "authors": [ "Seth Coelen (http://SethCoelen.com)" ], + "contributors":[ + { + "name": "Amine el harrak", + "email": "amine.elharrak@gmail.com", + "url": "https://amine-elharrak.rhcloud.com/" + } + ], "description": "The (un)official Less Version of Skeleton (2.0.4): A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development", "main": "less/skeleton.less", "keywords": [ diff --git a/less/skeleton.less b/less/skeleton.less index a01b09d..4408cf9 100644 --- a/less/skeleton.less +++ b/less/skeleton.less @@ -8,8 +8,6 @@ * Less Version by Seth Coelen https://github.com/whatsnewsaes */ - - /* Table of contents –––––––––––––––––––––––––––––––––––––––––––––––––– - Grid @@ -27,598 +25,15 @@ - Media Queries */ - -// Variables -//–––––––––––––––––––––––––––––––––––––––––––––––––– - -// Breakpoints -@bp-larger-than-mobile : 400px; -@bp-larger-than-phablet : 550px; -@bp-larger-than-tablet : 750px; -@bp-larger-than-desktop : 1000px; -@bp-larger-than-desktophd : 1200px; - -// Colors -@light-grey: #e1e1e1; -@dark-grey: #333; -@primary-color: #33c3f0; -@secondary-color: lighten(@dark-grey, 13.5%); -@border-color: #bbb; -@link-color: #1eaedb; -@font-color: #222; - -// Typography -@font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - -// Grid Variables -@container-width: 960px; -@container-width-larger-than-mobile: 85%; -@container-width-larger-than-phablet: 80%; -@total-columns: 12; -@column-width: 100 / @total-columns; // calculates individual column width based off of # of columns -@column-margin: 4%; // space between columns - -// Misc -@global-radius: 4px; - -// Functions -//–––––––––––––––––––––––––––––––––––––––––––––––––– -.grid-column-width(@n) { - width: @column-width * @n - (@column-margin*(@total-columns - @n)/@total-columns); -} - -.grid-offset-length(@n) { - margin-left: @column-width * @n - (@column-margin*(@total-columns - @n)/@total-columns) + @column-margin; -} - -/* Grid -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -.container { - position: relative; - width: 100%; - max-width: @container-width; - margin: 0 auto; - padding: 0 20px; - box-sizing: border-box; -} - -.column, -.columns { - width: 100%; - float: left; - box-sizing: border-box; -} - -/* For devices larger than 400px */ -@media (min-width: @bp-larger-than-mobile) { - .container { - width: @container-width-larger-than-mobile; - padding: 0; - } -} - -/* For devices larger than 550px */ -@media (min-width: @bp-larger-than-phablet) { - .container { - width: @container-width-larger-than-phablet; - } - .column, - .columns { - margin-left: @column-margin; - } - .column:first-child, - .columns:first-child { - margin-left: 0; - } - - .one.column, - .one.columns { .grid-column-width(1); } - .two.columns { .grid-column-width(2); } - .three.columns { .grid-column-width(3); } - .four.columns { .grid-column-width(4); } - .five.columns { .grid-column-width(5); } - .six.columns { .grid-column-width(6); } - .seven.columns { .grid-column-width(7); } - .eight.columns { .grid-column-width(8); } - .nine.columns { .grid-column-width(9); } - .ten.columns { .grid-column-width(10); } - .eleven.columns { .grid-column-width(11); } - .twelve.columns { width: 100%; margin-left: 0; } - - .one-third.column { .grid-column-width(4); } - .two-thirds.column { .grid-column-width(8); } - - .one-half.column { .grid-column-width(6); } - - - /* Offsets */ - .offset-by-one.column, - .offset-by-one.columns { .grid-offset-length(1); } - .offset-by-two.column, - .offset-by-two.columns { .grid-offset-length(2); } - .offset-by-three.column, - .offset-by-three.columns { .grid-offset-length(3); } - .offset-by-four.column, - .offset-by-four.columns { .grid-offset-length(4); } - .offset-by-five.column, - .offset-by-five.columns { .grid-offset-length(5); } - .offset-by-six.column, - .offset-by-six.columns { .grid-offset-length(6); } - .offset-by-seven.column, - .offset-by-seven.columns { .grid-offset-length(7); } - .offset-by-eight.column, - .offset-by-eight.columns { .grid-offset-length(8); } - .offset-by-nine.column, - .offset-by-nine.columns { .grid-offset-length(9); } - .offset-by-ten.column, - .offset-by-ten.columns { .grid-offset-length(10); } - .offset-by-eleven.column, - .offset-by-eleven.columns { .grid-offset-length(11); } - - - .offset-by-one-third.column, - .offset-by-one-third.columns { .grid-offset-length(4); } - .offset-by-two-thirds.column, - .offset-by-two-thirds.columns { .grid-offset-length(8); } - - .offset-by-one-half.column, - .offset-by-one-half.column { .grid-offset-length(6); } - - -} - -/* Base Styles -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -/* NOTE -html is set to 62.5% so that all the REM measurements throughout Skeleton -are based on 10px sizing. So basically 1.5rem = 15px :) */ - -html { - font-size: 62.5%; -} - -body { - font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ - line-height: 1.6; - font-weight: 400; - font-family: @font-family; - color: @font-color; -} - -/* Typography -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -h1, h2, h3, h4, h5, h6 { - margin-top: 0; - margin-bottom: 2rem; - font-weight: 300; -} - -h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem; } -h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } -h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } -h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } -h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } -h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } - -/* Larger than phablet */ -@media (min-width: @bp-larger-than-phablet) { - h1 { font-size: 5.0rem; } - h2 { font-size: 4.2rem; } - h3 { font-size: 3.6rem; } - h4 { font-size: 3.0rem; } - h5 { font-size: 2.4rem; } - h6 { font-size: 1.5rem; } -} - -p { - margin-top: 0; -} - -/* Links -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -a { - color: @link-color; - &:hover { - color: darken(@link-color, 5%); - } -} - -/* Buttons -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -.button, -button { - display: inline-block; - height: 38px; - padding: 0 30px; - color: @secondary-color; - text-align: center; - font-size: 11px; - font-weight: 600; - line-height: 38px; - letter-spacing: .1rem; - text-transform: uppercase; - text-decoration: none; - white-space: nowrap; - background-color: transparent; - border-radius: @global-radius; - border: 1px solid @border-color; - cursor: pointer; - box-sizing: border-box; -} - -input { - &[type="submit"], - &[type="reset"], - &[type="button"] { - display: inline-block; - height: 38px; - padding: 0 30px; - color: @secondary-color; - text-align: center; - font-size: 11px; - font-weight: 600; - line-height: 38px; - letter-spacing: .1rem; - text-transform: uppercase; - text-decoration: none; - white-space: nowrap; - background-color: transparent; - border-radius: @global-radius; - border: 1px solid @border-color; - cursor: pointer; - box-sizing: border-box; - } -} - -.button:hover, -button:hover { - color: @dark-grey; - border-color: lighten(@dark-grey, 33.3%); - outline: 0; -} - -input { - &[type="submit"]:hover, - &[type="reset"]:hover, - &[type="button"]:hover { - color: @dark-grey; - border-color: lighten(@dark-grey, 33.3%); - outline: 0; - } -} - -.button:focus, -button:focus { - color: @dark-grey; - border-color: lighten(@dark-grey, 33.3%); - outline: 0; -} - -input { - &[type="submit"]:focus, - &[type="reset"]:focus, - &[type="button"]:focus { - color: @dark-grey; - border-color: lighten(@dark-grey, 33.3%); - outline: 0; - } -} - -.button.button-primary, -button.button-primary { - color: #fff; - background-color: @primary-color; - border-color: @primary-color; -} - -input { - &[type="submit"].button-primary, - &[type="reset"].button-primary, - &[type="button"].button-primary { - color: #fff; - background-color: @primary-color; - border-color: @primary-color; - } -} - -.button.button-primary:hover, -button.button-primary:hover { - color: #fff; - background-color: @link-color; - border-color: @link-color; -} - -input { - &[type="submit"].button-primary:hover, - &[type="reset"].button-primary:hover, - &[type="button"].button-primary:hover { - color: #fff; - background-color: @link-color; - border-color: @link-color; - } -} - -.button.button-primary:focus, -button.button-primary:focus { - color: #fff; - background-color: @link-color; - border-color: @link-color; -} - -input { - &[type="submit"].button-primary:focus, - &[type="reset"].button-primary:focus, - &[type="button"].button-primary:focus { - color: #fff; - background-color: @link-color; - border-color: @link-color; - } - &[type="email"], - &[type="number"], - &[type="search"], - &[type="text"], - &[type="tel"], - &[type="url"], - &[type="password"] { - height: 38px; - padding: 6px 10px; // The 6px vertically centers text on FF, ignored by Webkit - background-color: #fff; - border: 1px solid lighten(@border-color, 8.8%); - border-radius: @global-radius; - box-shadow: none; - box-sizing: border-box; - } -} - -/* Forms -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -textarea, -select { - height: 38px; - padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ - background-color: #fff; - border: 1px solid lighten(@border-color, 8.8%); - border-radius: @global-radius; - box-shadow: none; - box-sizing: border-box; -} - -/* Removes awkward default styles on some inputs for iOS */ -input { - &[type="email"], - &[type="number"], - &[type="search"], - &[type="text"], - &[type="tel"], - &[type="url"], - &[type="password"] { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - } -} - -textarea { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - min-height: 65px; - padding-top: 6px; - padding-bottom: 6px; -} - -input { - &[type="email"]:focus, - &[type="number"]:focus, - &[type="search"]:focus, - &[type="text"]:focus, - &[type="tel"]:focus, - &[type="url"]:focus, - &[type="password"]:focus { - border: 1px solid @primary-color; - outline: 0; - } -} - -textarea:focus, -select:focus { - border: 1px solid @primary-color; - outline: 0; -} - -label, -legend { - display: block; - margin-bottom: .5rem; - font-weight: 600; -} - -fieldset { - padding: 0; - border-width: 0; -} - -input { - &[type="checkbox"], - &[type="radio"] { - display: inline; - } -} - -label > .label-body { - display: inline-block; - margin-left: .5rem; - font-weight: normal; -} - -/* Lists -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -ul { - list-style: circle inside; -} - -ol { - list-style: decimal inside; - padding-left: 0; - margin-top: 0; -} - -ul { - padding-left: 0; - margin-top: 0; - ul, ol { - margin: 1.5rem 0 1.5rem 3rem; - font-size: 90%; - } -} - -ol { - ol, ul { - margin: 1.5rem 0 1.5rem 3rem; - font-size: 90%; - } -} - -li { - margin-bottom: 1rem; -} - -/* Code -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -code { - padding: .2rem .5rem; - margin: 0 .2rem; - font-size: 90%; - white-space: nowrap; - background: lighten(@light-grey, 6.4%); - border: 1px solid @light-grey; - border-radius: @global-radius; -} - -pre > code { - display: block; - padding: 1rem 1.5rem; - white-space: pre; -} - -/* Tables -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -th, -td { - padding: 12px 15px; - text-align: left; - border-bottom: 1px solid @light-grey; -} - -th:first-child, -td:first-child { - padding-left: 0; -} - -th:last-child, -td:last-child { - padding-right: 0; -} - -/* Spacing -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -button, -.button { - margin-bottom: 1rem; -} - -input, -textarea, -select, -fieldset { - margin-bottom: 1.5rem; -} - -pre, -blockquote, -dl, -figure, -table, -p, -ul, -ol, -form { - margin-bottom: 2.5rem; -} - -/* Utilities -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -.u-full-width { - width: 100%; - box-sizing: border-box; -} - -.u-max-full-width { - max-width: 100%; - box-sizing: border-box; -} - -.u-pull-right { - float: right; -} - -.u-pull-left { - float: left; -} - -/* Misc -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -hr { - margin-top: 3rem; - margin-bottom: 3.5rem; - border-width: 0; - border-top: 1px solid @light-grey; -} - -/* Clearing -–––––––––––––––––––––––––––––––––––––––––––––––––– */ - -/* Self Clearing Goodness */ - -.container:after, -.row:after, -.u-cf { - content: ""; - display: table; - clear: both; -} - -/* Media Queries -–––––––––––––––––––––––––––––––––––––––––––––––––– */ -/* -Note: The best way to structure the use of media queries is to create the queries -near the relevant code. For example, if you wanted to change the styles for buttons -on small devices, paste the mobile query code up in the buttons section and style it -there. -*/ - - -/* Larger than mobile */ -@media (min-width: @bp-larger-than-mobile) {} - -/* Larger than phablet (also point when grid becomes active) */ -@media (min-width: @bp-larger-than-phablet) {} - -/* Larger than tablet */ -@media (min-width: @bp-larger-than-tablet) {} - -/* Larger than desktop */ -@media (min-width: @bp-larger-than-desktop) {} - -/* Larger than Desktop HD */ -@media (min-width: @bp-larger-than-desktophd) {} +// Core CSS +@import "skeleton/_variables"; +@import "skeleton/_mixins"; +@import "skeleton/_grid"; +@import "skeleton/_forms"; +@import "skeleton/_buttons"; +@import "skeleton/_type"; +@import "skeleton/_code"; +@import "skeleton/_tables"; +@import "skeleton/_utilities"; +@import "skeleton/_normalize"; +@import "skeleton/_medias"; diff --git a/less/skeleton/_buttons.less b/less/skeleton/_buttons.less new file mode 100644 index 0000000..bb0b611 --- /dev/null +++ b/less/skeleton/_buttons.less @@ -0,0 +1,147 @@ +/* Buttons +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +.button, +button { + display: inline-block; + height: 38px; + padding: 0 30px; + color: @secondary-color; + text-align: center; + font-size: 11px; + font-weight: 600; + line-height: 38px; + letter-spacing: .1rem; + text-transform: uppercase; + text-decoration: none; + white-space: nowrap; + background-color: transparent; + border-radius: @global-radius; + border: 1px solid @border-color; + cursor: pointer; + box-sizing: border-box; +} + +input { + &[type="submit"], + &[type="reset"], + &[type="button"] { + display: inline-block; + height: 38px; + padding: 0 30px; + color: @secondary-color; + text-align: center; + font-size: 11px; + font-weight: 600; + line-height: 38px; + letter-spacing: .1rem; + text-transform: uppercase; + text-decoration: none; + white-space: nowrap; + background-color: transparent; + border-radius: @global-radius; + border: 1px solid @border-color; + cursor: pointer; + box-sizing: border-box; + } +} + +.button:hover, +button:hover { + color: @dark-grey; + border-color: lighten(@dark-grey, 33.3%); + outline: 0; +} + +input { + &[type="submit"]:hover, + &[type="reset"]:hover, + &[type="button"]:hover { + color: @dark-grey; + border-color: lighten(@dark-grey, 33.3%); + outline: 0; + } +} + +.button:focus, +button:focus { + color: @dark-grey; + border-color: lighten(@dark-grey, 33.3%); + outline: 0; +} + +input { + &[type="submit"]:focus, + &[type="reset"]:focus, + &[type="button"]:focus { + color: @dark-grey; + border-color: lighten(@dark-grey, 33.3%); + outline: 0; + } +} + +.button.button-primary, +button.button-primary { + color: #fff; + background-color: @primary-color; + border-color: @primary-color; +} + +input { + &[type="submit"].button-primary, + &[type="reset"].button-primary, + &[type="button"].button-primary { + color: #fff; + background-color: @primary-color; + border-color: @primary-color; + } +} + +.button.button-primary:hover, +button.button-primary:hover { + color: #fff; + background-color: @link-color; + border-color: @link-color; +} + +input { + &[type="submit"].button-primary:hover, + &[type="reset"].button-primary:hover, + &[type="button"].button-primary:hover { + color: #fff; + background-color: @link-color; + border-color: @link-color; + } +} + +.button.button-primary:focus, +button.button-primary:focus { + color: #fff; + background-color: @link-color; + border-color: @link-color; +} + +input { + &[type="submit"].button-primary:focus, + &[type="reset"].button-primary:focus, + &[type="button"].button-primary:focus { + color: #fff; + background-color: @link-color; + border-color: @link-color; + } + &[type="email"], + &[type="number"], + &[type="search"], + &[type="text"], + &[type="tel"], + &[type="url"], + &[type="password"] { + height: 38px; + padding: 6px 10px; // The 6px vertically centers text on FF, ignored by Webkit + background-color: #fff; + border: 1px solid lighten(@border-color, 8.8%); + border-radius: @global-radius; + box-shadow: none; + box-sizing: border-box; + } +} \ No newline at end of file diff --git a/less/skeleton/_code.less b/less/skeleton/_code.less new file mode 100644 index 0000000..cd418ad --- /dev/null +++ b/less/skeleton/_code.less @@ -0,0 +1,17 @@ +/* Code +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +code { + padding: .2rem .5rem; + margin: 0 .2rem; + font-size: 90%; + white-space: nowrap; + background: lighten(@light-grey, 6.4%); + border: 1px solid @light-grey; + border-radius: @global-radius; + + pre > & { + display: block; + padding: 1rem 1.5rem; + white-space: pre; + } +} diff --git a/less/skeleton/_forms.less b/less/skeleton/_forms.less new file mode 100644 index 0000000..d3f2119 --- /dev/null +++ b/less/skeleton/_forms.less @@ -0,0 +1,81 @@ +/* Forms +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +textarea, +select { + height: 38px; + padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ + background-color: #fff; + border: 1px solid lighten(@border-color, 8.8%); + border-radius: @global-radius; + box-shadow: none; + box-sizing: border-box; +} + +/* Removes awkward default styles on some inputs for iOS */ +input { + &[type="email"], + &[type="number"], + &[type="search"], + &[type="text"], + &[type="tel"], + &[type="url"], + &[type="password"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + } +} + +textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + min-height: 65px; + padding-top: 6px; + padding-bottom: 6px; +} + +input { + &[type="email"]:focus, + &[type="number"]:focus, + &[type="search"]:focus, + &[type="text"]:focus, + &[type="tel"]:focus, + &[type="url"]:focus, + &[type="password"]:focus { + border: 1px solid @primary-color; + outline: 0; + } +} + +textarea:focus, +select:focus { + border: 1px solid @primary-color; + outline: 0; +} + +label, +legend { + display: block; + margin-bottom: .5rem; + font-weight: 600; +} + +fieldset { + padding: 0; + border-width: 0; +} + +input { + &[type="checkbox"], + &[type="radio"] { + display: inline; + } +} + +label > .label-body { + display: inline-block; + margin-left: .5rem; + font-weight: normal; +} \ No newline at end of file diff --git a/less/skeleton/_grid.less b/less/skeleton/_grid.less new file mode 100644 index 0000000..8336336 --- /dev/null +++ b/less/skeleton/_grid.less @@ -0,0 +1,95 @@ +/* Grid +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +.container { + position: relative; + width: 100%; + max-width: @container-width; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; +} + +.column, +.columns { + width: 100%; + float: left; + box-sizing: border-box; +} + +/* For devices larger than 400px */ +@media (min-width: @bp-larger-than-mobile) { + .container { + width: @container-width-larger-than-mobile; + padding: 0; + } +} + +/* For devices larger than 550px */ +@media (min-width: @bp-larger-than-phablet) { + .container { + width: @container-width-larger-than-phablet; + } + .column, + .columns { + margin-left: @column-margin; + } + .column:first-child, + .columns:first-child { + margin-left: 0; + } + + .one.column, + .one.columns { .grid-column-width(1); } + .two.columns { .grid-column-width(2); } + .three.columns { .grid-column-width(3); } + .four.columns { .grid-column-width(4); } + .five.columns { .grid-column-width(5); } + .six.columns { .grid-column-width(6); } + .seven.columns { .grid-column-width(7); } + .eight.columns { .grid-column-width(8); } + .nine.columns { .grid-column-width(9); } + .ten.columns { .grid-column-width(10); } + .eleven.columns { .grid-column-width(11); } + .twelve.columns { width: 100%; margin-left: 0; } + + .one-third.column { .grid-column-width(4); } + .two-thirds.column { .grid-column-width(8); } + + .one-half.column { .grid-column-width(6); } + + + /* Offsets */ + .offset-by-one.column, + .offset-by-one.columns { .grid-offset-length(1); } + .offset-by-two.column, + .offset-by-two.columns { .grid-offset-length(2); } + .offset-by-three.column, + .offset-by-three.columns { .grid-offset-length(3); } + .offset-by-four.column, + .offset-by-four.columns { .grid-offset-length(4); } + .offset-by-five.column, + .offset-by-five.columns { .grid-offset-length(5); } + .offset-by-six.column, + .offset-by-six.columns { .grid-offset-length(6); } + .offset-by-seven.column, + .offset-by-seven.columns { .grid-offset-length(7); } + .offset-by-eight.column, + .offset-by-eight.columns { .grid-offset-length(8); } + .offset-by-nine.column, + .offset-by-nine.columns { .grid-offset-length(9); } + .offset-by-ten.column, + .offset-by-ten.columns { .grid-offset-length(10); } + .offset-by-eleven.column, + .offset-by-eleven.columns { .grid-offset-length(11); } + + + .offset-by-one-third.column, + .offset-by-one-third.columns { .grid-offset-length(4); } + .offset-by-two-thirds.column, + .offset-by-two-thirds.columns { .grid-offset-length(8); } + + .offset-by-one-half.column, + .offset-by-one-half.column { .grid-offset-length(6); } + + +} diff --git a/less/skeleton/_medias.less b/less/skeleton/_medias.less new file mode 100644 index 0000000..32fe76f --- /dev/null +++ b/less/skeleton/_medias.less @@ -0,0 +1,23 @@ +/* Media Queries +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* +Note: The best way to structure the use of media queries is to create the queries +near the relevant code. For example, if you wanted to change the styles for buttons +on small devices, paste the mobile query code up in the buttons section and style it +there. +*/ + +/* Larger than mobile */ +@media (min-width: @bp-larger-than-mobile) {} + +/* Larger than phablet (also point when grid becomes active) */ +@media (min-width: @bp-larger-than-phablet) {} + +/* Larger than tablet */ +@media (min-width: @bp-larger-than-tablet) {} + +/* Larger than desktop */ +@media (min-width: @bp-larger-than-desktop) {} + +/* Larger than Desktop HD */ +@media (min-width: @bp-larger-than-desktophd) {} diff --git a/less/skeleton/_mixins.less b/less/skeleton/_mixins.less new file mode 100644 index 0000000..4bff7cf --- /dev/null +++ b/less/skeleton/_mixins.less @@ -0,0 +1,9 @@ +// Functions +//–––––––––––––––––––––––––––––––––––––––––––––––––– +.grid-column-width(@n) { + width: @column-width * @n - (@column-margin*(@total-columns - @n)/@total-columns); +} + +.grid-offset-length(@n) { + margin-left: @column-width * @n - (@column-margin*(@total-columns - @n)/@total-columns) + @column-margin; +} \ No newline at end of file diff --git a/less/skeleton/_normalize.less b/less/skeleton/_normalize.less new file mode 100644 index 0000000..74e10d5 --- /dev/null +++ b/less/skeleton/_normalize.less @@ -0,0 +1,87 @@ +/* Base Styles +–––––––––––––––––––––––––––––––––––––––––––––––––– */ +/* NOTE +html is set to 62.5% so that all the REM measurements throughout Skeleton +are based on 10px sizing. So basically 1.5rem = 15px :) */ + +html { + font-size: 62.5%; +} + +body { + font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ + line-height: 1.6; + font-weight: 400; + font-family: @font-family; + color: @font-color; +} + +/* Links +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +a { + color: @link-color; + &:hover { + color: darken(@link-color, 5%); + } +} + +/* Lists +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +ul { + list-style: circle inside; +} + +ol { + list-style: decimal inside; + padding-left: 0; + margin-top: 0; +} + +ul { + padding-left: 0; + margin-top: 0; + ul, ol { + margin: 1.5rem 0 1.5rem 3rem; + font-size: 90%; + } +} + +ol { + ol, ul { + margin: 1.5rem 0 1.5rem 3rem; + font-size: 90%; + } +} + +li { + margin-bottom: 1rem; +} + +/* Spacing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +button, +.button { + margin-bottom: 1rem; +} + +input, +textarea, +select, +fieldset { + margin-bottom: 1.5rem; +} + +pre, +blockquote, +dl, +figure, +table, +p, +ul, +ol, +form { + margin-bottom: 2.5rem; +} diff --git a/less/skeleton/_tables.less b/less/skeleton/_tables.less new file mode 100644 index 0000000..29cde63 --- /dev/null +++ b/less/skeleton/_tables.less @@ -0,0 +1,19 @@ +/* Tables +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +th, +td { + padding: 12px 15px; + text-align: left; + border-bottom: 1px solid @light-grey; +} + +th:first-child, +td:first-child { + padding-left: 0; +} + +th:last-child, +td:last-child { + padding-right: 0; +} \ No newline at end of file diff --git a/less/skeleton/_type.less b/less/skeleton/_type.less new file mode 100644 index 0000000..d2c79fa --- /dev/null +++ b/less/skeleton/_type.less @@ -0,0 +1,29 @@ +/* Typography +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 2rem; + font-weight: 300; +} + +h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem; } +h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } +h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } +h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } +h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } +h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } + +/* Larger than phablet */ +@media (min-width: @bp-larger-than-phablet) { + h1 { font-size: 5.0rem; } + h2 { font-size: 4.2rem; } + h3 { font-size: 3.6rem; } + h4 { font-size: 3.0rem; } + h5 { font-size: 2.4rem; } + h6 { font-size: 1.5rem; } +} + +p { + margin-top: 0; +} diff --git a/less/skeleton/_utilities.less b/less/skeleton/_utilities.less new file mode 100644 index 0000000..ed5aa9e --- /dev/null +++ b/less/skeleton/_utilities.less @@ -0,0 +1,43 @@ +/* Utilities +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +.u-full-width { + width: 100%; + box-sizing: border-box; +} + +.u-max-full-width { + max-width: 100%; + box-sizing: border-box; +} + +.u-pull-right { + float: right; +} + +.u-pull-left { + float: left; +} + +/* Misc +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +hr { + margin-top: 3rem; + margin-bottom: 3.5rem; + border-width: 0; + border-top: 1px solid @light-grey; +} + +/* Clearing +–––––––––––––––––––––––––––––––––––––––––––––––––– */ + +/* Self Clearing Goodness */ + +.container:after, +.row:after, +.u-cf { + content: ""; + display: table; + clear: both; +} \ No newline at end of file diff --git a/less/skeleton/_variables.less b/less/skeleton/_variables.less new file mode 100644 index 0000000..cac250c --- /dev/null +++ b/less/skeleton/_variables.less @@ -0,0 +1,32 @@ +// Variables +//–––––––––––––––––––––––––––––––––––––––––––––––––– + +// Breakpoints +@bp-larger-than-mobile : 400px; +@bp-larger-than-phablet : 550px; +@bp-larger-than-tablet : 750px; +@bp-larger-than-desktop : 1000px; +@bp-larger-than-desktophd : 1200px; + +// Typography +@font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; + +// Grid Variables +@container-width: 960px; +@container-width-larger-than-mobile: 85%; +@container-width-larger-than-phablet: 80%; +@total-columns: 12; +@column-width: 100 / @total-columns; // calculates individual column width based off of # of columns +@column-margin: 4%; // space between columns + +// Misc +@global-radius: 4px; + +// Colors +@light-grey: #e1e1e1; +@dark-grey: #333; +@primary-color: #33c3f0; +@secondary-color: lighten(@dark-grey, 13.5%); +@border-color: #bbb; +@link-color: #1eaedb; +@font-color: #222; \ No newline at end of file diff --git a/package.json b/package.json index beacc12..c6b52de 100755 --- a/package.json +++ b/package.json @@ -1,10 +1,18 @@ { - "name": "skeleton-less", - "version": "2.0.1", - "description": "Skeleton: A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development", - "devDependencies": { - "grunt": "~0.4.5", - "grunt-contrib-watch": "~0.6.1", - "grunt-contrib-less": "~0.12.0" - } + "name": "skeleton-less", + "author": "aelharak ", + "contributors": [{ + "name": "Amine el harrak", + "email": "amine.elharrak@gmail.com" + }], + "version": "2.0.1", + "description": "Skeleton: A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development", + "devDependencies": { + "grunt": "~0.4.4", + "jshint-stylish": "latest", + "grunt-contrib-uglify": "latest", + "grunt-contrib-less": "latest", + "grunt-contrib-cssmin": "latest", + "grunt-contrib-watch": "latest" + } }