Old Dog, New Tricks

Awwwards Love Days, Paris February 2014.

In 2006 Simon wrote a successful book about learning CSS. Building the web wasn’t easy back then, but CSS was pretty basic. Simon also used to talk about systems a lot, but didn’t have many answers. Fast-forward to 2014 and everything has changed; that CSS book is both useless and wrong, and systems inform much of what we build. This talk will look at how the landscape changed for front-end designers, and how we must think more holistically about the scope of our projects. With practical examples he’ll explore the tools, methodologies and systems that reenergised him and helped make sense of the whole darned mess.

Transcript

1. View Slide

2. View Slide

3. That book
   

   View Slide

4. http://csswebdevelopment.com
   

   View Slide

5. “Before this book, I felt like a monkey with a clipboard.”
   “Now, I feel like I have been promoted from a monkey with a clipboard
   to a human.”
   “Even if you don't want to learn the art of CSS and are a dairy cow farmer
   that dosn't speek english, i still recomend this book!”
   “I hope the royalties from the book pay for a comfortable retirement.”
   “For me, the book ended too soon.”
   “I bought this book in 2009, and I use it to this day to help me with CSS.”
   

   View Slide

6. “I appreciate Simon's approach to learning. Ok ~ time for a cuppa tea and
   then back to it. Very English ~ I'm Australian so we have similar traditions
   and a cuppa tea is one I'm very glad for.”
   “He even tells you (often -- he's English!) when's a good time to grab a cup
   of tea.”
   “He also encouraged me to drink more tea.”
   “Take Simon's advice when he suggests getting a cup of tea.”
   “The author seems to have a thing for tea.”
   

   View Slide

7. "Way too many hacks/workarounds for IE 5
   and other really old browsers."
   

   View Slide

8. Ken Mosher “Timelord”
   “For a Brit his humor is NOT funny! Collison needs to
   read "Eats, Shoots and Leaves" if he wants to learn
   about British humor. In the meantime, just skip it;
   you're not John Cleese!”
   "I disagree that it's fantastic or any other superlative
   that others have applied.”
   4/5 stars
   

   View Slide

9. View Slide

10. 
    Hedgehogs
    This is all about hedgehogs.
    Read more about
    hedgehogs.
    
    

    View Slide

11. .block h3 {
    targeted heading styles
    }
    .block p {
    targeted paragraph styles
    }
    .block p a:link {
    targeted link styles
    }
    

    View Slide

12. .home .content_main .section .block p a:link {
    very specific link styles
    }
    

    View Slide

13. View Slide

14. Web “pages”
    

    View Slide

15. View Slide

16. "We don’t design web pages. We design systems”
    

    View Slide

17. “What we build is rarely finished. We build systems that
    flex and grow with the client, the business, the
    organisation, the community, and the availability of new
    devices.
    “Once we have systems we understand, we can then
    learn to break their rules and be truly creative. ”
    

    View Slide

18. “We’re beginning to think about the “systems” we use as
    more holistic, made up of much more than just
    mathematical foundations, but also the flexibility of
    colour, type families, use of whitespace, light and shade,
    form and shape.
    “By better understanding the possibilities of HTML and
    CSS, our ability to be creative and bold with systems
    increases significantly.”
    

    View Slide

19. Base layer
    

    View Slide

20. Basic HTML files & naming conventions
    PHP for basic templates prior to CMS integration.
    CSS: Stylesheets, IE-specific, reset, scratch files etc.
    JavaScript: jQuery, onload triggers, transparency support
    Other Assets such as folders for images, Flash etc.
    

    View Slide

21. Allowed better collaboration within the team; the designer could
    jump into the developer’s code and vice-versa.
    Anyone who hadn’t even worked on a certain project could jump in
    and quickly solve problems because everything was on convention.
    Kept output fresh and ensured use of best practices.
    Established a thoroughly connected layer of base files allowing for
    swift CSS and JavaScript implementation and other assets.
    Made life easier for developers and designers... and anyone really
    Helped maintain quality control
    

    View Slide

22. Root
    Root
    (circa 2009)
    

    View Slide

23. Stylesheets
    (circa 2009)
    

    View Slide

24. JavaScript
    (circa 2009)
    

    View Slide

25. Assets
    (circa 2009)
    

    View Slide

26. Pattern Libraries
    Anna Debenham
    24 Ways: http://24ways.org/2011/front-end-style-guides/
    Her book: http://www.fivesimplesteps.com/products/front-end-style-guides
    

    View Slide

27. http://www.bbc.co.uk/gel/mobile/device-considerations/philosophy
    

    View Slide

28. http://www.starbucks.com/static/reference/styleguide/
    

    View Slide

29. http://ux.mailchimp.com/patterns/
    

    View Slide

30. http://sfdc-styleguide.herokuapp.com/
    

    View Slide

31. http://sfdc-styleguide.herokuapp.com/
    

    View Slide

32. http://sfdc-styleguide.herokuapp.com/
    

    View Slide

33. http://sfdc-styleguide.herokuapp.com/
    

    View Slide

34. Present day
    

    View Slide

35. Code sketches
    

    View Slide

36. View Slide

37. Sass
    http://sass-lang.com
    Dan Cederholm
    Sass for Web Designers
    http://www.abookapart.com/products/sass-for-web-designers
    

    View Slide

38. @import "compass";
    // SASS variables
    $white: #fff;
    $black: #000;
    $grey: #ccc;
    $light_grey: #eeeeee;
    $mid_grey: #999;
    $dark_grey: #666;
    $darkest_grey: #333;
    $yellow: #ffffcc;
    

    View Slide

39. http://compass-style.org
    

    View Slide

40. @include border-radius(2em);
    @include box-shadow
    (rgba($black_light, 0.2) 0px 1px 10px 4px);
    @include box-sizing(border-box);
    

    View Slide

41. http://smacss.com
    

    View Slide

42. 
    Hedgehogs
    This is all about hedgehogs.
    Read more about
    hedgehogs.
    
    

    View Slide

43. .block h3 {
    targeted heading styles
    }
    .block p {
    targeted paragraph styles
    }
    .block p a:link {
    targeted link styles
    }
    

    View Slide

44. 
    Hedgehogs
    This is all about
    hedgehogs. class=“block_link”>Read more about
    hedgehogs.
    
    

    View Slide

45. .block_heading {
    targeted heading styles
    }
    .block_intro {
    targeted paragraph styles
    }
    .block_link {
    targeted link styles
    }
    

    View Slide

46. Systems
    

    View Slide

47. Deliver Modules
    

    View Slide

48. http://daverupert.com/2013/04/responsive-deliverables
    

    View Slide

49. // haven / styles
    @import '_base';
    @import '_modules';
    @import '_theme';
    @import '_custom';
    

    View Slide

50. .box {
    border: 1px solid;
    padding: 10px;
    }
    

    View Slide

51. .box {
    @include border-radius(3px);
    @include box-shadow(inset 0 0 7px 2px rgba($black,0.03));
    border-color: $gray;
    font-size: 0.9em;
    padding: 15px;
    }
    

    View Slide

52. View Slide

53. Components
    Flexible grid
    Typography
    Navigation
    Accessible form controls
    Carousels
    Tabbed navigation
    Responsive tables
    Accordions
    Media lists
    Dropdowns
    Pagination
    Data tables
    Buttons
    Icon fonts
    Strategy
    Responsive images
    Responsive typography
    Accessibility architecture
    Legacy browser support
    Performance budget
    Interaction/Animations
    Responsive advertising
    Layouts
    Homepage layout
    Subpage layout
    Article index layout
    Article layout
    Product index layout
    Product detail layout
    Sign up flow
    Checkout flow
    http://daverupert.com/2013/04/responsive-deliverables
    

    View Slide

54. http://filamentgroup.com/lab/grade_components/
    

    View Slide

55. Patterns
    

    View Slide

56. http://pattern-lab.info/
    

    View Slide

57. Atoms
    Molecules
    Organisms
    Templates
    Pages
    

    View Slide

58. Language
    

    View Slide

59. My processes
    

    View Slide

60. I am a module
    

    View Slide

61. Two core systems
    

    View Slide

62. Skeletor (internal project)
    

    View Slide

63. Simplify the process of getting a new social
    application up and running.
    Standardize the assorted, non-core pages that are a
    part of each app (signup, login, settings).
    Treat the non-core pages like a core product and give
    them the attention they deserve.
    Create an implicit link between all Fictive Kin
    products by virtue of a shared user experience.
    

    View Slide

64. Signup
    Login
    Settings
    Logout
    Purpose
    People
    — Following
    — Followers
    — Find friends
    — Invite friends
    Profile
    

    View Slide

65. Fully tested
    Responsive
    Browser tested
    Monitored
    Accessible
    Optimised
    

    View Slide

66. @import 'modules/_modules_functions';
    @import 'modules/_modules_mixins';
    @import 'modules/_base';
    @import 'modules/_core';
    @import 'modules/_forms';
    @import ‘modules/_buttons';
    

    View Slide

67. @mixin img-block ($url, $width, $height) {
    ! background: url(#{$url}) 0 0 no-repeat transparent;
    ! display: block;
    ! height: $height;
    ! overflow: hidden;
    ! text-indent: -9999px;
    ! vertical-align: top;
    ! white-space: nowrap;
    ! width: $width;
    }
    

    View Slide

68. .app-logo {
    ! @include img-block("img/bootstrap/app_logo.png", 214px, 23px);
    }
    

    View Slide

69. Grayskull (internal project)
    

    View Slide

70. Flask
    Flask-Script
    Blinker/Signals
    Boto
    Pyes
    Python-Dateutil
    Requests-OAuthlib
    Raven
    

    View Slide

71. Templating
    

    View Slide

72. 
    class="isAccountActive(name)">
    
    [[service.display_name]]
    
    
    

    View Slide

73. Data layers
    

    View Slide

74. "twitter": {
    "name": "Twitter",
    "filters": {
    "collections": {
    "all": {
    "label": "All Tweets",
    "symbolset": "inbox"
    },
    "tweets": {
    "label": "Your Tweets",
    "symbolset": "user"
    },
    "favorites": {
    "label": "Your Favorites",
    "symbolset": "star"
    }
    }
    }
    }
    

    View Slide

75. Modular everything
    

    View Slide

76. 1:1 2:1 1:2 4:3
    16:9
    

    View Slide

77.  
      Asset  goes  here  
    
    

    View Slide

78. .asset  {
      position:  relative;
      width:  25%;  /*  (row  of  four  assets)  */
    }
    

    View Slide

79. /* Aspect ratios:
    1:1 = 100%,
    2:1 = 50%,
    1:2 = 200%,
    4:3 = 75%,
    16:9 = 56.25% */
    .ar-1-1 .asset:before {
    content: "";
    display: block;
    padding-top: 100%;
    }
    

    View Slide

80. /* Aspect ratios:
    1:1 = 100%,
    2:1 = 50%,
    1:2 = 200%,
    4:3 = 75%,
    16:9 = 56.25% */
    .ar-2-1 .asset:before {
    content: "";
    display: block;
    padding-top: 50%;
    }
    

    View Slide

81. /* Aspect ratios:
    1:1 = 100%,
    2:1 = 50%,
    1:2 = 200%,
    4:3 = 75%,
    16:9 = 56.25% */
    .ar-1-2 .asset:before {
    content: "";
    display: block;
    padding-top: 200%;
    }
    

    View Slide

82. /* Aspect ratios:
    1:1 = 100%,
    2:1 = 50%,
    1:2 = 200%,
    4:3 = 75%,
    16:9 = 56.25% */
    .ar-4-3 .asset:before {
    content: "";
    display: block;
    padding-top: 75%;
    }
    

    View Slide

83. /* Aspect ratios:
    1:1 = 100%,
    2:1 = 50%,
    1:2 = 200%,
    4:3 = 75%,
    16:9 = 56.25% */
    .ar-16-9 .asset:before {
    content: "";
    display: block;
    padding-top: 56.25%;
    }
    

    View Slide

84. .content  {
      position:  absolute;
      top:  0;
      left:  0;
      bottom:  0;
      right:  0;
    }
    

    View Slide

85. Twitter
    Instagram
    Flickr
    Gimme Bar
    Pinterest
    Svpply
    Foursquare
    last.fm
    Pinboard
    Delicious
    Goodreads
    Tumblr
    image
    video
    text snippet
    GIF
    bookmark
    place
    status
    full page
    recipe
    article
    product
    

    View Slide

86. To conclude
    

    View Slide

87. Thanks :)
    @colly
    colly.com
    fictivekin.com
    

    View Slide

88. View Slide