Hello, I’m Patrick Fulton. Front End Developer at Bearded.

1

!

@patrickfulton @beardedstudio

2 https://flic.kr/p/7iMvus

3 https://flic.kr/p/arGPzM

4

Be Kind to Your Future Self

5

Be Kind to Your Future Self

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

How?

• Build a “Starter Kit” • Code Reviews • Iterate, Fix Bugs, Iterate…

11

Start Building That Starter Kit!

12

• Sinatra (what Bearded currently uses)

• Middleman

• Assemble

• Jekyll

• http://staticsitegenerators.net/

• Plain, old HTML, CSS and JS (ala HTML5 Boilerplate)

• Google’s Web Starter Kit (http://bit.ly/1nRqAHc)

LOL WUT?

13

What Are We Repeating?

14

What Are We Repeating?

15

Think Modularly

16

Think Modularly

“Atomic design is a methodology used to construct web design systems.”

!http://patternlab.io

17

Atoms

18

Molecules

19

Organisms

20

How’s Your Flow?

21

https://www.aahomecare.org/

Think Modularly

22

Think Modularly

23

Code Modularly

24

<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>

A Class By Any Other Name…

25

.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; } }

A Class By Any Other Name…

26

.attribution { @include subtle-text; a { @include subtle-link; } .field-label { color: $heading-color; font-size: inherit; } }

Further Abstraction

27

Preprocessors

28

Variables, Mixins, Functions, Math

29

Mixins

30

@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; } }

Variables

31

$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;

Grid System

32

$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)); } !

Let’s Get Organized

33

Partials

34

@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";

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

35

Media Queries and Sass

36

Media Queries: Old Way

37

@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"; }

Breakpoint

38

Breakpoint: Variables

39

// 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;

Media Queries with Breakpoint

40

.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; } }

Media Queries with Breakpoint

41

.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%; } }

Breakpoint: Compiled CSS

42

.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%; } }

What About Older Browsers (IE)?

43

DisclaimerWe serve a “fixed-width” experience to versions < IE9.

44

Google’s Web Starter Kit

45

http://bit.ly/1nRqAHc

Google’s Web Starter Kit

46

• RWD-ready

• Living Style Guide

• LiveReload

• Built-in Server

• Sass support

• Performance optimization & PageSpeed Insights

• Cross-device synchronization

Code Reviews

47

There Is No Prfectt

48

Fix Bugs & Iterate

49

Iterate, Iterate, Iterate

50

HTML & CSS Wireframes

51

HTML & CSS Wireframes

52

HTML & CSS Interactive Mockups

53

HTML & CSS Interactive Mockups

pghtrip.org54

Styleguides

http://bit.ly/1pCqWoX

55

Styleguides• KSS • Styledocco • Hologram • Roll Your Own

56

Hand-offs

57

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...

58

The Internet Is Your Friend• Listen • Share • Adapt • Repeat

59

The Internet Is Your Friend

60

Let’s Move The Web Forward

61

Be Kind

62

Thank you! !

@patrickfulton @beardedstudio

63