From 154a70ed5896cf052d785463355379f3d5599258 Mon Sep 17 00:00:00 2001 From: Nick Pack Date: Fri, 17 May 2013 11:08:30 +0100 Subject: [PATCH] Grunt based builds --- .gitignore | 3 +- Gruntfile.js | 46 ++++ css/skeleton.css | 616 ----------------------------------------------- package.json | 36 +++ 4 files changed, 84 insertions(+), 617 deletions(-) create mode 100644 Gruntfile.js delete mode 100644 css/skeleton.css create mode 100644 package.json diff --git a/.gitignore b/.gitignore index ad28d89..9a1d2a5 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -.sass-cache/* \ No newline at end of file +.sass-cache/* +node_modules \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..56d52a8 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,46 @@ +module.exports = function(grunt) { + + grunt.initConfig({ + pkg: grunt.file.readJSON('package.json'), + // CSS + sass: { + dist: { + files: { + 'css/skeleton.css': 'scss/skeleton.scss', + } + } + }, + csslint: { + scssoutput: { + options: { + import: false + }, + src: ['css/skeleton.css'] + } + }, + cssmin: { + compress: { + options: { + banner: '/* <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("dd-mm-yyyy") %> */' + }, + files: { + 'css/skeleton.min.css': 'css/skeleton.css' + } + }, + }, + watch: { + files: 'scss/**/*', + tasks: ['sass', 'csslint', 'cssmin'] + } + }); + + grunt.loadNpmTasks('grunt-contrib-csslint'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); + grunt.loadNpmTasks('grunt-contrib-sass'); + grunt.loadNpmTasks('grunt-contrib-watch'); + + grunt.registerTask('lint', ['sass', 'csslint']); + grunt.registerTask('minify', ['sass', 'cssmin']); + grunt.registerTask('build', ['sass', 'cssmin']); + +}; \ No newline at end of file diff --git a/css/skeleton.css b/css/skeleton.css deleted file mode 100644 index fcda9fd..0000000 --- a/css/skeleton.css +++ /dev/null @@ -1,616 +0,0 @@ -/* -* Skeleton V1.2 -* Copyright 2011, Dave Gamache -* -* SCSS Conversion and Mixins by Nick Pack -* -* www.getskeleton.com -* Free to use under the MIT license. -* http://www.opensource.org/licenses/mit-license.php -* 6/20/2012 -*/ -/* ul, ol with disc, square etc. */ -/* #Reset & Basics (Inspired by E. Meyers) -================================================== */ -html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; } - -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { - display: block; } - -body { - line-height: 1; } - -ol, ul { - list-style: none; } - -blockquote, q { - quotes: none; } - -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; } - -table { - border-collapse: collapse; - border-spacing: 0; } - -/* #Misc -================================================== */ -.remove-bottom { - margin-bottom: 0 !important; } - -.half-bottom { - margin-bottom: 10px !important; } - -.add-bottom { - margin-bottom: 20px !important; } - -/* #Basic Styles -================================================== */ -body { - background: #fff; - font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #444; - -webkit-text-size-adjust: 100%; } - -/* #Forms -================================================== */ -.container { - position: relative; - margin: 0 auto; - padding: 0; } - -.column, .columns { - float: left; - display: inline; - margin-left: 10px; - margin-right: 10px; } - .column.alpha, .columns.alpha { - margin-left: 0; } - .column.omerga, .columns.omerga { - margin-right: 0; } - -.row { - margin-bottom: 20px; } - -.container { - width: 960px; } - .container .columns.one, .container .column.one { - width: 40px; } - .container .columns.two, .container .column.two { - width: 100px; } - .container .columns.three, .container .column.three { - width: 160px; } - .container .columns.four, .container .column.four { - width: 220px; } - .container .columns.five, .container .column.five { - width: 280px; } - .container .columns.six, .container .column.six { - width: 340px; } - .container .columns.seven, .container .column.seven { - width: 400px; } - .container .columns.eight, .container .column.eight { - width: 460px; } - .container .columns.nine, .container .column.nine { - width: 520px; } - .container .columns.ten, .container .column.ten { - width: 580px; } - .container .columns.eleven, .container .column.eleven { - width: 640px; } - .container .columns.twelve, .container .column.twelve { - width: 700px; } - .container .columns.thirteen, .container .column.thirteen { - width: 760px; } - .container .columns.fourteen, .container .column.fourteen { - width: 820px; } - .container .columns.fifteen, .container .column.fifteen { - width: 880px; } - .container .columns.sixteen, .container .column.sixteen { - width: 940px; } - .container .columns.one-third, .container .column.one-third { - width: 300px; } - .container .columns.two-thirds, .container .column.two-thirds { - width: 620px; } - .container .offset-by-one { - padding-left: 60px; } - .container .offset-by-two { - padding-left: 120px; } - .container .offset-by-three { - padding-left: 180px; } - .container .offset-by-four { - padding-left: 240px; } - .container .offset-by-five { - padding-left: 300px; } - .container .offset-by-six { - padding-left: 360px; } - .container .offset-by-seven { - padding-left: 420px; } - .container .offset-by-eight { - padding-left: 480px; } - .container .offset-by-nine { - padding-left: 540px; } - .container .offset-by-ten { - padding-left: 600px; } - .container .offset-by-eleven { - padding-left: 660px; } - .container .offset-by-twelve { - padding-left: 720px; } - .container .offset-by-thirteen { - padding-left: 780px; } - .container .offset-by-fourteen { - padding-left: 840px; } - .container .offset-by-fifteen { - padding-left: 900px; } - -@media only screen and (max-width: 959px) { - .container { - width: 768px; } - .container .columns.one, .container .column.one { - width: 28px; } - .container .columns.two, .container .column.two { - width: 76px; } - .container .columns.three, .container .column.three { - width: 124px; } - .container .columns.four, .container .column.four { - width: 172px; } - .container .columns.five, .container .column.five { - width: 220px; } - .container .columns.six, .container .column.six { - width: 268px; } - .container .columns.seven, .container .column.seven { - width: 316px; } - .container .columns.eight, .container .column.eight { - width: 364px; } - .container .columns.nine, .container .column.nine { - width: 412px; } - .container .columns.ten, .container .column.ten { - width: 460px; } - .container .columns.eleven, .container .column.eleven { - width: 508px; } - .container .columns.twelve, .container .column.twelve { - width: 556px; } - .container .columns.thirteen, .container .column.thirteen { - width: 604px; } - .container .columns.fourteen, .container .column.fourteen { - width: 652px; } - .container .columns.fifteen, .container .column.fifteen { - width: 700px; } - .container .columns.sixteen, .container .column.sixteen { - width: 748px; } - .container .columns.one-third, .container .column.one-third { - width: 236px; } - .container .columns.two-thirds, .container .column.two-thirds { - width: 492px; } - .container .offset-by-one { - padding-left: 48px; } - .container .offset-by-two { - padding-left: 96px; } - .container .offset-by-three { - padding-left: 144px; } - .container .offset-by-four { - padding-left: 192px; } - .container .offset-by-five { - padding-left: 240px; } - .container .offset-by-six { - padding-left: 288px; } - .container .offset-by-seven { - padding-left: 336px; } - .container .offset-by-eight { - padding-left: 384px; } - .container .offset-by-nine { - padding-left: 432px; } - .container .offset-by-ten { - padding-left: 480px; } - .container .offset-by-eleven { - padding-left: 528px; } - .container .offset-by-twelve { - padding-left: 576px; } - .container .offset-by-thirteen { - padding-left: 624px; } - .container .offset-by-fourteen { - padding-left: 672px; } - .container .offset-by-fifteen { - padding-left: 720px; } - - .container { - width: 768px; } - - .column.alpha, .columns.alpha { - margin-right: 10px; } - .column.omega, .columns.omega { - margin-left: 10px; } - - .alpha.omega { - margin-right: 0; - margin-left: 0; } } -@media only screen and (max-width: 767px) { - .container { - width: 90%; } - .container .column, .container .columns { - margin: 0; } - .container .column.one, .container .column.two, .container .column.three, .container .column.four, .container .column.five, .container .column.six, .container .column.seven, .container .column.eight, .container .column.nine, .container .column.ten, .container .column.eleven, .container .column.twelve, .container .column.thirteen, .container .column.fourteen, .container .column.fifteen, .container .column.sixteen, .container .column.one-third, .container .column.two-thirds, .container .columns.one, .container .columns.two, .container .columns.three, .container .columns.four, .container .columns.five, .container .columns.six, .container .columns.seven, .container .columns.eight, .container .columns.nine, .container .columns.ten, .container .columns.eleven, .container .columns.twelve, .container .columns.thirteen, .container .columns.fourteen, .container .columns.fifteen, .container .columns.sixteen, .container .columns.one-third, .container .columns.two-thirds { - width: 100%; } - .container .offset-by-one, - .container .offset-by-two, - .container .offset-by-three, - .container .offset-by-four, - .container .offset-by-five, - .container .offset-by-six, - .container .offset-by-seven, - .container .offset-by-eight, - .container .offset-by-nine, - .container .offset-by-ten, - .container .offset-by-eleven, - .container .offset-by-twelve, - .container .offset-by-thirteen, - .container .offset-by-fourteen, - .container .offset-by-fifteen { - padding-left: 0; } } -/* #Clearing -================================================== */ -/* Self Clearing Goodness */ -.container:after { - content: "\0020"; - display: block; - height: 0; - clear: both; - visibility: hidden; } - -/* Use clearfix class on parent to clear nested columns, -or wrap each row of columns in a
*/ -.clearfix:before, -.clearfix:after, -.row:before, -.row:after { - content: '\0020'; - display: block; - overflow: hidden; - visibility: hidden; - width: 0; - height: 0; } - -.row:after, -.clearfix:after { - clear: both; } - -.row, -.clearfix { - zoom: 1; } - -/* You can also use a
to clear columns */ -.clear { - clear: both; - display: block; - overflow: hidden; - visibility: hidden; - width: 0; - height: 0; } - -/* #Typography -================================================== */ -/* @font-face { - font-family: 'FontName'; - src: url('../fonts/FontName.eot'); - src: url('../fonts/FontName.eot?iefix') format('eot'), - url('../fonts/FontName.woff') format('woff'), - url('../fonts/FontName.ttf') format('truetype'), - url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); - font-weight: normal; - font-style: normal; } -*/ -h1, h2, h3, h4, h5, h6 { - color: #181818; - font-family: "Georgia", "Times New Roman", serif; - font-weight: normal; } - -h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { - font-weight: inherit; } - -h1 { - font-size: 46px; - line-height: 50px; - margin: 0 0 14px 0; } - -h2 { - font-size: 35px; - line-height: 40px; - margin: 0 0 10px 0; } - -h3 { - font-size: 28px; - line-height: 34px; - margin: 0 0 8px 0; } - -h4 { - font-size: 21px; - line-height: 30px; - margin: 0 0 4px 0; } - -h5 { - font-size: 17px; - line-height: 24px; } - -h6 { - font-size: 14px; - line-height: 21px; } - -.subheader { - color: #777777; } - -p { - margin: 0 0 20px 0; } - -p img { - margin: 0; } - -p.lead { - font-size: 21px; - line-height: 27px; - color: #777777; } - -em { - font-style: italic; } - -strong { - font-weight: bold; - color: #333333; } - -small { - font-size: 80%; } - -/* Blockquotes */ -blockquote, blockquote p { - font-size: 17px; - line-height: 24px; - color: #777777; - font-style: italic; } - -blockquote { - margin: 0 0 20px; - padding: 9px 20px 0 19px; - border-left: 1px solid #dddddd; } - -blockquote cite { - display: block; - font-size: 12px; - color: #555555; } - -blockquote cite:before { - content: "\2014 \0020"; } - -blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { - color: #555555; } - -/* not really typographical, but I couldnt find anywhere else to put it */ -hr { - border: solid #dddddd; - border-width: 1px 0 0; - clear: both; - margin: 10px 0 30px; - height: 0; } - -/* #Links -================================================== */ -a, a:visited { - color: #333333; - text-decoration: underline; - outline: 0; } - -a:hover, a:focus { - color: black; - text-decoration: none; } - -p a, p a:visited { - line-height: inherit; } - -/* #Lists -================================================== */ -ul, ol { - margin: 0 0 20px 0; } - -ul { - list-style: none outside; } - -ol { - list-style: decimal; } - -ol, ul.square, ul.circle, ul.disc { - margin: 0 0 0 30px; } - -ul.square { - list-style: square outside; } - -ul.circle { - list-style: circle outside; } - -ul.disc { - list-style: disc outside; } - -ul ul, ul ol, -ol ol, ol ul { - margin: 4px 0 5px 30px; - font-size: 90%; } - -li { - line-height: 18px; - margin: 0 0 12px 0; } - -ul.large li { - line-height: 21px; } - -li p { - line-height: 21px; } - -/* #Buttons -================================================== */ -.button, -button, -input[type="submit"], -input[type="reset"], -input[type="button"] { - background-color: rgba(153, 153, 153, 0.2); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2))); - background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-repeat: repeat-x; - border: 1px solid #aaaaaa; - border-top: 1px solid #cccccc; - border-left: 1px solid #cccccc; - border-radius: 3px; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - color: #444444; - display: inline-block; - font-size: 11px; - font-weight: bold; - text-decoration: none; - text-shadow: 0 1px rgba(255, 255, 255, 0.75); - cursor: pointer; - margin: 0 0 20px 0; - line-height: normal; - padding: 8px 10px; - font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; } - -.button:hover, -button:hover, -input[type="submit"]:hover, -input[type="reset"]:hover, -input[type="button"]:hover { - background-color: rgba(153, 153, 153, 0.3); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.3)), to(rgba(0, 0, 0, 0.3))); - background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); - background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); - background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); - background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.3)); - background-repeat: repeat-x; - color: #222222; - border: 1px solid #888888; - border-top: 1px solid #aaaaaa; - border-left: 1px solid #aaaaaa; } - -.button:active, -button:active, -input[type="submit"]:active, -input[type="reset"]:active, -input[type="button"]:active { - background-color: rgba(153, 153, 153, 0.2); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.2)), to(rgba(0, 0, 0, 0.2))); - background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)); - background-repeat: repeat-x; - border: 1px solid #666666; } - -.button.full-width, -button.full-width, -input[type="submit"].full-width, -input[type="reset"].full-width, -input[type="button"].full-width { - width: 100%; - padding-left: 0 !important; - padding-right: 0 !important; - text-align: center; } - -/* Fix for odd Mozilla border & padding issues */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } - -/* #Forms -================================================== */ -form { - margin: 0 0 20px 0; } - -fieldset { - margin: 0 0 20px 0; } - -input[type="search"], -input[type="url"] { - -webkit-appearance: textfield; - -moz-appearance: textfield; } - -input[type="text"], -input[type="password"], -input[type="email"], -input[type="search"], -input[type="url"], -input[type="number"], -input[type="tel"], -textarea, -select { - border: 1px solid #cccccc; - padding: 6px 4px; - outline: none; - border-radius: 2px; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #777777; - width: 210px; - max-width: 100%; - display: block; - margin: 0 0 20px 0; - background: white; } - -select { - padding: 0; } - -input[type="text"]:focus, -input[type="password"]:focus, -input[type="email"]:focus, -input[type="search"]:focus, -input[type="url"]:focus, -input[type="number"]:focus, -input[type="tel"]:focus, -textarea:focus { - border: 1px solid #aaaaaa; - color: #444444; - -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); - -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); - box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); } - -textarea { - min-height: 60px; } - -label, -legend { - display: block; - font-weight: bold; - font-size: 13px; } - -select { - width: 220px; } - -input[type="checkbox"] { - display: inline; } - -label span, -legend span { - font-weight: normal; - font-size: 13px; - color: #444444; } - -/* #Images -================================================== */ -img.scale-with-grid { - max-width: 100%; - height: auto; } - -/* #Media Queries -================================================== */ -/* Smaller than standard 960 (devices and browsers) */ -/* Tablet Portrait size to standard 960 (devices and browsers) */ -/* All Mobile Sizes (devices and browser) */ -/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ -/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ diff --git a/package.json b/package.json new file mode 100644 index 0000000..3ea9e90 --- /dev/null +++ b/package.json @@ -0,0 +1,36 @@ +{ + "name": "Skeleton-SCSS", + "title": "Skeleton SCSS", + "description": "Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development.", + "version": "1.0.0", + "homepage": "https://github.com/nickpack/Skeleton-SCSS", + "author": { + "name": "Nick Pack", + "email": "nick@nickpack.com", + "url": "http://0xdeadfa11.net" + }, + "repository": { + "type": "git", + "url": "git@github.com:nickpack/Skeleton-SCSS.git" + }, + "bugs": { + "url": "https://github.com/nickpack/Skeleton-SCSS/issues" + }, + "licenses": [ + { + "type": "MIT", + "url": "https://github.com/nickpack/Skeleton-SCSS/blob/master/LICENSE-MIT" + } + ], + "main": "./index", + "keywords": [ + "static" + ], + "devDependencies": { + "grunt": "~0.4.1", + "grunt-contrib-watch": "~0.3.1", + "grunt-contrib-sass": "~0.3.0", + "grunt-contrib-csslint": "~0.1.1", + "grunt-contrib-cssmin": "~0.5.0" + } +} \ No newline at end of file