IT’S TIME TO LEARN THE BASICS! Some HTML and CSS going around here...

Lima you said? No, NIMA! Neither Nemo! Frontend Web Engineer @Nima_Izadi

On The Rails Again

WEB You like building apps? But you’re more into backend than frontend?

HTML CSS WEB

First things first HTML Let’s try to be a little semantic

HTML is not that simple If you think so, then check the specs (http://www.w3.org/TR/html5/) W3C Team, May 2011 Don’t make them work for nothing

HTML elements There is not a bunch of them for nothing!

Bad habit %div Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. %br %br Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Good habit %p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod. %p Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Bad habit %div#menu.menu %div.item Menu 1 %div.item Menu 2 ... %div#main-title.title Main title %div.paragraph Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Good habit %nav %ul %li Menu 1 %li Menu 2 %h1 Main title %p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod Basic HTML tags More semantic More maintainable

Just to be clear Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a paragraph

THIS IS A TITLE

• Element A • Element B • Element C

• This
• Is
• A
• List

Semantic? Maintainable?

Inputs Basic ones

Inputs Mobile optimized

Inputs Mobile optimized

Inputs Browser validations

Inputs Default widgets

And lot more... Inputs

By the way IS FOR TABULAR DATA NOT FOR LAYOUT!

Have a doubt? http://w3.org/TR http://W3Fools.com http://www.WebPlatform.org http://developer.mozilla.org/docs http://dev.opera.com

Don’t be afraid CSS

Like Ruby On Rails?

Then you are used to DRY Object Oriented MVC Conventions Reusable Code Agile

Y U NO Apply To CSS?!

Let’s see some guidelines

Maintainability Productivity

Variables Mixins Inheritance Nesting Use SASS Put some logic in your CSS!

Use SASS How easily do you think they did that?

Variables Use SASS $white! ! ! ! ! : #EFEFEF; $blue!! ! ! ! : #00A8DD; $green! ! ! ! ! : #7cb848 $brand_color ! : $blue;

Variables Use SASS $white! ! ! ! ! : #EFEFEF; $blue!! ! ! ! : #00A8DD; $green! ! ! ! ! : #7cb848 $brand_color ! : $green; Change your app design instantly!

CSS Frameworks Bootstrap

Object Oriented CSS This is an awesome example of what to do and how to do it!

NOT PAGES! COMPONENTS THINK

.progress-bar .pagination .warning .navbar .btn What’s a component?

Use .classes, not #IDs Keep #IDs for JavaScript and be generic

structure Separate and SKIN

Don’t rely on the semantics of HTML Structure VS SKIN

.modal { margin: 1em; padding: 1em; width: auto; } A class for Structure A class for SKIN .brand { color: $brand_color; background... } Structure VS SKIN

container Separate and content

Container VS Content .an-object h2 .an-object h2.category h2 h2.category “An object should look the same no matter where you put it”

Container VS Content h2 { ... }! ! ! ! // General application header h2.category { ... } !// Category header that can be reused Describe your object instead of being too specific h2 { ... } .myObject h2 { ... }

How do I organize my stylesheets?

How you don’t do !"" css # !"" style.css (2483 lines) Keeping all your CSS in one file is bad This hurts my eyes

How you don’t do !"" css # !"" page_1.css # !"" page_2.css # !"" page_3.css # !"" page_4.css # !"" page_5.css Having one file per page is not better

How inuit.css does !"" css/ # !"" partials/ # # !"" base/! ! // HEADINGS, links, ... # # !"" generic/! // @mixins, resets, helpers, ... # # !"" objects/! // .buttons, .breadcrumbs, ... # !"" inuit.scss ! ! // Import all the partials! !"" _vars.scss ! ! ! // Did I mention it was the file for variables? !"" your-project.scss

Need to deviate? !"" css/ # !"" partials/ # !"" main/ # !"" admin/ # # !"" layout.scss Create a particular section

Future-proofing Hi-res screen

Future-proofing Do you prefer to be IE6 compatible or to look awesome on the new iPad? Use responsive images Iconic font SVG

Inspirational sources Harry Roberts – Breaking Good Habits https://speakerdeck.com/u/csswizardry/p/breaking-good-habits-1 Harry Roberts – Big CSS https://speakerdeck.com/u/csswizardry/p/big-css-1 David Demaree – Designing the Hi-DPI Web https://speakerdeck.com/u/ddemaree/p/designing-the-hi-dpi-web Chris Coyer – Writing Better HTML & CSS https://speakerdeck.com/chriscoyier/writing-better-html-css Nicole Sullivan – What is Object Oriented CSS? http://www.slideshare.net/stubbornella/what-is-object-oriented-css Dale Saned – Sass 3.2: Silent Classes https://speakerdeck.com/anotheruiguy/sass-32-silent-classes Dale Sande – Module design & UI Dev patterns https://speakerdeck.com/anotheruiguy/module-design-ui-dev-patterns

NIMA IZADI @Nima_Izadi OnTheRailsAgain.com/Nima