Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter

  • 464 views
Uploaded on

This talk will cover some of the benefits of building a rapid prototyping framework with Sass & Compass along with the static site generator, Nanoc. you’ll discover how to rapid prototype pages, …

This talk will cover some of the benefits of building a rapid prototyping framework with Sass & Compass along with the static site generator, Nanoc. you’ll discover how to rapid prototype pages, widgets and interactions that can be used for usability testing and to help concept ideas. Since it’s all built on Ruby it’s easy to migrate over to the real application later or toss away

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

Views

Total Views
464
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
119
Comments
0
Likes
0

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. Sass, Compass e MiddlemanPROTOTIPAZIONE RAPIDA CON@bermonpainter #codemotion
  • 2. HTML, CSS e JavaScriptMEDIO DI WEB@bermonpainter #codemotion
  • 3. 1. Migliorare i processi2. Collaborazione tra levarie discipline@bermonpainter #codemotion
  • 4. Raggiungere attraverso ilweb appena possibile.SCOPO@bermonpainter #codemotion
  • 5. Processo Tipico@bermonpainter #codemotion
  • 6. Investigar@bermonpainter #codemotion
  • 7. @bermonpainter #codemotion
  • 8. Attività Regole@bermonpainter #codemotion
  • 9. @bermonpainter #codemotion
  • 10. Schizzo@bermonpainter #codemotion
  • 11. @bermonpainter #codemotion
  • 12. @bermonpainter #codemotion
  • 13. @bermonpainter #codemotion
  • 14. Prototipi@bermonpainter #codemotion
  • 15. @bermonpainter #codemotion
  • 16. Specifiche diContenuto@bermonpainter #codemotion
  • 17. @bermonpainter #codemotion
  • 18. Mockup diPhotoshop@bermonpainter #codemotion
  • 19. @bermonpainter #codemotion
  • 20. Documentazione eccessivain un modo statico@bermonpainter #codemotion
  • 21. @bermonpainter #codemotionCome in HTML, CSS eJavaScript al più presto.SCOPO
  • 22. Processo Veloce@bermonpainter #codemotion
  • 23. @bermonpainter #codemotion1. Osservare e analizzare2. Costruire (diseño/desarollo)3. Lanciare (Ship It)4. Informare ed Educare5. Scorrere e Manutenzione
  • 24. @bermonpainter #codemotion1. Osservare e analizzare2. Costruire (diseño/desarollo)3. Lanciare (Ship It)4. Informare ed Educare5. Scorrere e Manutenzione2. Costruire (diseño/desarollo)
  • 25. Costruire (design/development)1. Schizzo (wireframe)@bermonpainter #codemotion
  • 26. 1. Schizzo (wireframe)2. Prototipazione Rapida3. Style Tile4. Criticare / Critica e Test5. RipetereCostruire (design/development)@bermonpainter #codemotion2. Prototipazione Rapida
  • 27. Prototipo Rápido1. Pairing2. Components3. Scaffolding4. Theming@bermonpainter #codemotion
  • 28. Construir (diseño/desarollo)@bermonpainter #codemotion1. Schizzo (wireframe)2. Prototipazione Rapida3. Style Tile4. Criticare / Critica e Test5. Ripetere3. Style Tile
  • 29. Construir (diseño/desarollo)@bermonpainter #codemotion1. Schizzo (wireframe)2. Prototipazione Rapida3. Style Tile4. Criticare / Critica e Test5. Ripetere4. Criticare / Critica e Test
  • 30. Construir (diseño/desarollo)@bermonpainter #codemotion1. Schizzo (wireframe)2. Prototipazione Rapida3. Style Tile4. Criticare / Critica e Test5. Ripetere5. Ripetere
  • 31. Construir (diseño/desarollo)@bermonpainter #codemotion1. Schizzo (wireframe)2. Prototipazione Rapida3. Style Tile4. Criticare / Critica e Test5. Ripetere2. Prototipazione Rapida
  • 32. Prototipazione Rapida@bermonpainter #codemotion
  • 33. Strumenti@bermonpainter #codemotion
  • 34. AG1AG12 of102 of10AG4AG43 of63 of6AG5AG53 of6 (omega)3 of6 (omega)AG6AG62 of62 of6AG7AG74 of6 (omega)4 of6 (omega)AG2AG26 of106 of10AG3AG32 of10 (omega)2 of10 (omega)GEM INSTALL SUSYGEM INSTALL SUSYYour markup. Your design. Our math.Your markup. Your design. Our math.The web is a responsive place,The web is a responsive place, from your lithefrom your lithe && livelylivelydevelopment processdevelopment process to your end-users super-tablet-to your end-users super-tablet-multi-magic-lap-phone.multi-magic-lap-phone. You need grids that areYou need grids that arepowerful yet custom,powerful yet custom, reliable yet responsive.reliable yet responsive.Recent News:Recent News:v1.0.6:v1.0.6: Added bleed and isolation mixins.Added bleed and isolation mixins.Happy Cog Article:Happy Cog Article: "It’s Alive: Prototyping in the Browser""It’s Alive: Prototyping in the Browser"Tutorial:Tutorial: "Off-Canvas Layout with Susy""Off-Canvas Layout with Susy"v1.0.5:v1.0.5: Added support for rem units.Added support for rem units.Nettuts+ Tutorial:Nettuts+ Tutorial: "Responsive Grids With Susy""Responsive Grids With Susy"SSGetting StartedGetting Started ReferenceReference DemosDemos SitesSites SourceSource SupportSupport TwitterTwitter10-column10-column complex nested grid AG testcomplex nested grid AG test‹‹ ››Responsive grids forResponsive grids for CompassCompass..
  • 35. Altre Opzioni@bermonpainter #codemotion
  • 36. Sistemi Modulari@bermonpainter #codemotion
  • 37. Componenti@bermonpainter #codemotion
  • 38. Estensioni di Compass@bermonpainter #codemotionHTML + SCSS + JavaScript = GEM
  • 39. What is it?SMACSS (pronounced “smacks”) is more style guide than rigidframework. There is no library within here for you to download orinstall. SMACSS is a way to examine your design process and as away to fit those rigid frameworks into a flexible thought process. Itis an attempt to document a consistent approach to site develop-ment when using CSS. And really, who isn’t building a site with CSSthese days?!Get to know Scalable and Modular Architecture for CSS:Whats in SMACSS?Preface1. About the Author2. IntroductionCore3. Categorizing CSS Rules4. Base Rules5. Layout Rules6. Module RulesRegister for Workshop Get Smacked! Sign inScalable and ModularArchitecture for CSSA flexible guide to developing sites small and large.“SMACSS is becoming one of the most usefulcontributions to front-end discussions in years” *I’ve been analyzing my process (and the process of those aroundme) and figuring out how best to structure code for projects on alarger scale. What Ive found is a process that works equally wellfor sites small and large.Learn how to structure your CSS to allow for flexibility and main-tainability as your project and your team grows.Get smacked!
  • 40. Struttura Utile@bermonpainter #codemotion
  • 41. Foundation Features Add-ons Case Studies Docs Getting StartedFoundationThe most advanced responsivefront-end framework in the world.Download Foundation 410.2k stargazers @foundationzurbLatest Update on Github MAR 21, 2013 Commit bc782843660c38a61b578dfe2c3abf43e3319617 » Clone Now
  • 42. HammerHammerHammer is a web development tool for web designers & developers.Hammer is a web development tool for web designers & developers.Hammer is a web development tool for web designers & developers.Hammer is a web development tool for web designers & developers.Build out static HTML sites quickly and easily. No fuss, no mess, no PHP.Build out static HTML sites quickly and easily. No fuss, no mess, no PHP.Build out static HTML sites quickly and easily. No fuss, no mess, no PHP.Build out static HTML sites quickly and easily. No fuss, no mess, no PHP.Edit the project files inEdit the project files inyour favourite editoryour favourite editor Let Hammer compile yourLet Hammer compile yourcode & create your buildcode & create your build
  • 43. StarStar 47,10547,105 ForkFork 13,72013,720 FollowFollow @twbootstrap@twbootstrap 55.3K followers TweetTweet 18.1KIntroducing Bootstrap.BootstrapBootstrapSleek, intuitive, and powerful front-end framework forSleek, intuitive, and powerful front-end framework forfaster and easier web development.faster and easier web development.Download BootstrapDownload BootstrapGitHub projectGitHub projectGitHub projectExamplesExamplesExamplesExtendExtendExtendVersion 2.3.1Version 2.3.1Version 2.3.1BootstrapBootstrapBootstrapHomeHome Get startedGet started ScaffoldingScaffolding Base CSSBase CSS ComponentsComponents JavaScriptJavaScript CustomizeCustomize
  • 44. 1. Migliorare i processi2. Collaborazione tra levarie discipline@bermonpainter #codemotion
  • 45. SCOPORaggiungere attraverso ilweb appena possibile.@bermonpainter #codemotion
  • 46. DOMANDE@bermonpainter #codemotion