Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designer/Developer Workflow with Sass

Designer/Developer Workflow with Sass

Gave this talk with Krys Taylor (@shodoshan) at LinkedIn

Chris Eppstein

February 28, 2013
Tweet

More Decks by Chris Eppstein

Other Decks in Technology

Transcript

  1. The Four
    Noble
    Truths
    (of Stylesheets)
    Thursday, February 28, 13

    View full-size slide

  2. You are suffering.
    (we were too)
    http://inguen.blogspot.com/2009_02_01_archive.html
    Thursday, February 28, 13

    View full-size slide

  3. STYLESHEETS
    are the source of your suffering
    http://wikibon.org/blog/wp-content/uploads/2011/10/5.„eg
    Thursday, February 28, 13
    It is the nature of CSS to devolve into madness.
    Duplicated styles, code spaghetti, inconsistent UI, lots of decision-making and no clear path.

    View full-size slide

  4. You can be free from
    suffering.
    http://www.indiegamemag.com/media/lightbulb.jpg
    Thursday, February 28, 13

    View full-size slide

  5. Living style guides &
    self-discipline
    will free you from your suffering
    http://www.tsf.net.au/gallery/var/albums/Tidy-Cabling/46-cluster_back2.„g?m=1294131614
    Thursday, February 28, 13

    View full-size slide

  6. Development
    Speed
    Re-use
    Flexibility
    Repetition
    Requires
    Reduces
    Requires
    Reduces
    Thursday, February 28, 13
    These tradeoffs are fundamental to software.

    View full-size slide

  7. “Why is it so slow to make new
    pages that look similar?”
    Hand coded CSS
    Thursday, February 28, 13

    View full-size slide

  8. I need to reuse my classnames.
    Thursday, February 28, 13

    View full-size slide

  9. and save time
    Thursday, February 28, 13

    View full-size slide

  10. There we go
    Thursday, February 28, 13

    View full-size slide

  11. I’m so fast now.
    CSS
    FRAMEWORKS
    Thursday, February 28, 13

    View full-size slide

  12. “Change this bit here, will ya?”
    Thursday, February 28, 13

    View full-size slide

  13. But if I change that, it will affect
    these other things.
    Thursday, February 28, 13

    View full-size slide

  14. “Why?
    They’re not related.”
    Thursday, February 28, 13

    View full-size slide

  15. I need to NOT reuse my
    classnames. Sometimes.
    Thursday, February 28, 13

    View full-size slide

  16. I’m so flexible now.
    Scoped Sass Styles
    &
    Content Semantics
    Thursday, February 28, 13

    View full-size slide

  17. “Why is it so hard to roll out
    this change across the site?”
    Thursday, February 28, 13
    It’s faster than it was,

    View full-size slide

  18. I didn’t know those
    things were related.
    Thursday, February 28, 13

    View full-size slide

  19. “Of course they are!”
    Thursday, February 28, 13

    View full-size slide

  20. Make design-oriented concepts
    that can vary in appearance.
    Thursday, February 28, 13

    View full-size slide

  21. Design
    Concept
    Framework
    Let’s work on this together.
    Thursday, February 28, 13

    View full-size slide

  22. “Change how this concept looks?”
    “Use this concept instead.”
    Thursday, February 28, 13

    View full-size slide

  23. No problem.
    Thursday, February 28, 13

    View full-size slide

  24. “Perfect!”
    Thursday, February 28, 13

    View full-size slide

  25. Good naming of
    appropriate concepts
    is the key to
    maintainable software.
    Thursday, February 28, 13
    Chris: This is not just a stylesheet concept. This is a fundamental truth of software
    development.

    View full-size slide

  26. How do I know if a concept
    is appropriate?
    Thursday, February 28, 13
    a concept is appropriate if is independent of other concepts or when its relationship to other
    concepts is unambiguous.
    a concept is appropriate if it lives in the application domain.
    a concept is appropriate if it supports the creation of appropriate concepts.

    View full-size slide

  27. What makes a good name?
    Thursday, February 28, 13
    A good name is short.
    A good name conveys understanding about a concept.
    A good name omits little knowledge about its concept.

    View full-size slide

  28. Naming a concept
    changes it.
    Thursday, February 28, 13
    Once you name a concept you change the concept into whatever concept that name invokes in
    another person.
    Any concept worth creating is a concept worth naming well. Take the time to name it right, or
    it will be misunderstood and misused.
    This is the source of most software defects.

    View full-size slide

  29. Accept
    your
    Constraints
    http://candidkerry.files.wordpress.com/2011/09/bound-with-chains-of-the-spirit-and-of-men11.jpg
    Thursday, February 28, 13
    We work with browsers and we are beholden to how they work.
    You cannot fight this. You cannot escape it. Accept it.

    View full-size slide

  30. Fundamentals
    • Reset
    • Additive-only
    • Page Layout
    • Containers
    • Typography
    • Background
    • Foreground
    • Spacers
    • Interaction States
    • Medias
    • Height
    • Differences OK
    Thursday, February 28, 13
    We must embrace these fundamentals. Our concepts cannot fight them or they are not
    appropriate to our application.

    View full-size slide

  31. Thursday, February 28, 13
    We used Eric Meyer’s Reset. it turns off all the styles, but many prefer a normalization over a
    reset.

    View full-size slide

  32. Additive by Nature
    Styles Inherit and Cascade.
    “Turning off” styles is a code smell.
    Thursday, February 28, 13

    View full-size slide

  33. Constructing an Object
    Thursday, February 28, 13
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  34. Constructing an Object
    Thursday, February 28, 13
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  35. Constructing an Object
    Thursday, February 28, 13
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  36. Constructing an Object
    Thursday, February 28, 13
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  37. Constructing an Object
    Thursday, February 28, 13
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  38. Constructing an Object
    Thursday, February 28, 13
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  39. Constructing an Object
    Thursday, February 28, 13
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  40. Constructing an Object
    Unstyled
    Background
    Container
    Typography
    Foreground
    Margin/Padding
    Thursday, February 28, 13
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  41. Constructing an Object
    .calming
    .shadow-box
    .reading-text
    .green-bg-type
    .vertically-padded
    Thursday, February 28, 13
    From each category you can usually only pick 1 class to apply to the same element.

    View full-size slide

  42. Style Concern: Layout
    • Grid - Provides the structure of a page.
    CSS3 will bring alternate layout methods.
    • Page layouts - Defines how primary
    elements adhere to the grid and respond.
    Blog Post
    Thursday, February 28, 13

    View full-size slide

  43. Thursday, February 28, 13

    View full-size slide

  44. Thursday, February 28, 13

    View full-size slide

  45. Thursday, February 28, 13

    View full-size slide

  46. Thursday, February 28, 13

    View full-size slide

  47. Thursday, February 28, 13

    View full-size slide

  48. Thursday, February 28, 13

    View full-size slide

  49. Thursday, February 28, 13

    View full-size slide

  50. Thursday, February 28, 13

    View full-size slide

  51. Thursday, February 28, 13

    View full-size slide

  52. Style Concern: Typography
    • Defines how a collection of
    typographic elements are styled.
    • Vertical Rhythm
    • There is no default typography.
    Thursday, February 28, 13
    opt-in typography is not the industry standard approach. The industry is mostly wrong about
    this. Typographic inheritance is annoying.

    View full-size slide

  53. Style Concern: Typography
    • Defines how a collection of
    typographic elements are styled.
    • Vertical Rhythm
    • There is no default typography.
    Opt-in To Typography
    Thursday, February 28, 13
    opt-in typography is not the industry standard approach. The industry is mostly wrong about
    this. Typographic inheritance is annoying.

    View full-size slide

  54. Style Concern: Widgets
    • Styles for your interactive elements
    • SMACSS - Jonathan Snook
    Thursday, February 28, 13
    Widgets are interactive elements (elements with state)

    View full-size slide

  55. Medias
    Thursday, February 28, 13
    In order to have consistent breakpoint behavior, Sass 3.2 has new abilities to define
    abstractions around styles using @content.

    View full-size slide

  56. Height
    Is a Scary Word
    http://edge.ebaumsworld.com/mediaFiles/picture/1918624/81886902.jpg
    Thursday, February 28, 13
    except for positioned content, You almost never want to set the hight of anything that has a
    variable width or variable content (hint: that’s almost everything)

    View full-size slide

  57. Differences are OK
    http://www.snvdiversityrt.zoomshare.com/files/Diversity_Matters_photo_without_wording_.jpg
    Thursday, February 28, 13
    Pixel perfection is a pipe dream. Embrace progressive enhancement.
    Krys: tell designers this is ok. do you have some tips for how to design with enhancement/
    degradation in mind?
    Chris: Doesn’t that cramp your style?

    View full-size slide

  58. Designer
    Thursday, February 28, 13
    Naming for Intent
    Design is not art. Design is science with an artistic flair.
    Suddenly your designs change, as intent becomes more of a focus than art.

    View full-size slide

  59. Naming is a
    Collaboration
    Designers must pick or approve the name.
    Unfortunately, designers are not often good at naming things.
    Thursday, February 28, 13
    Coders have to name everything they make, but designers don’t. Naming is a skill that must
    be developed. You have to learn to explain your intuition and instinct.

    View full-size slide

  60. Naming is Hard
    http://funnyphotosto.com/wp-content/uploads/2012/03/12/screaming.„g
    Thursday, February 28, 13
    Because designers think visually, sometimes a description is actually a paragraph, not just
    one or two words.

    View full-size slide

  61. Naming Docent
    Developers, your job is to help
    designers develop a shared
    vocabulary.
    Thursday, February 28, 13
    If you are a developer and a designer, you now have an excuse for talking to yourself.

    View full-size slide

  62. The Name Game
    Thursday, February 28, 13
    THESAURUS!!!

    View full-size slide

  63. The Name Game
    Thursday, February 28, 13
    THESAURUS!!!

    View full-size slide

  64. The Name Game
    Thursday, February 28, 13
    THESAURUS!!!

    View full-size slide

  65. The Name Game
    Thursday, February 28, 13
    THESAURUS!!!

    View full-size slide

  66. The Name Game
    Thursday, February 28, 13
    THESAURUS!!!

    View full-size slide

  67. The Name Game
    Thursday, February 28, 13
    THESAURUS!!!

    View full-size slide

  68. The Name Game
    Thursday, February 28, 13
    THESAURUS!!!

    View full-size slide

  69. The Name Game
    Thursday, February 28, 13
    THESAURUS!!!

    View full-size slide

  70. The Name Game
    Thursday, February 28, 13
    THESAURUS!!!

    View full-size slide

  71. The Name Game
    Thursday, February 28, 13
    THESAURUS!!!

    View full-size slide

  72. Losing the Name Game
    Thursday, February 28, 13
    Sometimes you cannot find a good name, or you find some use of a design that doesn’t
    match the current name.

    View full-size slide

  73. Losing the Name Game
    Wait: Don’t name it
    Thursday, February 28, 13
    Sometimes you cannot find a good name, or you find some use of a design that doesn’t
    match the current name.

    View full-size slide

  74. Losing the Name Game
    Consistency: Change the design
    Wait: Don’t name it
    Thursday, February 28, 13
    Sometimes you cannot find a good name, or you find some use of a design that doesn’t
    match the current name.

    View full-size slide

  75. Losing the Name Game
    Give up: Pick two names
    Consistency: Change the design
    Wait: Don’t name it
    Thursday, February 28, 13
    Sometimes you cannot find a good name, or you find some use of a design that doesn’t
    match the current name.

    View full-size slide

  76. The Designer Wins
    http://blog.hubspot.com/Portals/53/images/charlie-sheen-winning.png
    Thursday, February 28, 13
    Don’t force a design change just because a name doesn’t match. Intuition is a tricky thing, if
    you trust your designer, trust their gut feeling. If you don’t trust your designer... :(

    View full-size slide

  77. Now you understand.
    • My site is so big
    • But I grok the
    fundamentals
    • But OMG where
    do I start?
    Thursday, February 28, 13

    View full-size slide

  78. Progression of a Design
    Prototype
    Variations
    Multiple Uses
    Domain Concepts
    Presentational Concepts
    Concept
    App
    Styles
    Foundation
    Classes
    Mixin
    Library
    Thursday, February 28, 13
    This is a generalization, not a rule. Sometimes you skip a step, some concepts never appear
    in the foundation.

    View full-size slide

  79. Progression of a Design
    Prototype
    Variations
    Multiple Uses
    Domain Concepts
    Presentational Concepts
    Concept
    App
    Styles
    Foundation
    Classes
    Mixin
    Library
    Thursday, February 28, 13
    This is a generalization, not a rule. Sometimes you skip a step, some concepts never appear
    in the foundation.

    View full-size slide

  80. Library: ‣No output.
    ‣Mostly presentational in
    nature.
    Foundation: ‣Core, Shared Styles.
    ‣Maps Presentation to
    Domain.
    Application: ‣Features.
    ‣One-off Pages.
    ‣Experimental styles.
    ‣Server traffic patterns
    Thursday, February 28, 13

    View full-size slide

  81. Library: ‣No output.
    ‣Mostly presentational in
    nature.
    Foundation: ‣Core, Shared Styles.
    ‣Maps Presentation to
    Domain.
    Application: ‣Features.
    ‣One-off Pages.
    ‣Experimental styles.
    ‣Server traffic patterns
    Thursday, February 28, 13

    View full-size slide

  82. Library: ‣No output.
    ‣Mostly presentational in
    nature.
    Foundation: ‣Core, Shared Styles.
    ‣Maps Presentation to
    Domain.
    Application: ‣Features.
    ‣One-off Pages.
    ‣Experimental styles.
    ‣Server traffic patterns
    Thursday, February 28, 13

    View full-size slide

  83. Property Soup Le average sass stylesheet.
    Thursday, February 28, 13
    How should we organize our style properties? Alphabetize them! We
    can do better than this. We will organize our properties by style concern.

    View full-size slide

  84. Property Soup Le average sass stylesheet.
    Alphabetized
    Thursday, February 28, 13
    How should we organize our style properties? Alphabetize them! We
    can do better than this. We will organize our properties by style concern.

    View full-size slide

  85. Property Soup Le average sass stylesheet.
    Alphabetized
    Thursday, February 28, 13
    How should we organize our style properties? Alphabetize them! We
    can do better than this. We will organize our properties by style concern.

    View full-size slide

  86. Typography The non-color aspects of text.
    Thursday, February 28, 13
    Note how the typography and foreground are mixed up?

    View full-size slide

  87. Typography Typographic properties: font-xxx, line-
    height, bullets, text-xxx, margin
    Thursday, February 28, 13
    Explain the placeholder selector

    View full-size slide

  88. Container Not all paddings are from the same
    concern.
    Thursday, February 28, 13

    View full-size slide

  89. Container border, box shadow, padding
    Thursday, February 28, 13

    View full-size slide

  90. Background Background - this one is easy :)
    Thursday, February 28, 13

    View full-size slide

  91. Foreground border-color, color, shadow-color
    Thursday, February 28, 13
    you can’t declare text shadow color explicitly, so we have to put all text shadows in the
    foreground, otherwise the shadow details would be in the typography.

    View full-size slide

  92. Spacers margin & padding on non-typographic
    elements
    Thursday, February 28, 13

    View full-size slide

  93. An Object Description
    In Sass, we describe objects using words
    and high-level concepts,
    not style primitives.
    Thursday, February 28, 13
    Isn’t this simpler to understand if you’re reading the code?
    We read code more often than we write it. Be nice to your future self.

    View full-size slide

  94. An Object Description
    In Sass, we describe objects using words
    and high-level concepts,
    not style primitives.
    Thursday, February 28, 13
    Isn’t this simpler to understand if you’re reading the code?
    We read code more often than we write it. Be nice to your future self.

    View full-size slide

  95. An Object Description Our object description is longer now.
    Thursday, February 28, 13

    View full-size slide

  96. An Object Description Our object description is longer now.
    Not Re-Usable
    Re-Usable
    Thursday, February 28, 13

    View full-size slide

  97. A Sad Reality If you use @extend like this, your
    stylesheets will be huge.
    Thursday, February 28, 13
    So unless you need the flexibility that semantic markup brings for shared content, etc

    View full-size slide

  98. A Sad Reality Classitis provides a better user
    experience.
    Thursday, February 28, 13

    View full-size slide

  99. A Sad Reality Classitis provides a better user
    experience.
    Thursday, February 28, 13

    View full-size slide

  100. This is a GOOD Start
    Thursday, February 28, 13

    View full-size slide

  101. CHANGE
    how you think
    Thursday, February 28, 13
    Think of each page, each project, each feature as part of a whole
    When you do this, living styleguide is almost inevitable

    View full-size slide

  102. Re-approach the Fundamentals
    Thursday, February 28, 13

    View full-size slide

  103. Styleguides Must
    Live in Code
    Thursday, February 28, 13
    styleguides traditionally are a document
    but no one refers to them so what’s the point
    consistency is the point - so apply the principals of usability and make a styleguide people
    can use
    make it in code.
    This is an actual screenshot of a page of our styleguide.

    View full-size slide

  104. Elements
    Thursday, February 28, 13
    It’s common to think of pages in terms of areas, elements, and relationships.
    Have to break that down fundamentally and think of the building blocks of your elements.
    Add to traditional design mindset:
    Interchangeable elements
    Start with your content inventory. Then look carefully at the elements that live around and
    within your content.

    View full-size slide

  105. Elements
    Thursday, February 28, 13
    It’s common to think of pages in terms of areas, elements, and relationships.
    Have to break that down fundamentally and think of the building blocks of your elements.
    Add to traditional design mindset:
    Interchangeable elements
    Start with your content inventory. Then look carefully at the elements that live around and
    within your content.

    View full-size slide

  106. Design
    Design
    Thursday, February 28, 13
    Start with your content inventory. Then look carefully at the elements that live around and
    within your content.

    View full-size slide

  107. Thursday, February 28, 13
    This is my UI Library.

    View full-size slide

  108. Thursday, February 28, 13

    View full-size slide

  109. Interactions are essential
    design elements
    Thursday, February 28, 13

    View full-size slide

  110. Design Process || Dev Process
    Thursday, February 28, 13
    Do this and suddenly your design process and development process start to look alike.
    Hell, if you think that way, suddenly you start being able to design IN CODE.
    (I don’t think that way)

    View full-size slide

  111. Don’t worry, we’re
    almost done.
    Thursday, February 28, 13

    View full-size slide

  112. Benefits
    Everything has a place
    http://www.ultracraft.com/system/accessories/0000/0425/Drawer-Organizer-Metal_full.„g
    Thursday, February 28, 13

    View full-size slide

  113. Benefits
    File Size
    3.5 MB
    1.2 MB
    Thursday, February 28, 13
    Better factorization => less duplication. 2/3 reduction of total site-wide styles.

    View full-size slide

  114. Benefits
    Efficient communication
    Thursday, February 28, 13
    More efficient team thru better communication thanks to new vocabulary. completely
    Describing a page design can be done in ~15 minutes.

    View full-size slide

  115. Benefits
    Low Coupling
    Thursday, February 28, 13
    a clean separation in responsibilities, means changes breaks things less often in unexpected
    ways

    View full-size slide

  116. Benefits
    Built to last
    http://www.flickr.com/photos/wilhelmja/4233621517/
    Thursday, February 28, 13
    Ok. Pyramids are probably a bit of an exaggeration.
    These styles will be used and evolved for several years -- an eternity on the internet.

    View full-size slide

  117. Downsides
    ‣Learning curve
    ‣Harder to debug
    ‣Classitis
    ‣A lot of work
    Thursday, February 28, 13
    1-2 days of training to become capable. 3-4 weeks to be competent.
    It will take > 1 month for an experienced team to build a comprehensive styleguide.
    These styles will be used by a team. For the love of god, don't do
    this for your blog or a marketing/promotional site.

    View full-size slide

  118. Questions?
    Thursday, February 28, 13

    View full-size slide

  119. We like you.
    @shodoshan
    @chriseppstein
    Thursday, February 28, 13

    View full-size slide