It's time to learn the basics!

4c9a493357b17fb1ac818b3cfed6583a?s=47 Nima Izadi
November 12, 2012

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

4c9a493357b17fb1ac818b3cfed6583a?s=128

Nima Izadi

November 12, 2012
Tweet

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