Intro to Front End at Paperless Post

Intro to Front-End at Rachel Ober @rachelober [email protected]

What is Front-End?

Structure, style & behavior

HTML (Structure)

CSS (Style)

JavaScript (Behavior)

Project life cycle, where do we ﬁt in?

Feature Idea Requirements Gathering Wire Framing Back-end Development Front-end Development
Quality Assurance Production

What do we support?

Which Browsers Windows and Mac (best case experience) Windows and
Mac Windows, Mac, iOS Windows (progressive enhancement above IE7)

Think about what’s the most important behavior.

Some limited features available depending on desktop vs mobile
vs iOS.

Technologies at

HTML Haml

CSS Sass & Compass

JavaScript jQuery

Haml at

Haml is a templating language.

<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>Example</title> </head> <body>
<h1>Hello, world!</h1> </body> </html> !!! %html{:lang => "en-us"} %head %meta{:charset => "utf-8"}/ %title Example %body %h1 Hello, world! HTML Haml <!DOCTYPE html> <html lang="en-us"> <head> <meta charset="utf-8"> <title>Example</title> </head> <body> <h1>Hello, world!</h1> </body> </html> !!! %html{:lang => "en-us"} %head %meta{:charset => "utf-8"}/ %title Example %body %h1 Hello, world! HTML Haml

Section Break-down

The Layouts (based on context)

Layouts • Include things like • Header • Footer •
Login/Logout • Things you want one every page

Views and Partials

Views • Usually correspond to an action in the Controller
• Hold template data for a speciﬁc page • Haml • Variables • Loops

Partials • File names begin with an underscore • Intended
for reuse in View templates around the site • “Modules” for displaying a user’s contact details • How we display user’s attending status

Haml Style • % is the beginning of a tag
• if you start line with “.class-name” it assumes “div” by default • Classes begin with “.” and IDs with “#” • Use Rails helpers instead of straight Haml when available • “-” prefaces Ruby code to be executed • “=” prefaces Ruby code to be printed

Haml Style • Haml is very strict with whitespace •
You can include text on same line or tabbed in on second line %p Hello, world! %p Hello, world! • But not both %p Hello, world! Hello, world!

Sass & Compass at

Sass is a preprocessor

In development, our Sass recompiles when we change the code
and refresh the page.

When we deploy to production, we compile the Sass into
CSS, minify it, and upload it to the server.

.container { width: 100%; background: black; } .container ul {
width: 90%; } .container ul li { background: rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 5px #333333; -moz-box-shadow: 0px 0px 5px #333333; box-shadow: 0px 0px 5px #333333; } CSS Sass in SCSS $container_bg: #000 .container { width: 100%; background: $container_bg; ul { width: 90%; li { background: rgba($container_bg, 0.1); -webkit-box-shadow: 0px 0px 5px #333333; -moz-box-shadow: 0px 0px 5px #333333; box-shadow: 0px 0px 5px #333333; } } }

Stylesheets

Sass Style • Use soft-tabs (i.e. spaces not tabs) with
a two space indent. • Put spaces after : in property declarations. • Put spaces before { in rule declarations in SCSS. • Line returns after the last property declaration to place the }. • Use hex color codes #000 and lowercase #fff unless using rgba.

$container_bg: #000 .container :width 100% :background $container_bg ul :width 90%
li :background rgba($container_bg, 0.1) :-webkit-box-shadow 0px 0px 5px #333333 :-moz-box-shadow 0px 0px 5px #333333 :box-shadow 0px 0px 5px #333333 Sass SCSS $container_bg: #000 .container { width: 100%; background: $container_bg; ul { width: 90%; li { background: rgba($container_bg, 0.1); -webkit-box-shadow: 0px 0px 5px #333333; -moz-box-shadow: 0px 0px 5px #333333; box-shadow: 0px 0px 5px #333333; } } }

When creating new styles please use SCSS style Sass.

Compass

Compass includes helpful methods for Sass

$container_bg: #000 .container { width: 100%; background: $container_bg; ul {
width: 90%; li { background: rgba($container_bg, 0.1); @include single-box-shadow; } } } SCSS & Compass Compiled CSS .container { width: 100%; background: black; } .container ul { width: 90%; } .container ul li { background: rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 5px #333333; -moz-box-shadow: 0px 0px 5px #333333; box-shadow: 0px 0px 5px #333333; }

jQuery at

JavaScript Library

JavaScript

Software engineering principles still apply.

Don’t redeﬁne styles already available. (Look in the Styleguide)

Keep it Simple • Do not style with ids unless
you have a very good reason (you don't). • Don't qualify class selectors with tag names (speed and re-usability). • When writing CSS, remember that the fewer selectors used, the faster the CSS. #hermes a // this would override .a-link ALWAYS because of specificity -- causing a maintainer to need overly specific selectors later a.a-link { text-transform: uppercase; } .container a.a-link { // Why so specific? font-weight bold; } .a-link { font-weight bold; }

Refactor

The Styleguide at

File Structure & Components

Interactive Style Guide http://local.paperlesspost.com/static/ui

Debugging/Testing

Chrome/Safari Inspector

Firefox Firebug

Internet Explorer Virtual Box

csscss

Intro to Front End at Paperless Post

Intro to Front End at Paperless Post

More Decks by Rachel Ober

Other Decks in Programming

Featured

Transcript