Sass: Bridging the Designer/Developer Gap

In this talk both designers and developers will discover:
• how to work together to craft both visually and programmatically stunning interfaces while wielding the power of Sass
• the benefits of using Sass & Compass to create a translation layer from design to code
• processes and artifacts that can help foster cross-discipline collaboration

Transcript

1. Sass: Bridging the Designer Developer Gap @bermonpainter // SassConf 2013
2. Designer Developer or
3. Designers
4. Right-Brained
5. Intuitive, Creative
6. Trendy
7. Hipster
8. Afraid of the Command-Line
9. Sole Existence is to Make Things Pretty
10. Developers
11. Le!-Brained
12. Linear Thinker
13. Technical
14. Bearded
15. Incapable of using Photoshop
16. Sole Existence is to Make Things Function
17. How Most Teams Work
18. Design Front-End Back-End Ship Typical Process
19. Enterprise Process Content UX/IA Design Front-End Back-End Ship (maybe)
20. Typical Process 1. Creates Silos 2. Information Flows One Direction 3. Checkbox Mentality
22. We have one job.
23. We have one job. Ship Things.
24. Designer Developer +
26. Human beings have an inherit tendency to seek out novelty and challenges, to extend and exercise their capabilities, to explore and to learn.” Edward Deci “
27. Self-Determination Theory Human nature requires three universal and basic needs to function and grow optimally.
28. 1. Competence We are proactive in our own desires to achieve mastery.
29. 2. Relatedness We have an inherit tendency toward growth, to interact, to be connected to, and experience caring for others.
30. 3. Autonomy We are agents of our own life and act in harmony with our integrated self.
32. Experimenting
33. 1. Agile / Fluid Teams Allow teams the ability to be truly agile and fluid.
34. 2. Autonomy The ultimate freedom for creative groups is the freedom to experiment with new ideas. Some skeptics insist that innovation is expensive. In the long run, innovation is cheap. Mediocrity is expensive–and autonomy can be the antidote.” – Tom Kelly, IDEO
35. 3. Concurrent Creation Creation is a shared activity.
36. 4. Opportunities for Mastery Deliberate Practice + Time + Repetition = Mastery
37. Design UX/IA Front-End Back-End Content Ship A Better Process
38. Design UX/IA Front-End Back-End Content Ship Focus
39. Get to the end product with as little waste as possible
40. Create only what’s necessary to validate or invalidate decisions.
41. Style Tiles High level aesthetics that help the initial stages of creating a visual design language.
47. Serious About a Web Built Right Serious About a Web Built Right (without taking ourselves too seriously) (without taking ourselves too seriously) Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non.
48. Element Collages Various interface elements created out of context so ideas can be explored quickly.
52. Style Guides Refined aesthetic ready to implement.
58. Style guide HOME IDENTITY WEBSITES SANDSTONE OVERVIEW BUTTONS COLORS FORMS GRIDS TABLES & LISTS TABZILLA TYPEFACES EXAMPLES COMMUNITY SITES DOMAIN STRATEGY Sandstone grid system Sandstone grid system Responsive Responsive grids grids The default grid system for Sandstone is 12 columns at a width of 940px. See the chart to the right and the grid examples below for further details including tablet and smartphone sizes. Screen format Width Column Gutter # of col. Smartphone (vert.) 320px 40px 20px 5 col Smartphone (horiz.) 480px fluid expansion of smartphone Tablet 768px 40px 20px 12 col Desktop 990px 60px 20px 12 col Download PSDs Download PSDs Desktop Tablet Phone Smartphone Smartphone Tablet Tablet PREV NEXT
59. 0. Overview 0. Overview 1. Buttons 1. Buttons 2. Forms 2. Forms 3. Source Code 3. Source Code 4. Text Styling 4. Text Styling 5. Listings 5. Listings 6. Boxed Groups 6. Boxed Groups 7. Icons 7. Icons 8. Navigation 8. Navigation 9. Behavior 9. Behavior 10. Discussion 10. Discussion 11. Colors 11. Colors 12. Animations 12. Animations 13. Select Menu 13. Select Menu 2.1 Typical form groups — <dl.form> with a <dt> containing the label and ` containing the form elements. .required - This group is required to submit the form.   Sign up Sign up Sign in Sign in CSS Styleguide Overview Overview Styling & CSS Styling & CSS Markup & Templates Markup & Templates Behavior & JavaScript Behavior & JavaScript Ruby Ruby Words Words Mobile Mobile Example Value Choose an option Example Text Example Label Example Value Choose an option .required Example Text * Example Label * Explore Explore Features Features Enterprise Enterprise Blog Blog Search or type a command ? ?
60. Chris Chris Sign Out Sign Out Search caring.com Backgrounds Reading text basic paragraph or line. Keep the line height at 21px to preserve out vertical rhythm. Contributed (UGC) text basic paragraph or line. Keep the line height at 21px to preserve out vertical rhythm. Caption or Date Link Bulleted List Containers .low-priority-area: Only transparent backgrounds are allowed for this container type. Typography H1 H2 H3 H4 Styles A-Z Typographic Care Senior Layout Directory BG & Container Matters Caring Forms My Widgets
61. Introduction Introduction Documentation Syntax Documentation Syntax Generate Styleguides Generate Styleguides View the code on GitHub View the code on GitHub KSS is intended to help automate the creation of a living styleguide. A styleguide serves as a place to publish KSS documentation and visualize different states of UI elements defined in your CSS. It’s sometimes hard to explain what a living styleguide is. The best way to explain is through examples. The GitHub CSS Styleguide is a good example of a living styleguide generated with KSS. In particular, you can see the value of KSS on pages like the buttons section. Generating your own styleguide Generating a styleguide with KSS is pretty easy with Rails, Sinatra or any other framework that you can include gems with. These instructions are for setting up a KSS styleguide with the Ruby programming language. Please keep in mind KSS is not a Ruby-only program! This is just one possible implementation of many. Help me write a binary generator to fix this! In the controller In the controller, create a new instance of the KSS parser like so: # Renders the css styleguide in accordance to KSS. def styleguide @styleguide = Kss::Parser.new("#{RACK_ROOT}public/stylesheets")
62. Kalei - Style guide Kalei - Style guide Generates bootstrap-like documentation for your own CSS! This project aims at making sure your style sheets are fully documented whilst being synchronized with your webpages styles. To do this it actually uses your live stylesheets in so that at anytime you can review how your styleguide looks. This website is a live example generated from Kalei's style.css Star Star 292 292 Fork Fork 51 51
63. HTTPS clone URL https://github.com/darcyclarke/DSS.git You can clone with HTTPS, or Subversion.  latest commit 7fd92eabc0 Documented Style Sheets Merge pull request #44 from darcyclarke/bug/fix-whitespace-in-markup shanejonas authored 7 months ago  .gitignore Fixed state parser, added some more styling to example docs and modif… 7 months ago  LICENSE-MIT Added Grunt support 7 months ago  README.md Update _dss reference 7 months ago  dss.js add newlines back in markup 7 months ago  package.json Update _dss reference 7 months ago   README.md README.md Official Logo   Sign up Sign up Sign in Sign in 62 12   Star Star   Fork Fork darcyclarke / DSS PUBLIC    Code Code   Issues Issues 3 3   Pull Requests Pull Requests 0 0   Wiki Wiki   Pulse Pulse   Graphs Graphs   Network Network   ?   Clone in Desktop Clone in Desktop   Download ZIP Download ZIP  95 commits  9 branches  0 releases  5 contributors     master master branch: DSS /  … DSS Explore Explore Features Features Enterprise Enterprise Blog Blog Search or type a command This repository This repository ? ?
64. StyleDocco StyleDocco generates documentation and style guide documents from your stylesheets. Stylesheet comments will be parsed through Markdown and displayed in a generated HTML document. You can write HTML code prefixed with 4 spaces or between code fences ( ``` ) in your comments, and StyleDocco shows a preview with the styles applied, and displays the example HTML code. The previews are rendered in resizable iframes to make it easy to demonstrate responsive designs at different viewport sizes. Suggestions, feature requests and bug reports are very welcome, either at GitHub or on Twitter (@jacobrask). Installation StyleDocco requires Node.js. After installing Node.js, run npm install -fg styledocco or clone this repository. StyleDocco is free software, released under the MIT license. Examples Stylesheet The following is the code you would write in your stylesheet, and the Output is what you would see in the documentation. /* Provides extra visual weight and identifies the primary action in a set of buttons. <button class="btn primary">Primary</button> StyleDocco StyleDocco examples examples source code source code
65. Rapid Prototypes Cross-discipline collaboration between designers + developers.
66. fin.