Upgrade to Pro — share decks privately, control downloads, hide ads and more …

It's time to learn the basics!

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

Nima Izadi

November 12, 2012
Tweet

More Decks by Nima Izadi

Other Decks in Programming

Transcript

  1. 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
  2. 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.
  3. 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.
  4. 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
  5. 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
  6. 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>
  7. 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">
  8. Variables Use SASS $white! ! ! ! ! : #EFEFEF;

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

    $blue!! ! ! ! : #00A8DD; $green! ! ! ! ! : #7cb848 $brand_color ! : $green; Change your app design instantly!
  10. .modal { margin: 1em; padding: 1em; width: auto; } A

    class for Structure A class for SKIN .brand { color: $brand_color; background... } Structure VS SKIN
  11. 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”
  12. 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 { ... }
  13. How you don’t do !"" css # !"" style.css (2483

    lines) Keeping all your CSS in one file is bad This hurts my eyes
  14. 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
  15. 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
  16. Need to deviate? !"" css/ # !"" partials/ # !""

    main/ # !"" admin/ # # !"" layout.scss Create a particular section
  17. Future-proofing Do you prefer to be IE6 compatible or to

    look awesome on the new iPad? Use responsive images Iconic font SVG
  18. 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