A Modern Sass Artchitecture

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

6 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 7

Slide 7 text

7 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 8

Slide 8 text

8 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 9

Slide 9 text

9 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 10

Slide 10 text

10 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 11

Slide 11 text

11 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 12

Slide 12 text

12 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

14 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 15

Slide 15 text

15 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 16

Slide 16 text

16 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

19 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 20

Slide 20 text

20 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 21

Slide 21 text

21 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 22

Slide 22 text

22 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

24 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 25

Slide 25 text

25 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 26

Slide 26 text

26 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 27

Slide 27 text

27 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 28

Slide 28 text

28 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

30 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 31

Slide 31 text

31 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 32

Slide 32 text

32 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 33

Slide 33 text

33 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 34

Slide 34 text

34 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 35

Slide 35 text

35 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 36

Slide 36 text

36 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 37

Slide 37 text

37 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 38

Slide 38 text

38 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 39

Slide 39 text

39 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 40

Slide 40 text

40 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

42 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 43

Slide 43 text

43 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

45 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 46

Slide 46 text

46 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 47

Slide 47 text

47 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

50 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

53 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

56 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

59 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

62 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

65 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

68 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

73 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

77 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

79 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 80

Slide 80 text

80 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 81

Slide 81 text

81 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 82

Slide 82 text

82 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 83

Slide 83 text

83 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

92 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

94 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 95

Slide 95 text

95 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

.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

Slide 105

Slide 105 text

.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

Slide 106

Slide 106 text

106 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

.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

Slide 109

Slide 109 text

109 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

112 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 113

Slide 113 text

113 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 114

Slide 114 text

114 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

117 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

119 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

133 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 134

Slide 134 text

// ==================== .classname ==================== // created by: Stuart Robson ( stu@alwaystwisted.com ) // creation data: October 21, 2015 // upadate by: Stuart Robson ( stu@alwaystwisted.com ) // update data: November 05, 2015 // 1. Your text // =========================================================== 134 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

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

Slide 140

Slide 140 text

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

Slide 141

Slide 141 text

141 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 142

Slide 142 text

142 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 143

Slide 143 text

143 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 144

Slide 144 text

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

Slide 145

Slide 145 text

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

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

.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

Slide 148

Slide 148 text

@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

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

150 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 151

Slide 151 text

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

Slide 152

Slide 152 text

152 — // Modern Sass Architecture - #ASOSTechUI 2016

Slide 153

Slide 153 text

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

Slide 154

Slide 154 text

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

Slide 155

Slide 155 text

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

Slide 156

Slide 156 text

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

Slide 157

Slide 157 text

157 — // Modern Sass Architecture - #ASOSTechUI 2016