├── objects ├── extends │ └── .gitprop ├── _main.scss └── _critical.scss ├── .gitignore ├── base ├── _main.scss └── _critical.scss ├── tools └── _main.scss ├── generic ├── _main.scss └── _critical.scss ├── settings └── _main.scss ├── trumps ├── _main.scss └── _critical.scss ├── vendor ├── _main.scss └── _critical.scss ├── components ├── _main.scss └── _critical.scss ├── README.md ├── main.scss └── critical.scss /objects/extends/.gitprop: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.sublime-* -------------------------------------------------------------------------------- /base/_main.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * base/_main.scss 3 | */ 4 | 5 | /* ========================================================================== 6 | Imports 7 | ========================================================================== */ 8 | 9 | // @import ""; 10 | -------------------------------------------------------------------------------- /tools/_main.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * tools/_main.scss 3 | */ 4 | 5 | /* ========================================================================== 6 | Imports 7 | ========================================================================== */ 8 | 9 | // @import ""; 10 | -------------------------------------------------------------------------------- /base/_critical.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * base/_critical.scss 3 | */ 4 | 5 | /* ========================================================================== 6 | Imports 7 | ========================================================================== */ 8 | 9 | // @import ""; 10 | -------------------------------------------------------------------------------- /generic/_main.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * generic/_main.scss 3 | */ 4 | 5 | /* ========================================================================== 6 | Imports 7 | ========================================================================== */ 8 | 9 | // @import ""; 10 | -------------------------------------------------------------------------------- /settings/_main.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * settings/_main.scss 3 | */ 4 | 5 | /* ========================================================================== 6 | Imports 7 | ========================================================================== */ 8 | 9 | // @import ""; 10 | -------------------------------------------------------------------------------- /trumps/_main.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * trumps/_main.scss 3 | */ 4 | 5 | /* ========================================================================== 6 | Imports 7 | ========================================================================== */ 8 | 9 | // @import ""; 10 | -------------------------------------------------------------------------------- /vendor/_main.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * vendor/_main.scss 3 | */ 4 | 5 | /* ========================================================================== 6 | Imports 7 | ========================================================================== */ 8 | 9 | // @import ""; 10 | -------------------------------------------------------------------------------- /components/_main.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * components/_main.scss 3 | */ 4 | 5 | /* ========================================================================== 6 | Imports 7 | ========================================================================== */ 8 | 9 | // @import ""; 10 | -------------------------------------------------------------------------------- /trumps/_critical.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * trumps/_critical.scss 3 | */ 4 | 5 | /* ========================================================================== 6 | Imports 7 | ========================================================================== */ 8 | 9 | // @import ""; 10 | -------------------------------------------------------------------------------- /vendor/_critical.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * vendor/_critical.scss 3 | */ 4 | 5 | /* ========================================================================== 6 | Imports 7 | ========================================================================== */ 8 | 9 | // @import ""; 10 | -------------------------------------------------------------------------------- /generic/_critical.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * generic/_critical.scss 3 | */ 4 | 5 | /* ========================================================================== 6 | Imports 7 | ========================================================================== */ 8 | 9 | // @import ""; 10 | -------------------------------------------------------------------------------- /components/_critical.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * components/_critical.scss 3 | */ 4 | 5 | /* ========================================================================== 6 | Imports 7 | ========================================================================== */ 8 | 9 | // @import ""; 10 | -------------------------------------------------------------------------------- /objects/_main.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * objects/_main.scss 3 | */ 4 | 5 | /* ========================================================================== 6 | Imports 7 | ========================================================================== */ 8 | 9 | /* Extends 10 | ========================================================================== */ 11 | 12 | // @import ""; 13 | 14 | /* Main 15 | ========================================================================== */ 16 | 17 | // @import ""; 18 | -------------------------------------------------------------------------------- /objects/_critical.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * objects/_critical.scss 3 | */ 4 | 5 | /* ========================================================================== 6 | Imports 7 | ========================================================================== */ 8 | 9 | /* Extends 10 | ========================================================================== */ 11 | 12 | // @import ""; 13 | 14 | /* Main 15 | ========================================================================== */ 16 | 17 | // @import ""; 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # itcss-boilerplate 2 | 3 | > Sass project boilerplate following the ITCSS (Inverted Triangle CSS) methodology 4 | 5 | ## What Is It? 6 | 7 | At [GPMD](http://www.gpmd.co.uk/) we've been using an ITCSS structure for our Sass projects for a while now. If you're interested in finding out more about ITCSS you can [watch this talk by Harry Roberts](http://youtu.be/1OKZOV-iLj4). 8 | 9 | For each new project I set up I keep finding myself creating the same directory and `@import` file structure. To speed things up I've generated this repo as a quick and easy starting point. 10 | 11 | ## What It Isn't 12 | 13 | This isn't a Sass framework. There is no actual SCSS or CSS included, it's just a bare-bones directory and `@import` file structure (for now...). 14 | 15 | --- 16 | 17 | Created by [Matt Bailey](http://mattbailey.io/). -------------------------------------------------------------------------------- /main.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /** 4 | * main.scss 5 | */ 6 | 7 | /* ========================================================================== 8 | Settings 9 | ========================================================================== */ 10 | 11 | /** 12 | * Variables. 13 | */ 14 | 15 | @import "settings/main"; 16 | 17 | /* ========================================================================== 18 | Tools 19 | ========================================================================== */ 20 | 21 | /** 22 | * Functions, mixins etc. 23 | */ 24 | 25 | @import "tools/main"; 26 | 27 | /* ========================================================================== 28 | Generic 29 | ========================================================================== */ 30 | 31 | /** 32 | * Low-specificity, far-reaching rulesets. 33 | */ 34 | 35 | @import "generic/main"; 36 | 37 | /* ========================================================================== 38 | Base 39 | ========================================================================== */ 40 | 41 | /** 42 | * Unclassed HTML elements. 43 | */ 44 | 45 | @import "base/main"; 46 | 47 | /* ========================================================================== 48 | Objects 49 | ========================================================================== */ 50 | 51 | /** 52 | * Design-free objects, abstractions and patterns. 53 | */ 54 | 55 | @import "objects/main"; 56 | 57 | /* ========================================================================== 58 | Vendor 59 | ========================================================================== */ 60 | 61 | /** 62 | * Third party components. 63 | */ 64 | 65 | @import "vendor/main"; 66 | 67 | /* ========================================================================== 68 | Components 69 | ========================================================================== */ 70 | 71 | /** 72 | * Components and widgets. 73 | */ 74 | 75 | @import "components/main"; 76 | 77 | /* ========================================================================== 78 | Trumps 79 | ========================================================================== */ 80 | 81 | /** 82 | * Helper classes and overrides. 83 | */ 84 | 85 | @import "trumps/main"; 86 | -------------------------------------------------------------------------------- /critical.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /** 4 | * critical.scss 5 | */ 6 | 7 | /* ========================================================================== 8 | Settings 9 | ========================================================================== */ 10 | 11 | /** 12 | * Variables. 13 | */ 14 | 15 | @import "settings/main"; 16 | 17 | /* ========================================================================== 18 | Tools 19 | ========================================================================== */ 20 | 21 | /** 22 | * Functions, mixins etc. 23 | */ 24 | 25 | @import "tools/main"; 26 | 27 | /* ========================================================================== 28 | Generic 29 | ========================================================================== */ 30 | 31 | /** 32 | * Low-specificity, far-reaching rulesets. 33 | */ 34 | 35 | @import "generic/critical"; 36 | 37 | /* ========================================================================== 38 | Base 39 | ========================================================================== */ 40 | 41 | /** 42 | * Unclassed HTML elements. 43 | */ 44 | 45 | @import "base/critical"; 46 | 47 | /* ========================================================================== 48 | Objects 49 | ========================================================================== */ 50 | 51 | /** 52 | * Design-free objects, abstractions and patterns. 53 | */ 54 | 55 | @import "objects/critical"; 56 | 57 | /* ========================================================================== 58 | Vendor 59 | ========================================================================== */ 60 | 61 | /** 62 | * Third party components. 63 | */ 64 | 65 | @import "vendor/critical"; 66 | 67 | /* ========================================================================== 68 | Components 69 | ========================================================================== */ 70 | 71 | /** 72 | * Components and widgets. 73 | */ 74 | 75 | @import "components/critical"; 76 | 77 | /* ========================================================================== 78 | Trumps 79 | ========================================================================== */ 80 | 81 | /** 82 | * Helper classes and overrides. 83 | */ 84 | 85 | @import "trumps/critical"; 86 | --------------------------------------------------------------------------------