0
Modular                             CSS / HTML5                             Organize the chaosThursday, September 27, 12
ModuleThursday, September 27, 12
module definition                          is something                         predetermined,                     standard...
programming                             A module is a stand-                                alone software                ...
stereotype(!)                             too complex                             woody                             too ex...
stereotype(!)                     good points                             too complex       essentials                    ...
when to use                             modular CSS?Thursday, September 27, 12
always!Thursday, September 27, 12
choose how to use                               modular CSS!Thursday, September 27, 12
remind                         A web page is a                      collection of modulesThursday, September 27, 12
remind                         A web page is a                      collection of modulesThursday, September 27, 12
who I amThursday, September 27, 12
who I am                             matteo papadopoulos                                  @spleenteo                      ...
be precise is an                     extremely hard workThursday, September 27, 12
save yourself the trouble                             be DRY                      don’t repeat yourselfThursday, September...
Modular HTML5                 the age of the hopeThursday, September 27, 12
HTML 4 to 5Thursday, September 27, 12
HTML 4 to 5Thursday, September 27, 12
Roy Tomeij / @royThursday, September 27, 12
Roy Tomeij / @roy                              All sections can start with <h1>                              Screw SEO “ex...
choose a side.                             In all cases google                             will choose for us!Thursday, Se...
use JS libs as HTML5 SHIV                   and ModernizerThursday, September 27, 12
DIVs are not evilThursday, September 27, 12
Sketching: draw it rawThursday, September 27, 12
Sketching: draw it rawThursday, September 27, 12
Sketching: draw it rawThursday, September 27, 12
define your objectsThursday, September 27, 12
define your objectsThursday, September 27, 12
define your objectsThursday, September 27, 12
“NO Style”               markupThursday, September 27, 12
“NO Style”               markupThursday, September 27, 12
finally: a moduleThursday, September 27, 12
finally: a moduleThursday, September 27, 12
think                             object oriented                                   “OO”Thursday, September 27, 12
OO is made in our                             image and likeness                              don’t be scared             ...
God was the nerd of all nerds              because he made ​the                 universe in just               six days us...
Spaghetti Code                                  vs                                 MVCThursday, September 27, 12
<?php                              query.sql + functions(){                              $variables + <tables> +          ...
an eye opener in 2007                             Rails MVC                        model, view, controller               s...
CSS good practicesThursday, September 27, 12
CSS good practices                             Oh, no! AGAIN?!?Thursday, September 27, 12
find a strong RESETThursday, September 27, 12
I do prefer classes                                instead of IDsThursday, September 27, 12
be verbose naming                             classes and assetsThursday, September 27, 12
selectors                             the greats unknown                             learn how to use’emThursday, Septembe...
if you need                             !IMPORTANT                        there’s something wrongThursday, September 27, 12
SASS / Scss                              can’t live without youThursday, September 27, 12
SASS features         •variables like $white: #FFF         •math like 10px + 10px = 20px         •@mixins as functions ($w...
SCSS          example          compiledThursday, September 27, 12
SCSS          example          compiledThursday, September 27, 12
Modular CSS              one module = one class = one fileThursday, September 27, 12
Structure                             •base                             •layout                             •modules      ...
Structure                             •base                             •layout                             •modules      ...
Structure                             •base                             •layout                             •modules      ...
Structure                             •base                             •layout                             •modules      ...
Structure                             •base                             •layout                             •modules      ...
Structure                             •base                             •layout                             •modules      ...
Structure                             •base                             •layout                             •modules      ...
the bridging technique                      @import every single scss                       to your application.cssThursda...
bridging: before / afterThursday, September 27, 12
bridging: before / afterThursday, September 27, 12
application.scssThursday, September 27, 12
application.scssThursday, September 27, 12
application.scssThursday, September 27, 12
5 reasons to bridgeThursday, September 27, 12
5 reasons to bridge                                 •clean file                                 •manteinance               ...
Responsive                               designThursday, September 27, 12
Responsive                             ain’t so easy!Thursday, September 27, 12
media               queries                       belong to a                       module, so                       keep ...
media               queries                       belong to a                       module, so                       keep ...
Happy ending                 “After having built a few hundreds                  of sites I would have discovered         ...
Better Software 2012                                firenzeThursday, September 27, 12
Better Software 2012                                 firenze                              www.cantierecreativo.netThursday...
Upcoming SlideShare
Loading in...5
×

Modular css e html5: organize the chaos

2,506

Published on

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.

Published in: Technology, Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,506
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
29
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Modular css e html5: organize the chaos"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×