CSS Dev Conf

Transcript

1. Style-Guide Driven UI Design with Sass Jina Bolton // Product Designer // Do CSS Dev Conf // 2012
3. A fractured process makes for a fractured user experience.” ” —Nate Fortin
4. Create pages
5. Create pages
6. Create systems
7. 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
8. Writing an Interface Style Guide | A List Apart Articles
9. Style Guide Elements
10. Brand Guidelines Logos Tone & Voice Copywriting Standards Typography Color Palettes
11. Layout Grids Spacing Image & Media Sizes
12. Development Standards HTML, CSS, & JS Naming Conventions Directory Structures Validation & QA Version Control
13. Design | Android Developers
14. Style | Design | Android Developers
15. Patterns | Design | Android Developers
16. Building Blocks | Design | Android Developers
17. Building Blocks | Design | Android Developers
18. Do Android Design Comp Library on Project Wiki on GitHub
19. Style Guide | Starbucks
20. Promo Layout A | Style Guide | Starbucks
21. Toggled Backgrounds | Style Guide | Starbucks
22. Toggled Baseline | Style Guide | Starbucks
23. Toggled Boxes | Style Guide | Starbucks
24. Toggled Grid | Style Guide | Starbucks
25. All of the Toggles! | Style Guide | Starbucks
26. Style Tiles
27. Style Tile for The Washington Examiner Site 2012 Campaign Site
28. CSS Preprocessors + Style Guides = Super Rad
29. Keep documentation current & useful
30. Easier maintainability
31. DRY Development
32. Patterns & Proportions
33. Stylus
34. sass-lang.com
35. compass-style.org
36. Sass Benefits
37. Nesting
38. ul.items a { ... } ul.items:hover { ... } .ie-6 ul.items a { ... } Output: SCSS: ul.items a { ... &:hover { ... } .ie-6 & { ... } }
39. ul.items { ... } @media print { ul.items { ... } } Output: SCSS: ul.items a { ... @media print { ... } }
40. .sidebar { border: 1px solid #eee; border-top-color: #fff; border-left: 0; } Output: SCSS: .sidebar { border: 1px solid #eee { top-color: #fff; left: 0; } }
41. Variables
42. body { color: #444; } footer { background: #444; } Output: SCSS: $text: #444; $bg: $text; body { color: $text; } footer { background: $bg; }
43. Mixins & Extend
44. .module { padding: 1em; } .info { padding: 2em } Output: SCSS: @mixin spacing($s: 1em) { padding: $s; } .module { @include spacing; } .info { @include spacing(2em); }
45. .message, .error { ... } .message.alert, .error.alert { ... } .error { ... } Output: SCSS: .message { ... &.alert { ... } } .error { ... @extend .message; }
46. Placeholder Selectors
47. .module, .sidebar { color: #444; } .sidebar, .main { width: 240px; } Output: SCSS: .module { color: #444; } %grid-1 { width: 240px; } .sidebar { @extend .module; @extend %grid-1; } .main { @extend %grid-1; }
48. Color Functions
49. $text: #444 color: lighten($text, 5%); color: darken($text, 5%); color: saturate($text, 5%); color: adjust-hue($text, 180); color: grayscale($text); color: mix($text, #fff);
50. sassme.arc90.com/
51. Commenting Options
52. /* Multiline comment; appears in output */ Output: SCSS: /* Multiline comment; appears in output */ // Singleline comment; // Hidden from output
53. Operations
54. body { font-size: 24px; } Output: SCSS: $size: 12px; body { font-size: $size * 2; }
55. Functions
56. .i-red { background: url(red.png); } .i-blue { background: url(blue.png); } Output: SCSS: @each $c in red, blue { .i-#{$c} { background: url(#{$c}.png); } }
57. .i-red { color: red; } .i-blue { color: blue; } Output: SCSS: @mixin i($color) { @if $color == red { color: red; } @else { color: blue; } } .i-red { @include i(red); } .i-blue { @include i; }
58. Error Reporting
59. First Variables. Then Mixins. Then @extend. Then more advanced stuff! Start with baby steps
60. Stay organized
61. Clarity is beautiful.
62. Clarity > Brevity
63. If you’re nesting more than 3 levels deep, you’re probably doing something wrong.
64. File Organization images/ content/ layout/ javascripts/ vendor/ stylesheets/ vendor/
65. Front-end Maintainability with Sass and Style Guides | Engine Yard Blog
66. Engine Yard App Cloud, Early 2011
67. Engine Yard App Cloud, Early 2011
68. jacobrask.github.com/styledocco/
69. jacobrask.github.com/styledocco/styledocco/examples/bootstrap/docs/buttons.html
70. My Typical Sass Organization
71. // ---------------------------------- // 01. VENDOR FRAMEWORKS @import "compass"; @import "susy";
72. // ------------------------------------ // 02. RESET * { @include box-sizing(border-box); } @import "vendor/normalize";
73. // --------------------------------------------------------- // 03. DEPENDENCIES // Variables/mixins/placeholders/etc // These don’t emit CSS on their own // until they are used. @import "dependencies/measurements"; @import "dependencies/typography"; @import "dependencies/color"; @import "dependencies/images"; @import "dependencies/themes";
74. // --------------------------------------------------------- // 04. FOUNDATION // Plain semantic HTML // No classes/IDs are introduced yet. @import "foundation/page"; @import "foundation/links"; @import "foundation/headings"; @import "foundation/text"; @import "foundation/lists"; @import "foundation/forms";
75. // ---------------------------------- // 05. COMPONENTS // Reusable modules, components, etc. @import "components/buttons"; @import "components/messaging"; @import "components/dropdowns";
76. // ---------------------------------- // 06. LAYOUT @import "layout/grid"; @import "layout/banner"; @import "layout/navigation"; @import "layout/complementary"; @import "layout/contentinfo";
77. // ---------------------------------- // 07. TOOLS @import "tools/helpers"; @import "tools/print";
78. Do
79. Caption and/or URL
80. http://codepen.io/jina/pen/iosjp
81. do.com’s Rainbow Color Stripe
82. Do Style Guide
83. Do Style Guide
84. Do Style Guide
85. What else?
86. compass.handlino.com
87. mhs.github.com/scout-app
88. livereload.com
89. codekit.com
90. susy.oddbird.net
91. stuffandnonsense.co.uk/projects/320andup
92. smacss.com
93. blesscss.com
94. Just give it a try!
95. sass-lang.com
96. Team Sass Design FTW!
97. Sass Logo Inspiration
100. Sass Brand Guidelines
101. Sass Style Tile
102. Current Design Progress. Stay tuned!
103. @TeamSassDesign
104. #teamSass
105. Be regular and orderly in your life so that you may be violent and original in your work.” ” —Gustave Flaubert
106. sushiandrobots.com
107. artinmycoffee.com
108. speakerdeck.com/u/jina
109. @jina Thank You!