├── README.md ├── css ├── main.css └── main.css.map └── sass ├── base ├── _base.scss ├── _import-base.scss ├── _reset.scss └── _typography.scss ├── layout ├── _footer.scss ├── _forms.scss ├── _grid.scss ├── _header.scss ├── _import-layout.scss ├── _navigation.scss └── _sidebar.scss ├── main.scss ├── modules ├── _buttons.scss ├── _dropdown.scss ├── _import-modules.scss └── _thumbnails.scss ├── pages ├── _about.scss ├── _contact.scss ├── _home.scss └── _import-pages.scss ├── themes └── _import-themes.scss ├── utils ├── _functions.scss ├── _helpers.scss ├── _import-utils.scss ├── _mixins.scss └── _variables.scss ├── vendors-extensions └── _import-vendors-extensions.scss └── vendors └── _import-vendors.scss /README.md: -------------------------------------------------------------------------------- 1 | # 7-1 pattern SASS boilerplate 2 | Create organized stylesheets using [SASS](http://sass-lang.com) with the [7-1 pattern](http://sass-guidelin.es/#the-7-1-pattern). 3 | 4 | Within the sass folder, each subfolder contains a category of files that have specific functions. Those files get accumulated into '_import-***.scss'. Then, 'sass/main.scss' takes in all of the imports and interprets them into 'css/main.css'. 5 | 6 | Import order ensures that important rules don't get overriden and that proper cascading is preserved. 7 | 8 | A basic reset and clearfix are included in sass/base/reset.scss and sass/base/base.scss. 9 | -------------------------------------------------------------------------------- /css/main.css: -------------------------------------------------------------------------------- 1 | /* _-_-_- base/RESET -_-_-_ */ 2 | /* HTML5 display-role reset for older browsers */ 3 | article, aside, details, figcaption, figure, 4 | footer, header, hgroup, menu, nav, section { 5 | display: block; } 6 | 7 | body { 8 | line-height: 1; } 9 | 10 | ol, ul { 11 | list-style: none; } 12 | 13 | blockquote, q { 14 | quotes: none; } 15 | 16 | blockquote:before, blockquote:after, 17 | q:before, q:after { 18 | content: ''; 19 | content: none; } 20 | 21 | table { 22 | border-collapse: collapse; 23 | border-spacing: 0; } 24 | 25 | /* _-_-_- base/BASE -_-_-_ */ 26 | .clearfix { 27 | overflow: auto; 28 | zoom: 1; } 29 | 30 | /* _-_-_- base/TYPOGRAPHY -_-_-_ */ 31 | /* _-_-_- layout/FOOTER -_-_-_ */ 32 | /* _-_-_- layout/FORMS -_-_-_ */ 33 | /* _-_-_- layout/GRID -_-_-_ */ 34 | /* _-_-_- layout/HEADER -_-_-_ */ 35 | /* _-_-_- layout/NAVIGATION -_-_-_ */ 36 | /* _-_-_- layout/SIDEBAR -_-_-_ */ 37 | /* _-_-_- modules/BUTTONS -_-_-_ */ 38 | /* _-_-_- modules/DROPDOWN -_-_-_ */ 39 | /* _-_-_- modules/THUMBNAILS -_-_-_ */ 40 | /* _-_-_- pages/ABOUT -_-_-_ */ 41 | /* _-_-_- pages/CONTACT -_-_-_ */ 42 | /* _-_-_- pages/HOME -_-_-_ */ 43 | 44 | /*# sourceMappingURL=main.css.map */ 45 | -------------------------------------------------------------------------------- /css/main.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": ";;AAGA;0CAC2C;EAC1C,OAAO,EAAE,KAAK;;AAGf,IAAK;EACJ,WAAW,EAAE,CAAC;;AAGf,MAAO;EACN,UAAU,EAAE,IAAI;;AAGjB,aAAc;EACb,MAAM,EAAE,IAAI;;AAGb;iBACkB;EACjB,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,IAAI;;AAGd,KAAM;EACL,eAAe,EAAE,QAAQ;EACzB,cAAc,EAAE,CAAC;;;ACzBlB,SAAU;EACR,QAAQ,EAAE,IAAI;EACd,IAAI,EAAE,CAAC", 4 | "sources": ["../sass/base/_reset.scss","../sass/base/_base.scss"], 5 | "names": [], 6 | "file": "main.css" 7 | } 8 | -------------------------------------------------------------------------------- /sass/base/_base.scss: -------------------------------------------------------------------------------- 1 | /* _-_-_- base/BASE -_-_-_ */ 2 | @charset 'utf-8'; 3 | 4 | .clearfix { 5 | overflow: auto; 6 | zoom: 1; 7 | } -------------------------------------------------------------------------------- /sass/base/_import-base.scss: -------------------------------------------------------------------------------- 1 | @import 'reset'; 2 | @import 'base'; 3 | @import 'typography'; -------------------------------------------------------------------------------- /sass/base/_reset.scss: -------------------------------------------------------------------------------- 1 | /* _-_-_- base/RESET -_-_-_ */ 2 | 3 | /* HTML5 display-role reset for older browsers */ 4 | article, aside, details, figcaption, figure, 5 | footer, header, hgroup, menu, nav, section { 6 | display: block; 7 | } 8 | 9 | body { 10 | line-height: 1; 11 | } 12 | 13 | ol, ul { 14 | list-style: none; 15 | } 16 | 17 | blockquote, q { 18 | quotes: none; 19 | } 20 | 21 | blockquote:before, blockquote:after, 22 | q:before, q:after { 23 | content: ''; 24 | content: none; 25 | } 26 | 27 | table { 28 | border-collapse: collapse; 29 | border-spacing: 0; 30 | } -------------------------------------------------------------------------------- /sass/base/_typography.scss: -------------------------------------------------------------------------------- 1 | /* _-_-_- base/TYPOGRAPHY -_-_-_ */ -------------------------------------------------------------------------------- /sass/layout/_footer.scss: -------------------------------------------------------------------------------- 1 | /* _-_-_- layout/FOOTER -_-_-_ */ -------------------------------------------------------------------------------- /sass/layout/_forms.scss: -------------------------------------------------------------------------------- 1 | /* _-_-_- layout/FORMS -_-_-_ */ -------------------------------------------------------------------------------- /sass/layout/_grid.scss: -------------------------------------------------------------------------------- 1 | /* _-_-_- layout/GRID -_-_-_ */ -------------------------------------------------------------------------------- /sass/layout/_header.scss: -------------------------------------------------------------------------------- 1 | /* _-_-_- layout/HEADER -_-_-_ */ -------------------------------------------------------------------------------- /sass/layout/_import-layout.scss: -------------------------------------------------------------------------------- 1 | @import 'footer'; 2 | @import 'forms'; 3 | @import 'grid'; 4 | @import 'header'; 5 | @import 'navigation'; 6 | @import 'sidebar'; -------------------------------------------------------------------------------- /sass/layout/_navigation.scss: -------------------------------------------------------------------------------- 1 | /* _-_-_- layout/NAVIGATION -_-_-_ */ -------------------------------------------------------------------------------- /sass/layout/_sidebar.scss: -------------------------------------------------------------------------------- 1 | /* _-_-_- layout/SIDEBAR -_-_-_ */ -------------------------------------------------------------------------------- /sass/main.scss: -------------------------------------------------------------------------------- 1 | // Each line imports all SCSS files of a group 2 | 3 | // 3rd party frameworks 4 | @import 'vendors/import-vendors'; 5 | 6 | // User modifications of above frameworks 7 | @import 'vendors-extensions/import-vendors-extensions'; 8 | 9 | // Sass-related functions, mixins, variables, etc. 10 | @import 'utils/import-utils'; 11 | 12 | // Small changes that apply across all pages 13 | @import 'base/import-base'; 14 | 15 | // Sections of a page 16 | @import 'layout/import-layout'; 17 | 18 | // Smaller components 19 | @import 'modules/import-modules'; 20 | 21 | // Page-specific styles 22 | @import 'pages/import-pages'; 23 | 24 | // Changing site templates 25 | @import 'themes/import-themes'; 26 | -------------------------------------------------------------------------------- /sass/modules/_buttons.scss: -------------------------------------------------------------------------------- 1 | /* _-_-_- modules/BUTTONS -_-_-_ */ -------------------------------------------------------------------------------- /sass/modules/_dropdown.scss: -------------------------------------------------------------------------------- 1 | /* _-_-_- modules/DROPDOWN -_-_-_ */ -------------------------------------------------------------------------------- /sass/modules/_import-modules.scss: -------------------------------------------------------------------------------- 1 | @import 'buttons'; 2 | @import 'dropdown'; 3 | @import 'thumbnails'; -------------------------------------------------------------------------------- /sass/modules/_thumbnails.scss: -------------------------------------------------------------------------------- 1 | /* _-_-_- modules/THUMBNAILS -_-_-_ */ -------------------------------------------------------------------------------- /sass/pages/_about.scss: -------------------------------------------------------------------------------- 1 | /* _-_-_- pages/ABOUT -_-_-_ */ -------------------------------------------------------------------------------- /sass/pages/_contact.scss: -------------------------------------------------------------------------------- 1 | /* _-_-_- pages/CONTACT -_-_-_ */ -------------------------------------------------------------------------------- /sass/pages/_home.scss: -------------------------------------------------------------------------------- 1 | /* _-_-_- pages/HOME -_-_-_ */ -------------------------------------------------------------------------------- /sass/pages/_import-pages.scss: -------------------------------------------------------------------------------- 1 | @import 'about'; 2 | @import 'contact'; 3 | @import 'home'; -------------------------------------------------------------------------------- /sass/themes/_import-themes.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacenko/7-1-pattern-sass-boilerplate/3b08c2bb39beac891fb3f72dd6be47b2c3488df1/sass/themes/_import-themes.scss -------------------------------------------------------------------------------- /sass/utils/_functions.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacenko/7-1-pattern-sass-boilerplate/3b08c2bb39beac891fb3f72dd6be47b2c3488df1/sass/utils/_functions.scss -------------------------------------------------------------------------------- /sass/utils/_helpers.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacenko/7-1-pattern-sass-boilerplate/3b08c2bb39beac891fb3f72dd6be47b2c3488df1/sass/utils/_helpers.scss -------------------------------------------------------------------------------- /sass/utils/_import-utils.scss: -------------------------------------------------------------------------------- 1 | @import 'functions'; 2 | @import 'helpers'; 3 | @import 'mixins'; 4 | @import 'variables'; -------------------------------------------------------------------------------- /sass/utils/_mixins.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacenko/7-1-pattern-sass-boilerplate/3b08c2bb39beac891fb3f72dd6be47b2c3488df1/sass/utils/_mixins.scss -------------------------------------------------------------------------------- /sass/utils/_variables.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacenko/7-1-pattern-sass-boilerplate/3b08c2bb39beac891fb3f72dd6be47b2c3488df1/sass/utils/_variables.scss -------------------------------------------------------------------------------- /sass/vendors-extensions/_import-vendors-extensions.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacenko/7-1-pattern-sass-boilerplate/3b08c2bb39beac891fb3f72dd6be47b2c3488df1/sass/vendors-extensions/_import-vendors-extensions.scss -------------------------------------------------------------------------------- /sass/vendors/_import-vendors.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jacenko/7-1-pattern-sass-boilerplate/3b08c2bb39beac891fb3f72dd6be47b2c3488df1/sass/vendors/_import-vendors.scss --------------------------------------------------------------------------------