It's time to learn the basics!

This presentation is divided in two main parts :
- The basics of HTML and what we should all do and never forget.
- How to structure our CSS code and Object Oriented CSS (OOCSS).

Link to video [FR] : https://vimeo.com/54960207

Transcript

1. IT’S TIME TO LEARN THE BASICS! Some HTML and CSS going around here...
2. Lima you said? No, NIMA! Neither Nemo! Frontend Web Engineer @Nima_Izadi
3. On The Rails Again
4. WEB You like building apps? But you’re more into backend than frontend?
5. HTML CSS WEB
6. First things first HTML Let’s try to be a little semantic
7. 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
8. HTML elements There is not a bunch of them for nothing!
9. 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.
10. 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.
11. Bad habit %div#menu.menu %div.item Menu 1 %div.item Menu 2 ... %div#main-title.title Main title %div.paragraph <span class="bold">Lorem</span> ipsum <span class="small">dolor </span> sit amet, consectetur adipisicing elit, sed do eiusmod
12. Good habit %nav %ul %li Menu 1 %li Menu 2 %h1 Main title %p <em>Lorem</em> ipsum <small>dolor</small> sit amet, consectetur adipisicing elit, sed do eiusmod Basic HTML tags More semantic More maintainable
13. 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. <p>This is a paragraph</p> <h1>THIS IS A TITLE</h1> • Element A • Element B • Element C <ul> <li>This</li> <li>Is</li> <li>A</li> <li>List</li> </ul>
14. Semantic? Maintainable?
15. <input type="text"> <input type="submit"> Inputs <input type="radio"> <input type="checkbox"> <input type="file"> <input type="password"> Basic ones
16. <input type="number"> Inputs Mobile optimized
17. <input type="text" autocapitalize="none"> Inputs Mobile optimized
18. Inputs Browser validations <input type="email">
19. Inputs Default widgets <input type="date">
20. And lot more... <input type="search"> <input type="email"> Inputs <input type="url"> <input type="time"> <input type="color"> <input type="reset"> <input type="range"> <input type="tel">
21. By the way <TABLE> IS FOR TABULAR DATA NOT FOR LAYOUT!
22. Have a doubt? http://w3.org/TR http://W3Fools.com http://www.WebPlatform.org http://developer.mozilla.org/docs http://dev.opera.com
23. Don’t be afraid CSS
24. Like Ruby On Rails?
25. Then you are used to DRY Object Oriented MVC Conventions Reusable Code Agile
26. Y U NO Apply To CSS?!
27. Let’s see some guidelines
28. Maintainability Productivity
29. Variables Mixins Inheritance Nesting Use SASS Put some logic in your CSS!
30. Use SASS How easily do you think they did that?
31. Variables Use SASS $white! ! ! ! ! : #EFEFEF; $blue!! ! ! ! : #00A8DD; $green! ! ! ! ! : #7cb848 $brand_color ! : $blue;
32. Variables Use SASS $white! ! ! ! ! : #EFEFEF; $blue!! ! ! ! : #00A8DD; $green! ! ! ! ! : #7cb848 $brand_color ! : $green; Change your app design instantly!
33. CSS Frameworks Bootstrap
34. Object Oriented CSS This is an awesome example of what to do and how to do it!
35. NOT PAGES! COMPONENTS THINK
36. .progress-bar .pagination .warning .navbar .btn What’s a component?
37. Use .classes, not #IDs Keep #IDs for JavaScript and be generic
38. structure Separate and SKIN
39. <media class=”media”></media> Don’t rely on the semantics of HTML Structure VS SKIN <img class=”img”>
40. .modal { margin: 1em; padding: 1em; width: auto; } A class for Structure A class for SKIN .brand { color: $brand_color; background... } Structure VS SKIN
41. container Separate and content
42. 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”
43. 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 { ... }
44. How do I organize my stylesheets?
45. How you don’t do !"" css # !"" style.css (2483 lines) Keeping all your CSS in one file is bad This hurts my eyes
46. 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
47. 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
48. Need to deviate? !"" css/ # !"" partials/ # !"" main/ # !"" admin/ # # !"" layout.scss Create a particular section
49. Future-proofing Hi-res screen
50. Future-proofing Do you prefer to be IE6 compatible or to look awesome on the new iPad? Use responsive images Iconic font SVG
51. 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
52. NIMA IZADI @Nima_Izadi OnTheRailsAgain.com/Nima