Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Prototipazione Rapida con Sass, Compass e Middleman

Prototipazione Rapida con Sass, Compass e Middleman

Rapid prototyping talk given at CodeMotion - Rome. http://rome.codemotionworld.com/

Video: http://www.youtube.com/watch?v=HbR3weaOpBs

7559f6cff1f5efc2d210965febd4d71c?s=128

Bermon Painter

March 22, 2013
Tweet

Transcript

  1. Sass, Compass e Middleman PROTOTIPAZIONE RAPIDA CON @bermonpainter #codemotion

  2. HTML, CSS e JavaScript MEDIO DI WEB @bermonpainter #codemotion

  3. 1. Migliorare i processi 2. Collaborazione tra le varie discipline

    @bermonpainter #codemotion
  4. Raggiungere attraverso il web 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 di Contenuto @bermonpainter #codemotion

  17. @bermonpainter #codemotion

  18. Mockup di Photoshop @bermonpainter #codemotion

  19. @bermonpainter #codemotion

  20. Documentazione eccessiva in un modo statico @bermonpainter #codemotion

  21. None
  22. @bermonpainter #codemotion Come in HTML, CSS e JavaScript al più

    presto. SCOPO
  23. Processo Veloce @bermonpainter #codemotion

  24. @bermonpainter #codemotion 1. Osservare e analizzare 2. Costruire (diseño/desarollo) 3.

    Lanciare (Ship It) 4. Informare ed Educare 5. Scorrere e Manutenzione
  25. @bermonpainter #codemotion 1. Osservare e analizzare 2. Costruire (diseño/desarollo) 3.

    Lanciare (Ship It) 4. Informare ed Educare 5. Scorrere e Manutenzione 2. Costruire (diseño/desarollo)
  26. Costruire (design/development) 1. Schizzo (wireframe) @bermonpainter #codemotion

  27. None
  28. None
  29. 1. Schizzo (wireframe) 2. Prototipazione Rapida 3. Style Tile 4.

    Criticare / Critica e Test 5. Ripetere Costruire (design/development) @bermonpainter #codemotion 2. Prototipazione Rapida
  30. Prototipo Rápido 1. Pairing 2. Components 3. Scaffolding 4. Theming

    @bermonpainter #codemotion
  31. None
  32. None
  33. Construir (diseño/desarollo) @bermonpainter #codemotion 1. Schizzo (wireframe) 2. Prototipazione Rapida

    3. Style Tile 4. Criticare / Critica e Test 5. Ripetere 3. Style Tile
  34. None
  35. None
  36. None
  37. None
  38. Construir (diseño/desarollo) @bermonpainter #codemotion 1. Schizzo (wireframe) 2. Prototipazione Rapida

    3. Style Tile 4. Criticare / Critica e Test 5. Ripetere 4. Criticare / Critica e Test
  39. Construir (diseño/desarollo) @bermonpainter #codemotion 1. Schizzo (wireframe) 2. Prototipazione Rapida

    3. Style Tile 4. Criticare / Critica e Test 5. Ripetere 5. Ripetere
  40. Construir (diseño/desarollo) @bermonpainter #codemotion 1. Schizzo (wireframe) 2. Prototipazione Rapida

    3. Style Tile 4. Criticare / Critica e Test 5. Ripetere 2. Prototipazione Rapida
  41. Prototipazione Rapida @bermonpainter #codemotion

  42. Strumenti @bermonpainter #codemotion

  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. AG1 AG1 2 of 10 2 of 10 AG4 AG4

    3 of 6 3 of 6 AG5 AG5 3 of 6 (omega) 3 of 6 (omega) AG6 AG6 2 of 6 2 of 6 AG7 AG7 4 of 6 (omega) 4 of 6 (omega) AG2 AG2 6 of 10 6 of 10 AG3 AG3 2 of 10 (omega) 2 of 10 (omega) GEM INSTALL SUSY GEM INSTALL SUSY Your 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 lithe from your lithe & & lively lively development process development process to your end-user's super-tablet- to your end-user's super-tablet- multi-magic-lap-phone. multi-magic-lap-phone. You need grids that are You need grids that are powerful 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" S S Getting Started Getting Started Reference Reference Demos Demos Sites Sites Source Source Support Support Twitter Twitter 10-column 10-column complex nested grid AG test complex nested grid AG test ‹ ‹ › › Responsive grids for Responsive grids for Compass Compass. .
  50. None
  51. None
  52. Altre Opzioni @bermonpainter #codemotion

  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. Sistemi Modulari @bermonpainter #codemotion

  60. Componenti @bermonpainter #codemotion

  61. None
  62. None
  63. None
  64. None
  65. Estensioni di Compass @bermonpainter #codemotion HTML + SCSS + JavaScript

    = GEM
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  82. What is it? SMACSS (pronounced “smacks”) is more style guide

    than rigid framework. There is no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site develop- ment when using CSS. And really, who isn’t building a site with CSS these days?! Get to know Scalable and Modular Architecture for CSS: What's in SMACSS? Preface 1. About the Author 2. Introduction Core 3. Categorizing CSS Rules 4. Base Rules 5. Layout Rules 6. Module Rules Register for Workshop Get Smacked! Sign in Scalable and Modular Architecture for CSS A flexible guide to developing sites small and large. “SMACSS is becoming one of the most useful contributions to front-end discussions in years” * I’ve been analyzing my process (and the process of those around me) and figuring out how best to structure code for projects on a larger scale. What I've found is a process that works equally well for 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!
  83. Struttura Utile @bermonpainter #codemotion

  84. Foundation Features Add-ons Case Studies Docs Getting Started Foundation The

    most advanced responsive front-end framework in the world. Download Foundation 4 10.2k stargazers @foundationzurb Latest Update on Github MAR 21, 2013 Commit bc782843660c38a61b578dfe2c3abf43e3319617 » Clone Now
  85. None
  86. Hammer Hammer 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. 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 in Edit the project files in your favourite editor your favourite editor Let Hammer compile your Let Hammer compile your code & create your build code & create your build
  87. Star Star 47,105 47,105 Fork Fork 13,720 13,720 Follow Follow

    @twbootstrap @twbootstrap 55.3K followers Tweet Tweet 18.1K Introducing Bootstrap. Bootstrap Bootstrap Sleek, intuitive, and powerful front-end framework for Sleek, intuitive, and powerful front-end framework for faster and easier web development. faster and easier web development. Download Bootstrap Download Bootstrap GitHub project GitHub project GitHub project Examples Examples Examples Extend Extend Extend Version 2.3.1 Version 2.3.1 Version 2.3.1 Bootstrap Bootstrap Bootstrap Home Home Get started Get started Scaffolding Scaffolding Base CSS Base CSS Components Components JavaScript JavaScript Customize Customize
  88. 1. Migliorare i processi 2. Collaborazione tra le varie discipline

    @bermonpainter #codemotion
  89. SCOPO Raggiungere attraverso il web appena possibile. @bermonpainter #codemotion

  90. DOMANDE @bermonpainter #codemotion