Harnessing the Power of Sass

Slide 1

Slide 1 text

Harnessing the Power of Sass JINA BOLTON // PRODUCT DESIGNER // DO SALESFORCE UX MEETUP

Slide 2

Slide 2 text

WORK BETTER, TOGETHER

Slide 3

Slide 3 text

“A fractured process makes for a fractured user experience.” —NATE FORTIN

Slide 4

Slide 4 text

“It used to be that designers made an object and walked away. Today the emphasis must shift to designing the entire life cycle.” —PAUL SAFFO

Slide 5

Slide 5 text

Creating pages

Slide 6

Slide 6 text

Creating systems

Slide 7

Slide 7 text

CSS Preprocessors: SCRIPTING LANGUAGES THAT PROVIDE ADDITIONAL AUTHORING FUNCTIONALITY TO CSS.

Slide 8

Slide 8 text

Stylus

Slide 9

Slide 9 text

sass-lang.com

Slide 10

Slide 10 text

Better maintainability DRYer development Patterns & Proportions

Slide 11

Slide 11 text

Nesting USE (CAREFULLY) TO AVOID REPETITION

Slide 12

Slide 12 text

Output ul.items a ... &:hover ... .ie-6 & ... ul.items a { ... } ul.items:hover { ... } .ie-6 ul.items a { ... } Sass

Slide 13

Slide 13 text

Output ul.items a ... @media print ... ul.items { ... } @media print { ul.items { ... } } Sass

Slide 14

Slide 14 text

Output .sidebar border: 1px solid #eee top-color: #fff left: 0 .sidebar { border: 1px solid #eee; border-top-color: #fff; border-left: 0; } Sass

Slide 15

Slide 15 text

Nesting more than 3 levels deep? Refactor.

Slide 16

Slide 16 text

Variables STORE COMMON ATTRIBUTES FOR MAINTAINABILITY

Slide 17

Slide 17 text

Output $text: #444 $bg: $text body color: $text footer background: $bg body { color: #444; } footer { background: #444; } Sass

Slide 18

Slide 18 text

Mixins STORE REUSABLE CODE & PASS ARGUMENTS FOR OVERRIDES

Slide 19

Slide 19 text

Output =mod($txt: #ccc) background: #111 color: $txt body +mod h1 +mod(#888) body { background: #111; color: #ccc; } h1 { background: #111; color: #888; } Sass

Slide 20

Slide 20 text

Extend CHAIN SELECTORS TOGETHER

Slide 21

Slide 21 text

Output .message padding: 1em a color: #369 .error @extend .message color: #eee .message, .error { padding: 1em; } .message a, .error a { color: #369; } .error { color: #eee; } Sass

Slide 22

Slide 22 text

Placeholder Selectors CREATE SILENT CLASSES THAT DON’T GET OUTPUT

Slide 23

Slide 23 text

Output %grid-1 width: 240px %grid-2 width: 480px .content @extend %grid-1 color: #369 .main @extend %grid-1 background: #eee .content, .main { width: 240px; } .content { color: #369; } .main { background: #eee; } Sass

Slide 24

Slide 24 text

oocss.org

Slide 25

Slide 25 text

DO’S WEB APPLICATION

Slide 26

Slide 26 text

Deathstar DO’S WEB APPLICATION

Slide 27

Slide 27 text

DO’S WEBSITE

Slide 28

Slide 28 text

Kenobi DO’S WEBSITE

Slide 29

Slide 29 text

KENOBI.CSS.SASS DEATHSTAR.CSS.SASS

Slide 30

Slide 30 text

KENOBI.CSS.SASS DEATHSTAR.CSS.SASS

Slide 31

Slide 31 text

KENOBI.CSS.SASS DEATHSTAR.CSS.SASS

Slide 32

Slide 32 text

vendor/_shared.sass @import compass @import compass/layout @import susy kenobi.css.sass @import vendor/shared deathstar.css.sass @import bootstrap/variables @import bootstrap/mixins @import vendor/shared 01 // vendor libraries

Slide 33

Slide 33 text

dependencies/_shared.sass @import metrics @import typography @import colors @import themes Globally used variables, mixins, & functions 01 // vendor libraries 02 // dependencies

Slide 34

Slide 34 text

foundation/_shared.sass @include border-box-sizing @import ../vendor/normalize @import base Plain old semantic HTML 01 // vendor libraries 02 // dependencies 03 // foundation

Slide 35

Slide 35 text

http://paulirish.com/2012/box-sizing-border-box-ftw/

Slide 36

Slide 36 text

kenobi.css.sass @import foundation/shared @import foundation/kenobi deathstar @import foundation/shared Kenobi has a different font, so we override them after importing shared styles. 01 // vendor libraries 02 // dependencies 03 // foundation

Slide 37

Slide 37 text

components/_shared.sass @import icons @import buttons @import toggles @import messages @import pagination Modular components & their states. 01 // vendor libraries 02 // dependencies 03 // foundation 04 // components

Slide 38

Slide 38 text

regions/_shared.sass @import banner @import navigation @import complementary @import contentinfo Page regions, named after their class or role names 01 // vendor libraries 02 // dependencies 03 // foundation 04 // components 05 // regions

Slide 39

Slide 39 text

helpers/_shared.sass @import nonsemantic-classes @import placeholder-selectors Non-semantic helpers 01 // vendor libraries 02 // dependencies 03 // foundation 04 // components 05 // regions 06 // helpers

Slide 40

Slide 40 text

responsive/_shared.sass @import responsive/mobile @import responsive/tablet @import responsive/screen Adjustments to type sizes, grids, and images. 01 // vendor libraries 02 // dependencies 03 // foundation 04 // components 05 // regions 06 // helpers 07 // responsive

Slide 41

Slide 41 text

_SCREEN.SASS _BANNER.SASS _NAVIGATION.SASS _CONTENTINFO.SASS Use mixins to keep responsive styles in context, but output media queries together at the end.

Slide 42

Slide 42 text

<% if Rails.env.development? && Settings.show_grids %> @import tools/show-grid <% end %> 01 // vendor libraries 02 // dependencies 03 // foundation 04 // components 05 // regions 06 // helpers 07 // responsive 08 // tools

Slide 43

Slide 43 text

} 01 // vendor libraries 02 // dependencies 03 // foundation 04 // components 05 // regions 06 // helpers 07 // responsive 08 // tools Put new CSS in the proper place. Move old CSS as you come to it. Move more CSS if you have tech debt time.

Slide 44

Slide 44 text

Style Guides + Sass go together perfectly.

Slide 45

Slide 45 text

blog.engineyard.com/front-end-maintainability-with-sass-and-style-guides

Slide 46

Slide 46 text

ENGINE YARD APP CLOUD, EARLY 2011

Slide 47

Slide 47 text

CODE STYLES DOCUMENTED AS YOU GO

Slide 48

Slide 48 text

Try a responsive iframe sandbox during development.

Slide 49

Slide 49 text

VIEW ALL SIZE-BASED MEDIA QUERIES AT ONCE WITH IFRAMES

Slide 50

Slide 50 text

Color MAINTAINABILITY WITH SASS & STYLE GUIDES

Slide 51

Slide 51 text

Create a simple color palette. Use Sass to make variations.

Slide 52

Slide 52 text

$x: #369 $y: #fff .a color: lighten($x, 5%) .b color: darken($x, 5%) .c color: saturate($x, 5%) .e color: mix($x, $y)

Slide 53

Slide 53 text

Use your Sass variables to generate a living color palette in your style guide.

Slide 54

Slide 54 text

Make variables for common pairings of colors & Sass color functions, and document it.

Slide 55

Slide 55 text

Engine Yard App Cloud, Early 2011

Slide 56

Slide 56 text

_header.sass $black: #000 $grey: #eee $white: invert($black) $h-bg-color: $black $h-text-color: $grey $h-link-color: $white _colors.sass

Slide 57

Slide 57 text

sassme.arc90.com

Slide 58

Slide 58 text

Make mixins for common pairings of background, text, & shadow colors.

Slide 59

Slide 59 text

Typography CREATE A SMART SYSTEM

Slide 60

Slide 60 text

Choose a standard base unit. 4 is good; it multiplies into 8, 12, 16, etc.

Slide 61

Slide 61 text

Create mixins for your various type styles. Small and all caps, big quote styles, etc. Document them.

Slide 62

Slide 62 text

Don’t try to refactor and document everything at once. You’ll likely give up.

Slide 63

Slide 63 text

Do refactor & document going forward, in iterations.

Slide 64

Slide 64 text

“Be regular and orderly in your life so that you may be violent and original in your work.” —GUSTAVE FLAUBERT