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