From 631f3f6f277b1778efd00515087ae2553dd93fdb Mon Sep 17 00:00:00 2001 From: Mike Francis Date: Fri, 20 Jun 2014 15:59:08 +0100 Subject: [PATCH] Organised sass folders --- .gitignore | 2 +- Gruntfile.js | 52 +++++--- README.md | 19 +-- css-tests.php | 173 ++++++++++++++++++++++++++ css/_layout.scss | 4 - css/style.scss | 34 ----- package.json | 7 +- {css => scss}/_vars.scss | 4 +- {css => scss/base}/_forms.scss | 0 {css => scss/base}/_normalise.scss | 0 {css => scss/generic}/_mixins.scss | 8 +- {css => scss/generic}/_reset.scss | 0 {css => scss/generic}/_utilities.scss | 0 {css => scss/modules}/_buttons.scss | 0 {css => scss/modules}/_nav.scss | 0 scss/style.scss | 16 +++ style.css | 2 +- 17 files changed, 238 insertions(+), 83 deletions(-) create mode 100644 css-tests.php delete mode 100644 css/_layout.scss delete mode 100755 css/style.scss rename {css => scss}/_vars.scss (82%) rename {css => scss/base}/_forms.scss (100%) rename {css => scss/base}/_normalise.scss (100%) rename {css => scss/generic}/_mixins.scss (82%) rename {css => scss/generic}/_reset.scss (100%) rename {css => scss/generic}/_utilities.scss (100%) rename {css => scss/modules}/_buttons.scss (100%) rename {css => scss/modules}/_nav.scss (100%) create mode 100755 scss/style.scss diff --git a/.gitignore b/.gitignore index 916947e..af09c70 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,6 @@ npm-debug.log .sass-cache node_modules -css-test.html +css-test.php css/bourbon css/neat \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js index 5da59c2..43cad90 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,14 +1,26 @@ module.exports = function(grunt) { + + var paths = { + img: 'img/' + }; grunt.initConfig({ - imagemin: { - dynamic: { - files: [{ - expand: true, - cwd: 'img/', - src: ['*.{png,jpg,gif}'], - dest: 'img/' - }] + compass: { + options: { + config: 'config.rb', + bundleExec: true + }, + dev: { + options: { + specify: 'scss/style.scss', + } + }, + prod: {} + }, + imageoptim: { + src: [paths.img], + options: { + quitAfter: true } }, sass: { @@ -16,7 +28,7 @@ module.exports = function(grunt) { options: { style: 'compressed' }, - files: { 'style.css': 'css/style.scss' } + files: { 'style.css': 'scss/style.scss' } } }, svgmin: { @@ -28,9 +40,9 @@ module.exports = function(grunt) { dist: { files: [{ expand: true, - cwd: 'img/', + cwd: paths.img, src: ['*.svg'], - dest: 'img/', + dest: paths.img, ext: '.svg' }], } @@ -38,8 +50,8 @@ module.exports = function(grunt) { svg2png: { all: { files: [{ - src: ['img/*.svg'], - dest: 'img/' + src: [paths.img + '*.svg'], + dest: paths.img }], } }, @@ -53,7 +65,7 @@ module.exports = function(grunt) { }, watch: { css: { - files: ['css/*.scss'], + files: ['scss/**/*.scss'], tasks: ['sass'], options: { livereload: true @@ -66,15 +78,15 @@ module.exports = function(grunt) { } }); - - grunt.loadNpmTasks('grunt-contrib-imagemin'); + grunt.loadNpmTasks('grunt-contrib-compass'); + grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-sass'); + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-imageoptim'); grunt.loadNpmTasks('grunt-svg2png'); grunt.loadNpmTasks('grunt-svgmin'); - grunt.loadNpmTasks('grunt-contrib-watch'); - grunt.loadNpmTasks('grunt-contrib-uglify'); - grunt.loadNpmTasks('grunt-contrib-jshint'); - grunt.registerTask('default', ['imagemin', 'sass', 'svgmin', 'svg2png', 'watch', 'uglify', 'jshint']); + grunt.registerTask('default', ['imageoptim', 'sass', 'svgmin', 'svg2png', 'watch', 'uglify', 'jshint']); }; diff --git a/README.md b/README.md index 4bed29e..6e38cda 100644 --- a/README.md +++ b/README.md @@ -21,8 +21,6 @@ A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond. The ### Dependencies -* Bourbon gem -* Neat gem * Node.js * Grunt.js @@ -30,20 +28,9 @@ A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond. The * [LiveReload Chrome plugin](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei) -Clone/download the barebones repositories into your WordPress /wp-content/themes/ directory, then open /barebones/ in a command line tool, such as Mac Terminal, then first install the bourbon/neat gems if you haven't already: +Clone/download the barebones repositories into your WordPress /wp-content/themes/ directory and run the following to install all of this project's Grunt dependencies: - $ gem install bourbon - $ gem install neat - -Then install bourbon/neat to the theme's css folder - - $ cd css - $ bourbon install - $ neat install - - and run the following to install all of this project's Grunt dependencies: - - $ npm install --save-dev + $ npm install Then run `grunt`: @@ -62,4 +49,4 @@ Compatible with WordPress 3.2 and above, but always use the latest version. ## Roadmap -* Organisation of Sass folders \ No newline at end of file +* -[Organisation of Sass folders] \ No newline at end of file diff --git a/css-tests.php b/css-tests.php new file mode 100644 index 0000000..d3ba4c6 --- /dev/null +++ b/css-tests.php @@ -0,0 +1,173 @@ + + + + + +
+
+

Grids

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Typography

+

Heading 1

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, quaerat magni omnis vero veritatis repellendus architecto ut et! Aliquam, eligendi, culpa neque natus consequuntur expedita facilis inventore nulla dolore incidunt.

+

Heading 2

+

Laudantium, eaque, est, quod commodi tenetur repellat iusto reiciendis dolore consequuntur voluptate magni ratione omnis minima quibusdam illo vitae officia iure sapiente impedit animi corrupti labore odit qui voluptates beatae.

+

Heading 3

+

Dolore, fugiat quia consequuntur fuga laboriosam tempore! Dicta, sequi, voluptates sint corporis aliquam eligendi repellat. Optio, in, dolore, modi, voluptas tenetur vel reprehenderit numquam fugit unde labore quos doloremque aperiam.

+

Heading 4

+

Numquam, similique, cupiditate, eaque quam est accusamus molestias consectetur earum ea voluptatem ratione necessitatibus? Est, dolorem debitis officiis aliquid deleniti exercitationem aspernatur quo eos eligendi similique sapiente laboriosam vero voluptas.

+
Heading 5
+

Praesentium, ipsa beatae veritatis quasi laborum adipisci facere vel est repudiandae ipsum deleniti consequuntur recusandae aspernatur officia cumque tempora porro officiis amet nemo at! Dolor explicabo recusandae eum esse harum.

+
Heading 6
+

Facilis, atque in vitae voluptas illum ducimus qui dolor provident doloremque quibusdam delectus quasi autem nobis deleniti at consectetur ullam! Voluptas, officia, recusandae impedit unde atque illum quis nemo dolore.

+
    +
  • Lorem ipsum dolor sit amet.
    • +
  • Sapiente, repellendus sunt sint suscipit.
    • +
  • Cumque sint debitis aspernatur accusantium!
    • +
  • Quisquam magni culpa molestiae ipsa! +
      +
    • Voluptatum neque a libero enim.
      • +
    • Quisquam exercitationem modi distinctio veritatis?
      • +
    • Adipisci aspernatur perferendis veniam illo.
      • +
    • Placeat dolorem maiores rerum error!
      • +
    +
    • +
  • Non hic quaerat corrupti quia.
    • +
  • Distinctio dolor harum accusantium error.
    • +
+
    +
  1. Lorem ipsum dolor sit amet.
    2. +
  2. Id dolor harum neque eius!
    3. +
  3. Quod soluta quam est temporibus.
    4. +
  4. Minima ab perspiciatis sed possimus!
    5. +
  5. Blanditiis, dicta mollitia quam modi.
    6. +
+
+
+

Forms

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + + +
+
+
+ +
+ + + +
+
+
+ + Cancel +
+
+
+
+
+ + \ No newline at end of file diff --git a/css/_layout.scss b/css/_layout.scss deleted file mode 100644 index a39e2d6..0000000 --- a/css/_layout.scss +++ /dev/null @@ -1,4 +0,0 @@ -.container { - @include outer-container; - padding: 0 ($gutter * 1px); -} \ No newline at end of file diff --git a/css/style.scss b/css/style.scss deleted file mode 100755 index e33b244..0000000 --- a/css/style.scss +++ /dev/null @@ -1,34 +0,0 @@ -/* -Theme Name: Bare Bones -Theme URI: http://github.com/mikefrancis/barebones -Author: Mike Francis -*/ - -// neat.bourbon.io grid system - -@import 'bourbon/bourbon'; -@import 'neat/neat'; - -// Variables, Mixins - -@import 'vars'; -@import 'mixins'; - -// Generic - -@import 'reset'; -@import 'normalise'; -@import 'utilities'; - -// Layout, Scaffolding - -@import 'layout'; - -// Form, Buttons - -@import 'forms'; -@import 'buttons'; - -// Nav abstraction, Navs - -@import 'nav'; \ No newline at end of file diff --git a/package.json b/package.json index 26f8444..aeef351 100755 --- a/package.json +++ b/package.json @@ -5,10 +5,11 @@ "grunt": "~0.4.2", "grunt-contrib-sass": "~0.5.0", "grunt-contrib-watch": "~0.5.3", - "grunt-contrib-imagemin": "~0.5.0", + "grunt-contrib-imageoptim": "~0.9.6", "grunt-svg2png": "~0.2.0", "grunt-svgmin": "~0.4.0", "grunt-contrib-uglify": "~0.4.0", - "grunt-contrib-jshint": "~0.10.0" + "grunt-contrib-jshint": "~0.10.0", + "grunt-contrib-compass": "~0.8.0" } -} \ No newline at end of file +} diff --git a/css/_vars.scss b/scss/_vars.scss similarity index 82% rename from css/_vars.scss rename to scss/_vars.scss index 4121b23..5d95abb 100755 --- a/css/_vars.scss +++ b/scss/_vars.scss @@ -16,8 +16,6 @@ $breakpoint-large: 1200px; // Scaffolding -$max-width: 1200px; -$grid-columns: 12; -$gutter: 20; + // Custom colours etc. \ No newline at end of file diff --git a/css/_forms.scss b/scss/base/_forms.scss similarity index 100% rename from css/_forms.scss rename to scss/base/_forms.scss diff --git a/css/_normalise.scss b/scss/base/_normalise.scss similarity index 100% rename from css/_normalise.scss rename to scss/base/_normalise.scss diff --git a/css/_mixins.scss b/scss/generic/_mixins.scss similarity index 82% rename from css/_mixins.scss rename to scss/generic/_mixins.scss index d14e402..cca8fcf 100755 --- a/css/_mixins.scss +++ b/scss/generic/_mixins.scss @@ -1,4 +1,10 @@ -@mixin media($size) { +@mixin resp-min($size) { + @media screen and (min-width: $size) { + @content; + } +} + +@mixin resp-max($size) { @media screen and (max-width: $size) { @content; } diff --git a/css/_reset.scss b/scss/generic/_reset.scss similarity index 100% rename from css/_reset.scss rename to scss/generic/_reset.scss diff --git a/css/_utilities.scss b/scss/generic/_utilities.scss similarity index 100% rename from css/_utilities.scss rename to scss/generic/_utilities.scss diff --git a/css/_buttons.scss b/scss/modules/_buttons.scss similarity index 100% rename from css/_buttons.scss rename to scss/modules/_buttons.scss diff --git a/css/_nav.scss b/scss/modules/_nav.scss similarity index 100% rename from css/_nav.scss rename to scss/modules/_nav.scss diff --git a/scss/style.scss b/scss/style.scss new file mode 100755 index 0000000..ba3ca1b --- /dev/null +++ b/scss/style.scss @@ -0,0 +1,16 @@ +/* +Theme Name: Bare Bones +Theme URI: http://github.com/mikefrancis/barebones +Author: Mike Francis +*/ + +@import 'vars'; + +@import 'generic/reset'; +@import 'generic/utilities'; +@import 'generic/mixins'; +@import 'base/normalise'; +@import 'base/forms'; + +@import 'modules/nav'; +@import 'modules/buttons'; \ No newline at end of file diff --git a/style.css b/style.css index fa2f17d..7229c88 100644 --- a/style.css +++ b/style.css @@ -1 +1 @@ -*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}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{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block}address,caption,cite,dfn,th,var{font-style:normal;font-weight:normal}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}th{font-weight:bold;text-align:left}html{background-color:#fff;color:#444;font:100%/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;min-height:100%}a{color:#444;text-decoration:none}h1,h2,h3,h4,h5,h6,p,hr,ul,ol{margin-bottom:24px}h1,h2,h3,h4,h5,h6{line-height:24px}h1{font-size:32px;font-size:2rem}h2{font-size:28px;font-size:1.75rem}h3{font-size:24px;font-size:1.5rem}h4{font-size:20px;font-size:1.25rem}h5,h6{font-size:16px;font-size:1rem}ul,ol{margin-left:24px}ul ul,ol ol{margin-bottom:0}img{display:block;height:auto;max-width:100%}blockquote{font-family:serif;padding-left:24px}em{font-style:italic}hr{background-color:#444;border:0;color:#444;height:1px}h1,h2,h3,h4,h5,h6,strong,th{font-weight:bold}table{width:100%}table th,table td{padding:6px;text-align:left}.alignleft{float:left}img.alignleft{margin-right:24px}.alignright{float:right}img.alignright{margin-left:24px}.aligncenter{display:block;margin-left:auto;margin-right:auto}img.aligncenter{margin-bottom:24px}.clearfix:before,.form__group .form__group__controls:before,.clearfix:after,.form__group .form__group__controls:after{content:'';display:table;line-height:0}.clearfix:after,.form__group .form__group__controls:after{clear:both}.container{*zoom:1;max-width:1200px;margin-left:auto;margin-right:auto;padding:0 20px}.container:before,.container:after{content:" ";display:table}.container:after{clear:both}input,select,textarea{background-color:#fff;border:solid 1px #444;color:#444;display:inline-block;font:inherit;line-height:24px;padding:6px;width:100%}input[type="checkbox"],input[type="radio"]{background:transparent;border:0;width:auto}label{display:block;font-weight:bold}select{height:36px}textarea{min-height:96px}.form__group{margin-bottom:24px}.form__group .form__group__controls label{font-weight:normal}.form__group .form__group__controls.form__group__controls--inline label{display:inline-block}.btn{background-color:#444;border:0;color:#fff;cursor:pointer;display:inline-block;font:inherit;font-weight:bold;height:36px;line-height:36px;padding:0 24px;text-align:center;width:auto}.nav{list-style:none;margin:0}.nav>li{display:inline-block}.nav>li>a{display:block} +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{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block}address,caption,cite,dfn,th,var{font-style:normal;font-weight:normal}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}th{font-weight:bold;text-align:left}.alignleft{float:left}img.alignleft{margin-right:24px}.alignright{float:right}img.alignright{margin-left:24px}.aligncenter{display:block;margin-left:auto;margin-right:auto}img.aligncenter{margin-bottom:24px}.clearfix:before,.form__group .form__group__controls:before,.clearfix:after,.form__group .form__group__controls:after{content:'';display:table;line-height:0}.clearfix:after,.form__group .form__group__controls:after{clear:both}*{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility}html{background-color:#fff;color:#444;font:100%/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif;min-height:100%}a{color:#444;text-decoration:none}h1,h2,h3,h4,h5,h6,p,hr,ul,ol{margin-bottom:24px}h1,h2,h3,h4,h5,h6{line-height:24px}h1{font-size:32px;font-size:2rem}h2{font-size:28px;font-size:1.75rem}h3{font-size:24px;font-size:1.5rem}h4{font-size:20px;font-size:1.25rem}h5,h6{font-size:16px;font-size:1rem}ul,ol{margin-left:24px}ul ul,ol ol{margin-bottom:0}img{display:block;height:auto;max-width:100%}blockquote{font-family:serif;padding-left:24px}em{font-style:italic}hr{background-color:#444;border:0;color:#444;height:1px}h1,h2,h3,h4,h5,h6,strong,th{font-weight:bold}table{width:100%}table th,table td{padding:6px;text-align:left}input,select,textarea{background-color:#fff;border:solid 1px #444;color:#444;display:inline-block;font:inherit;line-height:24px;padding:6px;width:100%}input[type="checkbox"],input[type="radio"]{background:transparent;border:0;width:auto}label{display:block;font-weight:bold}select{height:36px}textarea{min-height:96px}.form__group{margin-bottom:24px}.form__group .form__group__controls label{font-weight:normal}.form__group .form__group__controls.form__group__controls--inline label{display:inline-block}.nav{list-style:none;margin:0}.nav>li{display:inline-block}.nav>li>a{display:block}.btn{background-color:#444;border:0;color:#fff;cursor:pointer;display:inline-block;font:inherit;font-weight:bold;height:36px;line-height:36px;padding:0 24px;text-align:center;width:auto}