Modular css e html5: organize the chaos

  • 2,245 views
Uploaded on

WARNING! This speech is a bit old. Pls, take (also) a look to the new one …

WARNING! This speech is a bit old. Pls, take (also) a look to the new one
http://www.slideshare.net/spleenteo/frontend-reorganize-the-chaos

This is a resume of my talk presented at Better Software 2012, Florence (IT). It just a quick preflight for this topic that includes lot of different technologies. It's a mix of best practices for frontend web developments, styles, file structure, tools, especially SASS.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,245
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
26
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Modular CSS / HTML5 Organize the chaosThursday, September 27, 12
  • 2. ModuleThursday, September 27, 12
  • 3. module definition is something predetermined, standard, intended to be repeated several times.Thursday, September 27, 12
  • 4. programming A module is a stand- alone software component, well identified and easily reusableThursday, September 27, 12
  • 5. stereotype(!) too complex woody too extended twistedThursday, September 27, 12
  • 6. stereotype(!) good points too complex essentials woody mantianence too extended readable twisted reusableThursday, September 27, 12
  • 7. when to use modular CSS?Thursday, September 27, 12
  • 8. always!Thursday, September 27, 12
  • 9. choose how to use modular CSS!Thursday, September 27, 12
  • 10. remind A web page is a collection of modulesThursday, September 27, 12
  • 11. remind A web page is a collection of modulesThursday, September 27, 12
  • 12. who I amThursday, September 27, 12
  • 13. who I am matteo papadopoulos @spleenteo front end muddle-headed ruby on rails / django www.cantierecreativo.netThursday, September 27, 12
  • 14. be precise is an extremely hard workThursday, September 27, 12
  • 15. save yourself the trouble be DRY don’t repeat yourselfThursday, September 27, 12
  • 16. Modular HTML5 the age of the hopeThursday, September 27, 12
  • 17. HTML 4 to 5Thursday, September 27, 12
  • 18. HTML 4 to 5Thursday, September 27, 12
  • 19. Roy Tomeij / @royThursday, September 27, 12
  • 20. Roy Tomeij / @roy All sections can start with <h1> Screw SEO “experts”Thursday, September 27, 12
  • 21. choose a side. In all cases google will choose for us!Thursday, September 27, 12
  • 22. use JS libs as HTML5 SHIV and ModernizerThursday, September 27, 12
  • 23. DIVs are not evilThursday, September 27, 12
  • 24. Sketching: draw it rawThursday, September 27, 12
  • 25. Sketching: draw it rawThursday, September 27, 12
  • 26. Sketching: draw it rawThursday, September 27, 12
  • 27. define your objectsThursday, September 27, 12
  • 28. define your objectsThursday, September 27, 12
  • 29. define your objectsThursday, September 27, 12
  • 30. “NO Style” markupThursday, September 27, 12
  • 31. “NO Style” markupThursday, September 27, 12
  • 32. finally: a moduleThursday, September 27, 12
  • 33. finally: a moduleThursday, September 27, 12
  • 34. think object oriented “OO”Thursday, September 27, 12
  • 35. OO is made in our image and likeness don’t be scared discover it http://processing.org/learning/objects/Thursday, September 27, 12
  • 36. God was the nerd of all nerds because he made ​the universe in just six days using OO!Thursday, September 27, 12
  • 37. Spaghetti Code vs MVCThursday, September 27, 12
  • 38. <?php query.sql + functions(){ $variables + <tables> + } + <div style=””> + $_GLOBALS + <<<EOF + js ?> (early 2000’s style)Thursday, September 27, 12
  • 39. an eye opener in 2007 Rails MVC model, view, controller separating db, logic & presentationThursday, September 27, 12
  • 40. CSS good practicesThursday, September 27, 12
  • 41. CSS good practices Oh, no! AGAIN?!?Thursday, September 27, 12
  • 42. find a strong RESETThursday, September 27, 12
  • 43. I do prefer classes instead of IDsThursday, September 27, 12
  • 44. be verbose naming classes and assetsThursday, September 27, 12
  • 45. selectors the greats unknown learn how to use’emThursday, September 27, 12
  • 46. if you need !IMPORTANT there’s something wrongThursday, September 27, 12
  • 47. SASS / Scss can’t live without youThursday, September 27, 12
  • 48. SASS features •variables like $white: #FFF •math like 10px + 10px = 20px •@mixins as functions ($with_params) •logic like IF/ELSE FOR •nested classes •compiled css extended or compactThursday, September 27, 12
  • 49. SCSS example compiledThursday, September 27, 12
  • 50. SCSS example compiledThursday, September 27, 12
  • 51. Modular CSS one module = one class = one fileThursday, September 27, 12
  • 52. Structure •base •layout •modules •sections •themesThursday, September 27, 12
  • 53. Structure •base •layout •modules •sections •themesThursday, September 27, 12
  • 54. Structure •base •layout •modules •sections •themesThursday, September 27, 12
  • 55. Structure •base •layout •modules •sections •themesThursday, September 27, 12
  • 56. Structure •base •layout •modules •sections •themesThursday, September 27, 12
  • 57. Structure •base •layout •modules •sections •themesThursday, September 27, 12
  • 58. Structure •base •layout •modules •sections •themesThursday, September 27, 12
  • 59. the bridging technique @import every single scss to your application.cssThursday, September 27, 12
  • 60. bridging: before / afterThursday, September 27, 12
  • 61. bridging: before / afterThursday, September 27, 12
  • 62. application.scssThursday, September 27, 12
  • 63. application.scssThursday, September 27, 12
  • 64. application.scssThursday, September 27, 12
  • 65. 5 reasons to bridgeThursday, September 27, 12
  • 66. 5 reasons to bridge •clean file •manteinance •readable •performance •cachingThursday, September 27, 12
  • 67. Responsive designThursday, September 27, 12
  • 68. Responsive ain’t so easy!Thursday, September 27, 12
  • 69. media queries belong to a module, so keep them within the same scopeThursday, September 27, 12
  • 70. media queries belong to a module, so keep them within the same scopeThursday, September 27, 12
  • 71. Happy ending “After having built a few hundreds of sites I would have discovered the “one true way” of doing it. I don’t think there is one true way” (Scalable and Modular Architecture for CSS - Jonathan Snook)Thursday, September 27, 12
  • 72. Better Software 2012 firenzeThursday, September 27, 12
  • 73. Better Software 2012 firenze www.cantierecreativo.netThursday, September 27, 12