Be Kind To Your Future Self

My front-end workflow talk from ConvergeSE 2014 with a dash of Sass & Compass

Transcript

2. Hello, I’m Patrick Fulton. Front End Developer at Bearded. ! @patrickfulton @beardedstudio
3. https://flic.kr/p/7iMvus
4. https://flic.kr/p/arGPzM
5. https://flic.kr/p/arGPzM
6. Be Kind to Your Future Self
7. Be Kind to Your Future Self
8. Be Kind to Your Future Self
9. Be Kind to Your Future Self
10. Be Kind to Your Future Self
11. Be Kind to Your Future Self
12. How? • Build a “Starter Kit” • Code Reviews • Iterate, Fix Bugs, Iterate…
13. Start Building That Starter Kit! • Sinatra (what Bearded uses) • Middleman • Yeoman (roll your own generator!) • Assemble • FireShell • http://staticsitegenerators.net/ • Plain, old HTML, CSS and JS (ala HTML5 Boilerplate)
14. LOL WUT?
15. What Are We Repeating?
16. What Are We Repeating?
17. Think Modularly
18. Think Modularly “Atomic design is a methodology used to construct web design systems.” ! http://patternlab.io
19. Atoms
20. Molecules
21. Organisms
22. How’s Your Flow?
23. How’s Your Flow? https://www.aahomecare.org/
24. Think Modularly
25. Think Modularly
26. Code Modularly <section id="membership"> <h2 class="block-heading">Membership</h2> <div class="membership-info"> <h2 class="title">Become a Member</h2> <p>Start enjoying the benefits of being an AAHomecare member today.</p> <span class="rule"></span> </div> <div class="membership-links"> <a class="button" href="/membership/join">Join AAHomecare</a> <ul> <li><a href="/membership/benefits">Benefits of Membership</a></li> <li><a href="/membership/join">Types of Membership</a></li> </ul> </div> </section>
27. A Class By Any Other Name… .field-name-field-webinar-sources, .views-field-field-global-authors, .field-name-field-global-person-name, .field-name-field-magazine-feature, .views-field-created, .views-field-field-global-state, .field-name-field-global-location, .field-name-field-global-date, .views-field-field-global-date, .group-teaser-subtitle, .field-name-field-global-company, .field-name-field-global-email-address, .field-name-field-global-organization, .field-name-field-conf-venues, .views-field-field-course-type, .field-name-field-techpresentation-source, .field-name-field-global-authors, .field-name-field-global-person-profile, .field-name-field-global-people-collected { @include subtle-text; a { @include subtle-link; } .field-label { color: $heading-color; font-size: inherit; } }
28. A Class By Any Other Name… .attribution { @include subtle-text; a { @include subtle-link; } .field-label { color: $heading-color; font-size: inherit; } }
29. Further Abstraction
30. Preprocessors
31. Variables, Mixins, Functions, Math
32. Mixins @mixin button { padding: 0.5em 1em; text-decoration: none; color: $background-color; background-color: $link-color; @include border-radius(4px); &:hover, &:focus { text-decoration: none; background-color: $link-color-hover; } }
33. Variables $text-color: #888; $heading-color: $text-color; $text-color-subtle: lighten($text-color, 30%); ! $link-color: #555; $link-color-hover: darken($link-color, 15%); ! $highlight-color: #333; $highlight-color-hover: darken($highlight-color, 15%); ! $border-color: #ccc; ! $background-color: #fff; $background-color-subtle: #eee; ! $footer-color: $link-color;
34. Grid System $gutter_width: 3.5%; $columns: 12; $column_width: 5.125%; $grid_width: ((($column_width+($gutter_width))*$columns)- $gutter_width); ! @mixin container($max-width: 81.25em) { width: $grid_width; margin: auto; max-width: $max-width; *zoom: 1; } ! @function column_width($num) { @return ($num * $column_width) + (($num - 1) * ($gutter_width)); } !
35. Let’s Get Organized
36. Partials @import "lib/colors"; @import "lib/grid"; @import "lib/mediaqueries"; @import "lib/typographic-mixins"; @import "lib/general-mixins"; @import "lib/icons"; ! @import "general"; @import "forms"; @import "header"; @import "footer"; @import "homepage"; @import "haunts"; @import "internal"; @import "notifications"; @import "secondary-navigation"; @import "reviews";
37. Let’s Get Organized “Clean Out Your Sass Junk Drawer” http://bit.ly/RVzto0 http://youtu.be/EmNcD3b3ZtI ! ! See it in action: Toadstool http://bit.ly/1nQmKwX
38. Media Queries and Sass
39. Media Queries: Old Way @media only screen and (min-width: 425px) { @import "layout/small"; } ! @media only screen and (min-width: 600px) { @import "layout/medium"; } ! @media only screen and (min-width: 900px) { @import "layout/large"; } ! @media only screen and (min-width: 1100px) { @import "layout/large-xl"; } ! @media only screen and (min-width: 1200px) { @import "layout/huge"; }
40. Breakpoint
41. Breakpoint: Variables // media query variables (for breakpoint) ! // tell Breakpoint to convert px values to em values $breakpoint-to-ems: true; ! $bp-s: 400px; $bp-m: 600px; $bp-l: 800px; $bp-xl: 960px; $bp-xxl: 1100px;
42. Media Queries with Breakpoint .container { @include container; width: 95%; padding: 0 2.5%; ! @include breakpoint($bp-s) { width: 90%; padding: 0 5%; } @include breakpoint($bp-l) { width: 95%; padding: 0 2.5%; } @include breakpoint($bp-xl) { width: 100%; padding: 0; } }
43. Media Queries with Breakpoint .primary { margin: 0 auto; width: 90%; @include breakpoint($bp-m) { float: left; margin-right: 3.5%; width: 65%; } } ! .sidebar { margin: 0 auto; width: 90%; @include breakpoint($bp-m) { border-left: 1px #ccc solid; float: left; padding-left: 2em; width: 25%; } }
44. Breakpoint: Compiled CSS .primary { margin: 0 auto; width: 90%; } ! @media (min-width: 37.5em) { .primary { float: left; margin-right: 3.5%; width: 65%; } } ! .sidebar { margin: 0 auto; width: 90%; } ! @media (min-width: 37.5em) { .sidebar { border-left: 1px #ccc solid; float: left; padding-left: 2em; width: 25%; } }
45. Awesome.
46. What About Older Browsers (IE)?
47. Disclaimer We serve a “fixed-width” experience to versions < IE9.
48. Code Reviews
49. There Is No Prfectt
50. Fix Bugs & Iterate
51. Iterate, Iterate, Iterate
52. HTML & CSS Wireframes
53. HTML & CSS Wireframes
54. HTML & CSS Interactive Mockups
55. HTML & CSS Interactive Mockups pghtrip.org
56. Styleguides http://bit.ly/1pCqWoX
57. Styleguides • KSS • Styledocco • Hologram • Roll Your Own
58. Hand-offs
59. Hand-offs • Need the code? HTML, CSS, and JS are ready to go! • Does the client have an internal team? Train them. • Document, document, document...
60. The Internet Is Your Friend • Listen • Share • Adapt • Repeat
61. The Internet Is Your Friend
62. Let’s Move The Web Forward
63. Be Kind
64. One More Thing… futureisnext.com
65. Thank you! ! @patrickfulton @beardedstudio