• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Modular css e html5: organize the chaos
 

Modular css e html5: organize the chaos

on

  • 2,090 views

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 ...

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.

Statistics

Views

Total Views
2,090
Views on SlideShare
2,089
Embed Views
1

Actions

Likes
3
Downloads
26
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Modular css e html5: organize the chaos Modular css e html5: organize the chaos Presentation Transcript

    • Modular CSS / HTML5 Organize the chaosThursday, September 27, 12
    • ModuleThursday, September 27, 12
    • module definition is something predetermined, standard, intended to be repeated several times.Thursday, September 27, 12
    • programming A module is a stand- alone software component, well identified and easily reusableThursday, September 27, 12
    • stereotype(!) too complex woody too extended twistedThursday, September 27, 12
    • stereotype(!) good points too complex essentials woody mantianence too extended readable twisted reusableThursday, September 27, 12
    • 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 front end muddle-headed ruby on rails / django www.cantierecreativo.netThursday, September 27, 12
    • be precise is an extremely hard workThursday, September 27, 12
    • save yourself the trouble be DRY don’t repeat yourselfThursday, September 27, 12
    • 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 “experts”Thursday, September 27, 12
    • choose a side. In all cases google will choose for us!Thursday, September 27, 12
    • 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 discover it http://processing.org/learning/objects/Thursday, September 27, 12
    • God was the nerd of all nerds because he made ​the universe in just six days using OO!Thursday, September 27, 12
    • Spaghetti Code vs MVCThursday, September 27, 12
    • <?php query.sql + functions(){ $variables + <tables> + } + <div style=””> + $_GLOBALS + <<<EOF + js ?> (early 2000’s style)Thursday, September 27, 12
    • an eye opener in 2007 Rails MVC model, view, controller separating db, logic & presentationThursday, September 27, 12
    • 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, September 27, 12
    • 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 ($with_params) •logic like IF/ELSE FOR •nested classes •compiled css extended or compactThursday, September 27, 12
    • 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 •sections •themesThursday, September 27, 12
    • Structure •base •layout •modules •sections •themesThursday, September 27, 12
    • Structure •base •layout •modules •sections •themesThursday, September 27, 12
    • Structure •base •layout •modules •sections •themesThursday, September 27, 12
    • Structure •base •layout •modules •sections •themesThursday, September 27, 12
    • Structure •base •layout •modules •sections •themesThursday, September 27, 12
    • Structure •base •layout •modules •sections •themesThursday, September 27, 12
    • the bridging technique @import every single scss to your application.cssThursday, September 27, 12
    • 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 •readable •performance •cachingThursday, September 27, 12
    • Responsive designThursday, September 27, 12
    • Responsive ain’t so easy!Thursday, September 27, 12
    • media queries belong to a module, so keep them within the same scopeThursday, September 27, 12
    • media queries belong to a module, so keep them within the same scopeThursday, September 27, 12
    • 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
    • Better Software 2012 firenzeThursday, September 27, 12
    • Better Software 2012 firenze www.cantierecreativo.netThursday, September 27, 12