Upload
others
View
5
Download
0
Embed Size (px)
Citation preview
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