Modular HTML & CSS Turbo Workshop

Slide 1

Slide 1 text

TACTICAL HTML & CSS MODULAR HTML & CSS TURBO WORKSHOP Shay Howe @shayhowe learn.shayhowe.com Darby Frey @darbyfrey darbyfrey.com

Slide 2

Slide 2 text

@shayhowe & @darbyfrey Modular HTML & CSS Shay Howe @shayhowe learn.shayhowe.com Darby Frey @darbyfrey darbyfrey.com

Slide 3

Slide 3 text

@shayhowe & @darbyfrey Modular HTML & CSS 1. The Problem 2. Groundwork 3. Assembling Layout 4. Accommodating Content 5. Turbo with SCSS 6. Onward OUR SCHEDULE

Slide 4

Slide 4 text

@shayhowe & @darbyfrey Modular HTML & CSS THE PROBLEM

Slide 5

Slide 5 text

The Gust by Willem van de Velde the Younger

Slide 6

Slide 6 text

@shayhowe & @darbyfrey Modular HTML & CSS COMMON PROBLEMS • Websites have difficulty scaling • Code becomes brittle • Files and code bases begin to swell

Slide 7

Slide 7 text

@shayhowe & @darbyfrey Modular HTML & CSS WHAT’S WRONG • Best practices aren’t exactly best practices • Standards need to evolve

Slide 8

Slide 8 text

@shayhowe & @darbyfrey Modular HTML & CSS BEST BAD PRACTICES • Avoid extra elements • Avoid classes • Leverage type selectors • Leverage descendent selectors

Slide 9

Slide 9 text

@shayhowe & @darbyfrey Modular HTML & CSS BEST BAD PRACTICES Avoiding classes section ul#nav li {...} section:nth-‐child(2) div:nth-‐child(7) > a {...} Leveraging selectors a.btn {...} #main a.btn {...} #main div.feature a.btn {...}

Slide 10

Slide 10 text

@shayhowe & @darbyfrey Modular HTML & CSS BEST BAD PRACTICES Bad #contact li:nth-‐child(1) input, #contact li:nth-‐child(2) input { width: 160px; } #contact li:nth-‐child(3) textarea { width: 280px; }

Slide 11

Slide 11 text

@shayhowe & @darbyfrey Modular HTML & CSS BEST BAD PRACTICES Good .col-‐1 { width: 160px; } .col-‐2 { width: 280px; }

Slide 12

Slide 12 text

@shayhowe & @darbyfrey Modular HTML & CSS SPECIFICITY? • Specificity determines which styles are applied • Each selector has a specificity weight • High specificity beats low specificity • Low specificity is key

Slide 13

Slide 13 text

@shayhowe & @darbyfrey Modular HTML & CSS MEASURING SPECIFICITY Formula • IDs, Classes/Pseudo-classes/Attributes, Elements High Specificity (Bad) #primary #main div.gallery figure.media IDs: 2, Classes: 2, Elements: 2 — Compiled: 2–2–2 Low Specificity (Good) .gallery-‐media IDs: 0, Classes: 1, Elements: 0 — Compiled: 0–1–0

Slide 14

Slide 14 text

@shayhowe & @darbyfrey Modular HTML & CSS

Slide 15

Slide 15 text

@shayhowe & @darbyfrey Modular HTML & CSS WATCH SPECIFICITY • Be explicit • Keep specificity low • Never use IDs or !important • Avoid nested selectors (#main .spotlight strong span)

Slide 16

Slide 16 text

@shayhowe & @darbyfrey Modular HTML & CSS WATCH SPECIFICITY Bad #primary #main div.gallery { text-‐transform: uppercase; } #primary #main div.gallery figure.media { background: #ccc; }

Slide 17

Slide 17 text

@shayhowe & @darbyfrey Modular HTML & CSS WATCH SPECIFICITY Good .gallery { text-‐transform: uppercase; } .gallery-‐media { background: #ccc; }

Slide 18

Slide 18 text

Parade of the Black Sea Fleet by Ivan Aivazovsky

Slide 19

Slide 19 text

@shayhowe & @darbyfrey Modular HTML & CSS MAINTAINABILITY Code must be... • Organized • Modular • Performant

Slide 20

Slide 20 text

@shayhowe & @darbyfrey Modular HTML & CSS METHODOLOGIES OOCSS • Object-Oriented CSS From Nicole Sullivan – oocss.org SMACSS • Scalable and Modular Architecture for CSS From Jonathan Snook – smacss.com

Slide 21

Slide 21 text

@shayhowe & @darbyfrey Modular HTML & CSS GROUNDWORK

Slide 22

Slide 22 text

@shayhowe & @darbyfrey Modular HTML & CSS REUSE CODE • Do not duplicate code • Remove old code • Defer loading subsequent styles

Slide 23

Slide 23 text

@shayhowe & @darbyfrey Modular HTML & CSS REUSE CODE Bad .news { background: #eee; color: #666; } .social { background: #eee; color: #666; }

Slide 24

Slide 24 text

@shayhowe & @darbyfrey Modular HTML & CSS REUSE CODE Good .news, .social { background: #eee; color: #666; } Better .feat-‐box { background: #eee; color: #666; }

Slide 25

Slide 25 text

@shayhowe & @darbyfrey Modular HTML & CSS USE CLASSES • Write understandable class names • Avoid unnecessary nesting • Use same strength specificity

Slide 26

Slide 26 text

@shayhowe & @darbyfrey Modular HTML & CSS USE CLASSES Bad .feat-‐box .callout .pr { font-‐size: 12px; } .feat-‐box .callout .pr .un { color: #39f; }

Slide 27

Slide 27 text

@shayhowe & @darbyfrey Modular HTML & CSS USE CLASSES Good .feat-‐box .price { font-‐size: 12px; } .feat-‐box .unit { color: #39f; }

Slide 28

Slide 28 text

@shayhowe & @darbyfrey Modular HTML & CSS USE CLASSES Bad .btn.large { font-‐size: 24px; padding: 15px 30px; }

...

Slide 29

Slide 29 text

@shayhowe & @darbyfrey Modular HTML & CSS USE CLASSES Good .btn-‐large { font-‐size: 24px; padding: 15px 30px; }

...

Slide 30

Slide 30 text

@shayhowe & @darbyfrey Modular HTML & CSS ASSEMBLING LAYOUT

Slide 31

Slide 31 text

@shayhowe & @darbyfrey Modular HTML & CSS ABSTRACT STRUCTURE • Separate presentation (or theme) from layout • Create an object layer for layout • Create a skin layer for theme • Use a grid

Slide 32

Slide 32 text

@shayhowe & @darbyfrey Modular HTML & CSS ABSTRACT STRUCTURE Bad .news { background: #eee; color: #666; margin: 0 10px; width: 400px; }

...

Slide 33

Slide 33 text

@shayhowe & @darbyfrey Modular HTML & CSS ABSTRACT STRUCTURE Good .grid-‐4 { margin: 0 10px; width: 400px; } .feat-‐box { background: #eee; color: #666; }

...

Slide 34

Slide 34 text

@shayhowe & @darbyfrey Modular HTML & CSS TRANSPARENTIZE ELEMENTS • Stylize elements to be transparent • Keep visual properties apart from layout properties

Slide 35

Slide 35 text

@shayhowe & @darbyfrey Modular HTML & CSS TRANSPARENTIZE ELEMENTS Bad .pagination { border-‐radius: 5px; border: 1px solid #eee; margin: 0 10px; width: 620px; }

...

Slide 36

Slide 36 text

@shayhowe & @darbyfrey Modular HTML & CSS TRANSPARENTIZE ELEMENTS Good .grid-‐8 { margin: 0 10px; width: 620px; } .offset-‐box { border-‐radius: 5px; border: 1px solid #eee; }

...

Slide 37

Slide 37 text

@shayhowe & @darbyfrey Modular HTML & CSS CREATE ADAPTABLE LAYOUTS • Height and width should be flexible • Height should extend with content • Width should extend with a grid

Slide 38

Slide 38 text

@shayhowe & @darbyfrey Modular HTML & CSS CREATE ADAPTABLE LAYOUTS Bad #main { float: left; margin: 0 10px; width: 620px; } #aside { float: left; margin: 0 10px; width: 300px; }

Slide 39

Slide 39 text

@shayhowe & @darbyfrey Modular HTML & CSS CREATE ADAPTABLE LAYOUTS Good .grid-‐4, .grid-‐8 { float: left; margin: 0 10px; } .grid-‐4 { width: 300px; } .grid-‐8 { width: 620px; }

Slide 40

Slide 40 text

@shayhowe & @darbyfrey Modular HTML & CSS ASSEMBLING LAYOUT IN PRACTICE http://bit.ly/modular-html-css

Slide 41

Slide 41 text

@shayhowe & @darbyfrey Modular HTML & CSS ACCOMMODATING CONTENT

Slide 42

Slide 42 text

@shayhowe & @darbyfrey Modular HTML & CSS SEPARATE CONTENT • Separate content from container • Stylize content regardless of container

Slide 43

Slide 43 text

@shayhowe & @darbyfrey Modular HTML & CSS SEPARATE CONTENT Bad .alert { background: #f2dede; border-‐radius: 10px; color: #b94a48; padding: 10px 20px; }

...

Slide 44

Slide 44 text

@shayhowe & @darbyfrey Modular HTML & CSS SEPARATE CONTENT Good .alert { border-‐radius: 10px; padding: 10px 20px; } .alert-‐error { background: #f2dede; color: #b94a48; }

...

Slide 45

Slide 45 text

@shayhowe & @darbyfrey Modular HTML & CSS AVOID PARENT DEPENDENCY • Remove parent container dependency • Decouple CSS from HTML • Create components to be used anywhere

Slide 46

Slide 46 text

@shayhowe & @darbyfrey Modular HTML & CSS AVOID PARENT DEPENDENCY Bad .feat-‐box { background: #eee; } article .feat-‐box { background: #fff; }

...

Slide 47

Slide 47 text

@shayhowe & @darbyfrey Modular HTML & CSS AVOID PARENT DEPENDENCY Good .feat-‐box { background: #eee; } .feat-‐box-‐alt { background: #fff; }

...

Slide 48

Slide 48 text

@shayhowe & @darbyfrey Modular HTML & CSS FAVOR SEMANTICS • Allow elements to adapt • Uses individual classes to extend modules

Slide 49

Slide 49 text

@shayhowe & @darbyfrey Modular HTML & CSS FAVOR SEMANTICS Bad .feat-‐box h2 { color: #f60; font: 18px Helvetica, sans-‐serif; }

...

Slide 50

Slide 50 text

@shayhowe & @darbyfrey Modular HTML & CSS FAVOR SEMANTICS Good .feat-‐subhead { color: #f60; font: 18px Helvetica, sans-‐serif; }

...

Slide 51

Slide 51 text

@shayhowe & @darbyfrey Modular HTML & CSS ACCOMMODATING CONTENT IN PRACTICE http://bit.ly/modular-html-css

Slide 52

Slide 52 text

@shayhowe & @darbyfrey Modular HTML & CSS TURBO WITH SCSS

Slide 53

Slide 53 text

@shayhowe & @darbyfrey Modular HTML & CSS SETUP

Slide 54

Slide 54 text

@shayhowe & @darbyfrey Modular HTML & CSS SCSS • CSS preprocessor • Extension of CSS3 • Compiled using Ruby • Adds nested rules, variables, mixins, selector inheritance, and more

Slide 55

Slide 55 text

@shayhowe & @darbyfrey Modular HTML & CSS SCSS SCSS Syntax .new { color: #f60; .item { font-‐size: 24px; } } Compiled CSS .new { color: #f60; } .new .item { font-‐size: 24px; }

Slide 56

Slide 56 text

@shayhowe & @darbyfrey Modular HTML & CSS SCSS VS. SASS SCSS Syntax .new { color: #f60; .item { font-‐size: 24px; } } Sass Syntax .new color: #f60 .item font-‐size: 24px

Slide 57

Slide 57 text

@shayhowe & @darbyfrey Modular HTML & CSS COMPASS • Built on top of Sass • Includes reusable patterns • Provides cross browser CSS3 mixins

Slide 58

Slide 58 text

@shayhowe & @darbyfrey Modular HTML & CSS SCOUT APP • GUI for compiling Sass and Compass • Available for both Mac and Windows

Slide 59

Slide 59 text

@shayhowe & @darbyfrey Modular HTML & CSS SETUP IN PRACTICE http://bit.ly/modular-html-css

Slide 60

Slide 60 text

@shayhowe & @darbyfrey Modular HTML & CSS ORGANIZATION

Slide 61

Slide 61 text

@shayhowe & @darbyfrey Modular HTML & CSS TECHNIQUE Settings • Utility styles (Extends, Mixins, Variables) Base • Core styles for entire site (Layout, Typography) Components • UI concepts & design patterns (Buttons, List, Navigation) Modules • Business logic (Aside, Header, Footer)

Slide 62

Slide 62 text

@shayhowe & @darbyfrey Modular HTML & CSS TECHNIQUE

Slide 63

Slide 63 text

@shayhowe & @darbyfrey Modular HTML & CSS PARTIALS • Must begin with an underscore, _ • Must have a file extension of .scss, not .css.scss

Slide 64

Slide 64 text

@shayhowe & @darbyfrey Modular HTML & CSS IMPORTS workshop.css.scss // Compass @import "compass/css3"; // Settings @import "settings/variables"; // Base @import "base/layout"; ...

Slide 65

Slide 65 text

@shayhowe & @darbyfrey Modular HTML & CSS ORGANIZATION IN PRACTICE http://bit.ly/modular-html-css

Slide 66

Slide 66 text

@shayhowe & @darbyfrey Modular HTML & CSS SETTINGS

Slide 67

Slide 67 text

@shayhowe & @darbyfrey Modular HTML & CSS VARIABLES • Allow common values to be shared • Assigned with a dollar sign, name, colon, and value • May be a number, string, boolean, null, or multiple comma separated values

Slide 68

Slide 68 text

@shayhowe & @darbyfrey Modular HTML & CSS VARIABLES SCSS Syntax $font-‐base: 14px; $sans-‐serif: "Open Sans", sans-‐serif; p { font: $font-‐base $sans-‐serif; } Compiled CSS p { font: 14px "Open Sans", sans-‐serif; }

Slide 69

Slide 69 text

@shayhowe & @darbyfrey Modular HTML & CSS EXTENDS • Share common styles without duplicating them • Keep code weight low • Generates detailed selectors • Assigned with the @extend rule followed by the selector

Slide 70

Slide 70 text

@shayhowe & @darbyfrey Modular HTML & CSS EXTENDS SCSS Syntax .alert { border-‐radius: 10px; } .alert-‐error { @extend .alert; color: #b94a48; } .alert-‐success { @extend .alert; color: #468847; } Compiled CSS .alert, .alert-‐error, .alert-‐success { border-‐radius: 10px; } .alert-‐error { color: #b94a48; } .alert-‐success { color: #468847; }

Slide 71

Slide 71 text

@shayhowe & @darbyfrey Modular HTML & CSS PLACEHOLDERS • Similar to extends • Selector is assigned with a percentage sign • Extended selector is not output, only the styles

Slide 72

Slide 72 text

@shayhowe & @darbyfrey Modular HTML & CSS PLACEHOLDERS SCSS Syntax %alert { border-‐radius: 10px; } .alert-‐error { @extend %alert; color: #b94a48; } .alert-‐success { @extend %alert; color: #468847; } Compiled CSS .alert-‐error, .alert-‐success { border-‐radius: 10px; } .alert-‐error { color: #b94a48; } .alert-‐success { color: #468847; }

Slide 73

Slide 73 text

@shayhowe & @darbyfrey Modular HTML & CSS MIXINS • Share similar styles based off given arguments • Duplicates properties, providing different values • Assigned with the @mixin rule followed by the name and arguments

Slide 74

Slide 74 text

@shayhowe & @darbyfrey Modular HTML & CSS MIXINS SCSS Syntax @mixin btn($color) { color: $color; } .btn { @mixin btn(#f60); } Compiled CSS .btn { color: #f60; }

Slide 75

Slide 75 text

@shayhowe & @darbyfrey Modular HTML & CSS SETTINGS IN PRACTICE http://bit.ly/modular-html-css

Slide 76

Slide 76 text

@shayhowe & @darbyfrey Modular HTML & CSS REFACTOR

Slide 77

Slide 77 text

@shayhowe & @darbyfrey Modular HTML & CSS COMMENTS • Two different types of comments • Standard CSS comments as normal • Silent comments, assigned with two forward slashes, not compiled in the output

Slide 78

Slide 78 text

@shayhowe & @darbyfrey Modular HTML & CSS COMMENTS SCSS Syntax /* Normal comment */ .awesome { color: #3276b1; } // Omitted comment .very-‐awesome { color: #47a447; } Compiled CSS /* Normal comment */ .awesome { color: #3276b1; } .very-‐awesome { color: #47a447; }

Slide 79

Slide 79 text

@shayhowe & @darbyfrey Modular HTML & CSS PARENT SELECTOR • Add styles to a previous selector • Commonly used with pseudo classes • Assigned with an ampersand • May also be used as the key selector

Slide 80

Slide 80 text

@shayhowe & @darbyfrey Modular HTML & CSS PARENT SELECTOR SCSS Syntax a { color: #8ec63f; &:hover { color: #f7941d; } } Compiled CSS a { color: #8ec63f; } a:hover { color: #f7941d; }

Slide 81

Slide 81 text

@shayhowe & @darbyfrey Modular HTML & CSS INTERPOLATION • Occasionally SCSS need to be interpolated • Most commonly happens as part of a class name, property name, or inside a string plain text • Assigned by placing the value inside #{...}

Slide 82

Slide 82 text

@shayhowe & @darbyfrey Modular HTML & CSS INTERPOLATION SCSS Syntax $logo: twitter; $offset: left; .#{$logo} { #{$offset}: 20px; } Compiled CSS .twitter { left: 20px; }

Slide 83

Slide 83 text

@shayhowe & @darbyfrey Modular HTML & CSS REFACTOR IN PRACTICE http://bit.ly/modular-html-css

Slide 84

Slide 84 text

@shayhowe & @darbyfrey Modular HTML & CSS COMPILE

Slide 85

Slide 85 text

@shayhowe & @darbyfrey Modular HTML & CSS OUTPUT STYLES • SCSS has multiple output styles • Nested or expanded is best for development • Compact or compressed is best for production

Slide 86

Slide 86 text

@shayhowe & @darbyfrey Modular HTML & CSS COMPILE IN PRACTICE http://bit.ly/modular-html-css

Slide 87

Slide 87 text

@shayhowe & @darbyfrey Modular HTML & CSS ONWARD

Slide 88

Slide 88 text

Ships on the Roadstead by Willem van de Velde the Younger

Slide 89

Slide 89 text

@shayhowe & @darbyfrey Modular HTML & CSS APPROACH • Stop thinking about pages • Start thinking about components • Take visual inventory

Slide 90

Slide 90 text

@shayhowe & @darbyfrey Modular HTML & CSS THEMES • Decouple HTML and CSS • Separate presentation from layout • Separate content from container • Extend elements with classes

Slide 91

Slide 91 text

@shayhowe & @darbyfrey Modular HTML & CSS OUTCOMES • Maintainability! • Reusable code, less duplication • Flexibility and extensibility • Improved standards

Slide 92

Slide 92 text

@shayhowe & @darbyfrey Modular HTML & CSS WHAT’S NEXT Build a style guide • Twitter Bootstrap, Zurb Foundation Review methodologies • OOCSS, SMACSS Test your code • CSS Lint, Inspector, PageSpeed

Slide 93

Slide 93 text

@shayhowe & @darbyfrey Modular HTML & CSS THANK YOU! Questions? @shayhowe @darbyfrey