Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter
0 likes1,010 views
Il documento discute l'importanza della prototipazione rapida nel web design utilizzando strumenti come sass e compass, enfatizzando la collaborazione tra diverse discipline. Viene presentato un processo tipico che include osservazione, analisi, costruzione e manutenzione. Infine, vengono menzionati strumenti e metodologie per facilitare lo sviluppo di siti web reattivi e modulari.
Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter
- 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
- 20. Documentazione eccessiva in un modo statico @bermonpainter #codemotion
- 22. @bermonpainter #codemotion Come in HTML, CSS e JavaScript al più presto. SCOPO
- 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
- 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
- 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
- 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. Ripetere5. 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
- 49. AG1AG1 2 of102 of10 AG4AG4 3 of63 of6 AG5AG5 3 of6 (omega)3 of6 (omega) AG6AG6 2 of62 of6 AG7AG7 4 of6 (omega)4 of6 (omega) AG2AG2 6 of106 of10 AG3AG3 2 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 && livelylively development processdevelopment 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 areYou 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" SS Getting StartedGetting Started ReferenceReference DemosDemos SitesSites SourceSource SupportSupport TwitterTwitter 10-column10-column complex nested grid AG testcomplex nested grid AG test ‹‹ ›› Responsive grids forResponsive grids for CompassCompass..
- 65. Estensioni di Compass @bermonpainter #codemotion HTML + SCSS + JavaScript = GEM
- 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 CSSA 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!
- 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
- 86. HammerHammer 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 inEdit the project files in your favourite editoryour favourite editor Let Hammer compile yourLet Hammer compile your code & create your buildcode & create your build
- 87. StarStar 47,10547,105 ForkFork 13,72013,720 FollowFollow @twbootstrap@twbootstrap 55.3K followers TweetTweet 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 BootstrapDownload 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 BootstrapBootstrapHomeHome Get startedGet started ScaffoldingScaffolding Base CSSBase CSS ComponentsComponents JavaScriptJavaScript CustomizeCustomize
- 88. 1. Migliorare i processi 2. Collaborazione tra le varie discipline @bermonpainter #codemotion
- 89. SCOPO Raggiungere attraverso il web appena possibile. @bermonpainter #codemotion