Designer/Developer Workflow with Sass

Designer/Developer Workflow with Sass

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

723ee972f9e5078aeda85cdf0db3f3c8?s=128

Chris Eppstein

February 28, 2013
Tweet

Transcript

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

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

    13
  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.
  4. You can be free from suffering. http://www.indiegamemag.com/media/lightbulb.jpg Thursday, February 28,

    13
  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
  6. Development Speed Re-use Flexibility Repetition Requires Reduces Requires Reduces Thursday,

    February 28, 13 These tradeoffs are fundamental to software.
  7. “Why is it so slow to make new pages that

    look similar?” Hand coded CSS Thursday, February 28, 13
  8. I need to reuse my classnames. Thursday, February 28, 13

  9. and save time Thursday, February 28, 13

  10. There we go Thursday, February 28, 13

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

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

  13. But if I change that, it will affect these other

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

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

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

    Thursday, February 28, 13
  17. “Why is it so hard to roll out this change

    across the site?” Thursday, February 28, 13 It’s faster than it was,
  18. I didn’t know those things were related. Thursday, February 28,

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

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

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

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

    February 28, 13
  23. No problem. Thursday, February 28, 13

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

  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.
  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.
  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.
  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.
  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.
  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.
  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.
  32. Additive by Nature Styles Inherit and Cascade. “Turning off” styles

    is a code smell. Thursday, February 28, 13
  33. Constructing an Object Thursday, February 28, 13 From each category

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

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

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

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

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

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

    you can usually only pick 1 class to apply to the same element.
  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.
  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.
  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
  43. Thursday, February 28, 13

  44. Thursday, February 28, 13

  45. Thursday, February 28, 13

  46. Thursday, February 28, 13

  47. Thursday, February 28, 13

  48. Thursday, February 28, 13

  49. Thursday, February 28, 13

  50. Thursday, February 28, 13

  51. Thursday, February 28, 13

  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.
  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.
  54. Style Concern: Widgets • Styles for your interactive elements •

    SMACSS - Jonathan Snook Thursday, February 28, 13 Widgets are interactive elements (elements with state)
  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.
  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)
  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?
  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.
  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.
  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.
  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.
  62. The Name Game Thursday, February 28, 13 THESAURUS!!!

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

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

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

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

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

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

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

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

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

  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.
  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.
  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.
  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.
  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... :(
  77. Now you understand. • My site is so big •

    But I grok the fundamentals • But OMG where do I start? Thursday, February 28, 13
  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.
  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.
  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
  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
  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
  83. Property Soup Le average sass stylesheet. Thursday, February 28, 13

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

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

    13 How should we organize our style properties? <wait for it> Alphabetize them! <ayfkm> We can do better than this. We will organize our properties by style concern.
  86. Typography The non-color aspects of text. Thursday, February 28, 13

    Note how the typography and foreground are mixed up?
  87. Typography Typographic properties: font-xxx, line- height, bullets, text-xxx, margin Thursday,

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

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

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

    28, 13
  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.
  92. Spacers margin & padding on non-typographic elements Thursday, February 28,

    13
  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.
  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.
  95. An Object Description Our object description is longer now. Thursday,

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

    Re-Usable Re-Usable Thursday, February 28, 13
  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
  98. A Sad Reality Classitis provides a better user experience. Thursday,

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

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

  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
  102. Re-approach the Fundamentals Thursday, February 28, 13

  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.
  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.
  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.
  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.
  107. Thursday, February 28, 13 This is my UI Library.

  108. Thursday, February 28, 13

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

  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)
  111. Don’t worry, we’re almost done. Thursday, February 28, 13

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

  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.
  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.
  115. Benefits Low Coupling Thursday, February 28, 13 a clean separation

    in responsibilities, means changes breaks things less often in unexpected ways
  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.
  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.
  118. Questions? Thursday, February 28, 13

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