MODERN SASS ARCHITECTURE 1 — // Modern Sass Architecture - #ASOSTechUI 2016

STUART ROBSON FRONT-END DEVELOPER www.alwaystwisted.com 2 — // Modern Sass Architecture - #ASOSTechUI 2016

MODERN SASS ARCHITECTURE 3 — // Modern Sass Architecture - #ASOSTechUI 2016

MODERN SASS ARCHITECTURE > folder and file structure > naming conventions > composing declarations > maintaining variables > documentation > when not to use Sass 4 — // Modern Sass Architecture - #ASOSTechUI 2016

FOLDER AND FILE STRUCTURE 5 — // Modern Sass Architecture - #ASOSTechUI 2016

6 — // Modern Sass Architecture - #ASOSTechUI 2016

7 — // Modern Sass Architecture - #ASOSTechUI 2016

8 — // Modern Sass Architecture - #ASOSTechUI 2016

9 — // Modern Sass Architecture - #ASOSTechUI 2016

10 — // Modern Sass Architecture - #ASOSTechUI 2016

11 — // Modern Sass Architecture - #ASOSTechUI 2016

12 — // Modern Sass Architecture - #ASOSTechUI 2016

RESPONSIVE WEB DESIGN 13 — // Modern Sass Architecture - #ASOSTechUI 2016

14 — // Modern Sass Architecture - #ASOSTechUI 2016

15 — // Modern Sass Architecture - #ASOSTechUI 2016

16 — // Modern Sass Architecture - #ASOSTechUI 2016

All we had was a single CSS file, longer than a sleepless night. — Hugo Giraudel 17 — // Modern Sass Architecture - #ASOSTechUI 2016

SPLITTING OUT OUR CSS 18 — // Modern Sass Architecture - #ASOSTechUI 2016

19 — // Modern Sass Architecture - #ASOSTechUI 2016

20 — // Modern Sass Architecture - #ASOSTechUI 2016

21 — // Modern Sass Architecture - #ASOSTechUI 2016

22 — // Modern Sass Architecture - #ASOSTechUI 2016

FILES EVERYWHERE 23 — // Modern Sass Architecture - #ASOSTechUI 2016

24 — // Modern Sass Architecture - #ASOSTechUI 2016

25 — // Modern Sass Architecture - #ASOSTechUI 2016

26 — // Modern Sass Architecture - #ASOSTechUI 2016

27 — // Modern Sass Architecture - #ASOSTechUI 2016

28 — // Modern Sass Architecture - #ASOSTechUI 2016

SASS GIVES YOU EXTRA 29 — // Modern Sass Architecture - #ASOSTechUI 2016

30 — // Modern Sass Architecture - #ASOSTechUI 2016

31 — // Modern Sass Architecture - #ASOSTechUI 2016

32 — // Modern Sass Architecture - #ASOSTechUI 2016

33 — // Modern Sass Architecture - #ASOSTechUI 2016

34 — // Modern Sass Architecture - #ASOSTechUI 2016

35 — // Modern Sass Architecture - #ASOSTechUI 2016

36 — // Modern Sass Architecture - #ASOSTechUI 2016

37 — // Modern Sass Architecture - #ASOSTechUI 2016

38 — // Modern Sass Architecture - #ASOSTechUI 2016

39 — // Modern Sass Architecture - #ASOSTechUI 2016

40 — // Modern Sass Architecture - #ASOSTechUI 2016

PARTIALS 41 — // Modern Sass Architecture - #ASOSTechUI 2016

42 — // Modern Sass Architecture - #ASOSTechUI 2016

43 — // Modern Sass Architecture - #ASOSTechUI 2016

PARTIAL-POCALYPSE 44 — // Modern Sass Architecture - #ASOSTechUI 2016

45 — // Modern Sass Architecture - #ASOSTechUI 2016

46 — // Modern Sass Architecture - #ASOSTechUI 2016

47 — // Modern Sass Architecture - #ASOSTechUI 2016

MODERN SASS ARCHITECTURE 48 — // Modern Sass Architecture - #ASOSTechUI 2016

A place for everything, and everything in its place — Mrs Beeton 49 — // Modern Sass Architecture - #ASOSTechUI 2016

50 — // Modern Sass Architecture - #ASOSTechUI 2016

7-1 Pattern — Hugo Giraudel 51 — // Modern Sass Architecture - #ASOSTechUI 2016

6-1 FOLDER STRUCTURE 52 — // Modern Sass Architecture - #ASOSTechUI 2016

53 — // Modern Sass Architecture - #ASOSTechUI 2016

BASE/ 54 — // Modern Sass Architecture - #ASOSTechUI 2016

BASE/ > reset or normalize > typography settings > primitive or atomic defaults > code for common HTML elements 55 — // Modern Sass Architecture - #ASOSTechUI 2016

56 — // Modern Sass Architecture - #ASOSTechUI 2016

COMPONENTS/ 57 — // Modern Sass Architecture - #ASOSTechUI 2016

COMPONENTS/ > smaller modules of a site > tabs, carousel, accordian 58 — // Modern Sass Architecture - #ASOSTechUI 2016

59 — // Modern Sass Architecture - #ASOSTechUI 2016

LAYOUTS/ 60 — // Modern Sass Architecture - #ASOSTechUI 2016

LAYOUTS/ > the layout of a site > header, footer, aside, main 61 — // Modern Sass Architecture - #ASOSTechUI 2016

62 — // Modern Sass Architecture - #ASOSTechUI 2016

PAGES/ 63 — // Modern Sass Architecture - #ASOSTechUI 2016

PAGES/ > the page specific code of a site > Sass files named after the page > _front-page.scss > _contact-page.scss 64 — // Modern Sass Architecture - #ASOSTechUI 2016

65 — // Modern Sass Architecture - #ASOSTechUI 2016

VENDOR/ 66 — // Modern Sass Architecture - #ASOSTechUI 2016

VENDOR/ > files written by others > external frameworks or libraries 67 — // Modern Sass Architecture - #ASOSTechUI 2016

68 — // Modern Sass Architecture - #ASOSTechUI 2016

CONFIG/ 69 — // Modern Sass Architecture - #ASOSTechUI 2016

CONFIG/ > Sass code that doesn’t compile CSS > tools and helpers > mixins, variables, functions 70 — // Modern Sass Architecture - #ASOSTechUI 2016

CONFIG/ |- config/ |-|- _variables.scss |-|- _functions.scss |-|- _mixins.scss |-|- _helpers.scss 71 — // Modern Sass Architecture - #ASOSTechUI 2016

_mixins.scss 72 — // Modern Sass Architecture - #ASOSTechUI 2016

73 — // Modern Sass Architecture - #ASOSTechUI 2016

_variables.scss 74 — // Modern Sass Architecture - #ASOSTechUI 2016

All we had was a single Sass variables file, longer than a sleepless night. — Stu Robson 75 — // Modern Sass Architecture - #ASOSTechUI 2016

634 LINES 76 — // Modern Sass Architecture - #ASOSTechUI 2016

77 — // Modern Sass Architecture - #ASOSTechUI 2016

_shame.scss 78 — // Modern Sass Architecture - #ASOSTechUI 2016

79 — // Modern Sass Architecture - #ASOSTechUI 2016

80 — // Modern Sass Architecture - #ASOSTechUI 2016

81 — // Modern Sass Architecture - #ASOSTechUI 2016

82 — // Modern Sass Architecture - #ASOSTechUI 2016

83 — // Modern Sass Architecture - #ASOSTechUI 2016

MODERN SASS ARCHITECTURE 84 — // Modern Sass Architecture - #ASOSTechUI 2016

NAMING CONVENTIONS 85 — // Modern Sass Architecture - #ASOSTechUI 2016

#header-navigation { float: left; } .main-navigation-link { list-style: none; } .main-navigation-signup-link { color: red; } 86 — // Modern Sass Architecture - #ASOSTechUI 2016

B.E.M. 87 — // Modern Sass Architecture - #ASOSTechUI 2016

B - BLOCK 88 — // Modern Sass Architecture - #ASOSTechUI 2016

E - ELEMENT 89 — // Modern Sass Architecture - #ASOSTechUI 2016

M - MODIFIER 90 — // Modern Sass Architecture - #ASOSTechUI 2016

.block { […] } .block__element { […] } .block—modifier { […] } .block__element—modifier { […] } 91 — // Modern Sass Architecture - #ASOSTechUI 2016

92 — // Modern Sass Architecture - #ASOSTechUI 2016

.nav { float: left; } .nav__link { list-style: none; } .nav__link—signup { color: red; } 93 — // Modern Sass Architecture - #ASOSTechUI 2016

94 — // Modern Sass Architecture - #ASOSTechUI 2016

95 — // Modern Sass Architecture - #ASOSTechUI 2016

MODERN SASS ARCHITECTURE 96 — // Modern Sass Architecture - #ASOSTechUI 2016

COMPOSING DECLARATIONS 97 — // Modern Sass Architecture - #ASOSTechUI 2016

HOW TO WRITE YOUR SASS 98 — // Modern Sass Architecture - #ASOSTechUI 2016

HOW TO WRITE YOUR CSS 99 — // Modern Sass Architecture - #ASOSTechUI 2016

MAKE THE RULES 100 — // Modern Sass Architecture - #ASOSTechUI 2016

single line or multi-line > ordering alphabetically or type > level of nesting 101 — // Modern Sass Architecture - #ASOSTechUI 2016

.component { background-color: #BADA55; border: 1px solid #000; height: 300px; width: 400px; } 102 — // Modern Sass Architecture - #ASOSTechUI 2016

.component { background-color: #BADA55; border: 1px solid #000; height: 300px; height: 270px; width: 400px; } 103 — // Modern Sass Architecture - #ASOSTechUI 2016

.component { background-color: #BADA55; border: 1px solid #000; height: 300px; width: 400px; .component__title { color: #070707; font-size: 2.4em; .component__title__link { text-decoration: none; } } } 104 — // Modern Sass Architecture - #ASOSTechUI 2016

.component { background-color: #BADA55; border: 1px solid #000; height: 300px; width: 400px; } .component__title { color: #070707; font-size: 2.4em; } .component__title__link { text-decoration: none; } 105 — // Modern Sass Architecture - #ASOSTechUI 2016

106 — // Modern Sass Architecture - #ASOSTechUI 2016

.component { // variables // extends // mixins // functions // CSS // parent selectors // media queries } 107 — // Modern Sass Architecture - #ASOSTechUI 2016

.component { $border-color: $color—alt-1; @include box-sizing(content); border: 1px solid $border-color; &:hover { border: none; } @include mq(768) { font-size: 2em; } } 108 — // Modern Sass Architecture - #ASOSTechUI 2016

109 — // Modern Sass Architecture - #ASOSTechUI 2016

CODE QUALITY AND CONSISTENCY 110 — // Modern Sass Architecture - #ASOSTechUI 2016

LINTING 111 — // Modern Sass Architecture - #ASOSTechUI 2016

112 — // Modern Sass Architecture - #ASOSTechUI 2016

113 — // Modern Sass Architecture - #ASOSTechUI 2016

114 — // Modern Sass Architecture - #ASOSTechUI 2016

MODERN SASS ARCHITECTURE 115 — // Modern Sass Architecture - #ASOSTechUI 2016

MAINTAINING VARIABLES 116 — // Modern Sass Architecture - #ASOSTechUI 2016

117 — // Modern Sass Architecture - #ASOSTechUI 2016

634 LINES 118 — // Modern Sass Architecture - #ASOSTechUI 2016

119 — // Modern Sass Architecture - #ASOSTechUI 2016

$red-border: #f01e1e; $orange-underline: #EE7600; .component { background-color: $orange-underline; } 120 — // Modern Sass Architecture - #ASOSTechUI 2016

$red: #f01e1e; $dark-orange: #EE7600; .component { background-color: $dark-orange; } 121 — // Modern Sass Architecture - #ASOSTechUI 2016

$red: #f01e1e; $dark-orange: #EE7600; $brand-color-1: $red; $brand-color-2: $dark-orange; 122 — // Modern Sass Architecture - #ASOSTechUI 2016

FOLLOW CLASSES 123 — // Modern Sass Architecture - #ASOSTechUI 2016

.border { border-top: 1px solid #f01e1e; } 124 — // Modern Sass Architecture - #ASOSTechUI 2016

$red: #f01e1e; .border { border-top: 1px solid $red; } 125 — // Modern Sass Architecture - #ASOSTechUI 2016

$red: #f01e1e; $border__color—main: $red; .border { border-top: 1px solid $border__color—main; } 126 — // Modern Sass Architecture - #ASOSTechUI 2016

OVER THE TOP 127 — // Modern Sass Architecture - #ASOSTechUI 2016

DON’T BE CUTE $text-sizing: ( mercury: ( large: ( font-size: 0.75rem, // 12px line-height: 1.125rem // 18px ) ), venus: ( large: ( font-size: 0.9375rem, // 15px line-height: 1.5rem // 24px ), medium: ( font-size: 0.875rem, // 14px line-height: 1.3125rem // 21px ), fromAdaptiveToFluid: ( font-size: 0.875rem, // 14px line-height: 1.3125rem // 21px ) ) } 128 — // Modern Sass Architecture - #ASOSTechUI 2016

MODERN SASS ARCHITECTURE 129 — // Modern Sass Architecture - #ASOSTechUI 2016

DOCUMENTATION 130 — // Modern Sass Architecture - #ASOSTechUI 2016

I always say, keep a diary and someday it’ll keep you. — Mae West 131 — // Modern Sass Architecture - #ASOSTechUI 2016

START WITH DOCUMENTATION 132 — // Modern Sass Architecture - #ASOSTechUI 2016

133 — // Modern Sass Architecture - #ASOSTechUI 2016

//

.classname

// // created by: Stuart Robson ( stu@alwaystwisted.com ) creation data: October 21, 2015 // // upadate by: update data: //

  1. Your text // =========================================================== Stuart Robson ( stu@alwaystwisted.com ) November 05, 2015 134 — // Modern Sass Architecture - #ASOSTechUI 2016

WHAT IT DOES 135 — // Modern Sass Architecture - #ASOSTechUI 2016

WHY IT’S NEEDED 136 — // Modern Sass Architecture - #ASOSTechUI 2016

WHERE TO USE IT 137 — // Modern Sass Architecture - #ASOSTechUI 2016

// ————————————————————————————————// note: Only use this on the home page. // ————————————————————————————————- 138 — // Modern Sass Architecture - #ASOSTechUI 2016

// todo: add support for IE7 139 — // Modern Sass Architecture - #ASOSTechUI 2016

README.MD 140 — // Modern Sass Architecture - #ASOSTechUI 2016

141 — // Modern Sass Architecture - #ASOSTechUI 2016

142 — // Modern Sass Architecture - #ASOSTechUI 2016

143 — // Modern Sass Architecture - #ASOSTechUI 2016

CODE FOR MAINTAINABILITY SO THE NEXT DEVELOPER DOESN’T HATE YOU 144 — // Modern Sass Architecture - #ASOSTechUI 2016

MODERN SASS ARCHITECTURE 145 — // Modern Sass Architecture - #ASOSTechUI 2016

WHEN NOT TO USE SASS 146 — // Modern Sass Architecture - #ASOSTechUI 2016

.component { background-color: #3C3C3C; background-image: -webkit-gradient(linear, left top, right top, from(#3C3C3C), to(#999999)); background-image: -webkit-linear-gradient(left, #3C3C3C, #999999); background-image: linear-gradient(left, #3C3C3C, #999999); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#3C3C3C’, endColorStr=’#999999’, gradientType=’1’); } 147 — // Modern Sass Architecture - #ASOSTechUI 2016

@mixin background-horizontal($startColor: #3C3C3C, $endColor: #999999) { background-color: $startColor; background-image: -webkit-gradient(linear, left top, right top, from($startColor), to($endColor)); background-image: -webkit-linear-gradient(left, $startColor, $endColor); background-image: -moz-linear-gradient(left, $startColor, $endColor); background-image: -ms-linear-gradient(left, $startColor, $endColor); background-image: -o-linear-gradient(left, $startColor, $endColor); background-image: linear-gradient(left, $startColor, $endColor); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=’#{$startColor}’, endColorStr=’#{$endColor}’, gradientType=’1’); } 148 — // Modern Sass Architecture - #ASOSTechUI 2016

.component { @include background-horizontal; } 149 — // Modern Sass Architecture - #ASOSTechUI 2016

150 — // Modern Sass Architecture - #ASOSTechUI 2016

.component { font-size: 16px; font-size: 1rem; } 151 — // Modern Sass Architecture - #ASOSTechUI 2016

152 — // Modern Sass Architecture - #ASOSTechUI 2016

IS THAT CODE NEEDED 153 — // Modern Sass Architecture - #ASOSTechUI 2016

MODERN SASS ARCHITECTURE > folder and file structure > naming conventions > composing declarations > maintaining variables > documentation > when not to use Sass 154 — // Modern Sass Architecture - #ASOSTechUI 2016

CODE FOR MAINTAINABILITY SO THE NEXT DEVELOPER DOESN’T HATE YOU 155 — // Modern Sass Architecture - #ASOSTechUI 2016

THANKS @STUROBSON WWW.ALWAYSTWISTED.COM 156 — // Modern Sass Architecture - #ASOSTechUI 2016

157 — // Modern Sass Architecture - #ASOSTechUI 2016