rapid prototyping with sass, compass and middleman by bermon painter
DESCRIPTION
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 awayTRANSCRIPT
![Page 1: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/1.jpg)
Sass, Compass e MiddlemanPROTOTIPAZIONE RAPIDA CON
@bermonpainter #codemotion
![Page 2: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/2.jpg)
HTML, CSS e JavaScriptMEDIO DI WEB
@bermonpainter #codemotion
![Page 3: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/3.jpg)
1. Migliorare i processi2. Collaborazione tra le varie discipline
@bermonpainter #codemotion
![Page 4: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/4.jpg)
Raggiungere attraverso il web appena possibile.
SCOPO
@bermonpainter #codemotion
![Page 5: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/5.jpg)
Processo Tipico
@bermonpainter #codemotion
![Page 6: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/6.jpg)
Investigar
@bermonpainter #codemotion
![Page 7: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/7.jpg)
@bermonpainter #codemotion
![Page 8: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/8.jpg)
Attività Regole
@bermonpainter #codemotion
![Page 9: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/9.jpg)
@bermonpainter #codemotion
![Page 10: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/10.jpg)
Schizzo
@bermonpainter #codemotion
![Page 11: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/11.jpg)
@bermonpainter #codemotion
![Page 12: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/12.jpg)
@bermonpainter #codemotion
![Page 13: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/13.jpg)
@bermonpainter #codemotion
![Page 14: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/14.jpg)
Prototipi
@bermonpainter #codemotion
![Page 15: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/15.jpg)
@bermonpainter #codemotion
![Page 16: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/16.jpg)
Specifiche di Contenuto
@bermonpainter #codemotion
![Page 17: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/17.jpg)
@bermonpainter #codemotion
![Page 18: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/18.jpg)
Mockup di Photoshop
@bermonpainter #codemotion
![Page 19: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/19.jpg)
@bermonpainter #codemotion
![Page 20: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/20.jpg)
Documentazione eccessiva in un modo statico
@bermonpainter #codemotion
![Page 21: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/21.jpg)
![Page 22: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/22.jpg)
@bermonpainter #codemotion
Come in HTML, CSS e JavaScript al più presto.
SCOPO
![Page 23: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/23.jpg)
Processo Veloce
@bermonpainter #codemotion
![Page 24: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/24.jpg)
@bermonpainter #codemotion
1. Osservare e analizzare2. Costruire (diseño/desarollo)
3. Lanciare (Ship It)4. Informare ed Educare5. Scorrere e Manutenzione
![Page 25: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/25.jpg)
@bermonpainter #codemotion
1. Osservare e analizzare2. Costruire (diseño/desarollo)
3. Lanciare (Ship It)4. Informare ed Educare5. Scorrere e Manutenzione
2. Costruire (diseño/desarollo)
![Page 26: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/26.jpg)
Costruire (design/development)
1. Schizzo (wireframe)
@bermonpainter #codemotion
![Page 27: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/27.jpg)
![Page 28: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/28.jpg)
![Page 29: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/29.jpg)
1. Schizzo (wireframe)2. Prototipazione Rapida3. Style Tile4. Criticare / Critica e Test5. Ripetere
Costruire (design/development)
@bermonpainter #codemotion
2. Prototipazione Rapida
![Page 30: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/30.jpg)
Prototipo Rápido1. Pairing2. Components3. Scaffolding4. Theming
@bermonpainter #codemotion
![Page 31: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/31.jpg)
![Page 32: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/32.jpg)
![Page 33: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/33.jpg)
Construir (diseño/desarollo)
@bermonpainter #codemotion
1. Schizzo (wireframe)2. Prototipazione Rapida3. Style Tile4. Criticare / Critica e Test5. Ripetere
3. Style Tile
![Page 34: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/34.jpg)
![Page 35: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/35.jpg)
![Page 36: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/36.jpg)
![Page 37: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/37.jpg)
![Page 38: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/38.jpg)
Construir (diseño/desarollo)
@bermonpainter #codemotion
1. Schizzo (wireframe)2. Prototipazione Rapida3. Style Tile4. Criticare / Critica e Test5. Ripetere4. Criticare / Critica e Test
![Page 39: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/39.jpg)
Construir (diseño/desarollo)
@bermonpainter #codemotion
1. Schizzo (wireframe)2. Prototipazione Rapida3. Style Tile4. Criticare / Critica e Test5. Ripetere5. Ripetere
![Page 40: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/40.jpg)
Construir (diseño/desarollo)
@bermonpainter #codemotion
1. Schizzo (wireframe)2. Prototipazione Rapida3. Style Tile4. Criticare / Critica e Test5. Ripetere
2. Prototipazione Rapida
![Page 41: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/41.jpg)
Prototipazione Rapida
@bermonpainter #codemotion
![Page 42: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/42.jpg)
Strumenti
@bermonpainter #codemotion
![Page 43: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/43.jpg)
![Page 44: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/44.jpg)
![Page 45: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/45.jpg)
![Page 46: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/46.jpg)
![Page 47: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/47.jpg)
![Page 48: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/48.jpg)
![Page 49: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/49.jpg)
AG1AG1
2 of 102 of 10
AG4AG4
3 of 63 of 6
AG5AG5
3 of 6 (omega)3 of 6 (omega)
AG6AG6
2 of 62 of 6
AG8AG8
2 of 42 of 4
AG9AG9
2 of 4 (omega)2 of 4 (omega)
AG7AG7
4 of 6 (omega)4 of 6 (omega)
AG10AG10
auto auto
AG2AG2
6 of 106 of 10
AG3AG3
2 of 10 (omega)2 of 10 (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 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 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"
// Complex AG grid, brought to you by Susy:// Complex AG grid, brought to you by Susy:.ag1.ag1 {{ @include@include span-columns span-columns((22,,1010);); }}
We're just getting warmed up.We're just getting warmed up.Quickly add media-query breakpoints for newQuickly add media-query breakpoints for new
SSGetting StartedGetting Started ReferenceReference DemosDemos SitesSites SourceSource SupportSupport TwitterTwitter
10-column 10-column complex nested grid AG testcomplex nested grid AG test
‹‹ ››Responsive grids for Responsive grids for CompassCompass..
![Page 50: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/50.jpg)
![Page 51: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/51.jpg)
![Page 52: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/52.jpg)
Altre Opzioni
@bermonpainter #codemotion
![Page 53: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/53.jpg)
![Page 54: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/54.jpg)
![Page 55: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/55.jpg)
![Page 56: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/56.jpg)
![Page 57: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/57.jpg)
![Page 58: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/58.jpg)
![Page 59: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/59.jpg)
Sistemi Modulari
@bermonpainter #codemotion
![Page 60: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/60.jpg)
Componenti
@bermonpainter #codemotion
![Page 61: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/61.jpg)
![Page 62: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/62.jpg)
![Page 63: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/63.jpg)
![Page 64: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/64.jpg)
![Page 65: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/65.jpg)
Estensioni di Compass
@bermonpainter #codemotion
HTML + SCSS + JavaScript = GEM
![Page 66: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/66.jpg)
![Page 67: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/67.jpg)
![Page 68: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/68.jpg)
![Page 69: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/69.jpg)
![Page 70: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/70.jpg)
![Page 71: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/71.jpg)
![Page 72: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/72.jpg)
![Page 73: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/73.jpg)
![Page 74: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/74.jpg)
![Page 75: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/75.jpg)
![Page 76: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/76.jpg)
![Page 77: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/77.jpg)
![Page 78: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/78.jpg)
![Page 79: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/79.jpg)
![Page 80: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/80.jpg)
![Page 81: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/81.jpg)
![Page 82: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/82.jpg)
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:
Get the BookPurchase the book in print or e-book format — or both! The e-book
comes in PDF, ePub and mobi formats for easy installation on al-
most any e-reader. The e-book purchase also includes access to
screencasts on smacss.com.
Free Online BookSMACSS started out as a free online book and that continues to be
true. You can always read the original chapters. For access to pre-
What's in SMACSS?
Preface1. About the Author
2. Introduction
Core3. Categorizing CSS Rules
4. Base Rules
5. Layout Rules
6. Module Rules
7. State Rules
8. Theme Rules
9. Changing State
Aspects of SMACSS10. Depth of Applicability
11. Selector Performance
12. HTML5 and SMACSS
13. Prototyping
Aspects (cont) Premium accessPremium access
14. Preprocessors
Register for Workshop Get Smacked! Sign in
Scalable and ModularArchitecture for CSS
A 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 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!
![Page 83: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/83.jpg)
Struttura Utile
@bermonpainter #codemotion
![Page 84: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/84.jpg)
Foundation Features Add-ons Case Studies Docs Getting Started
FoundationThe most advanced responsivefront-end framework in the world.
Download Foundation 4
10.2k stargazers @foundationzurb
Latest Update on Github MAR 21, 2013 Commit bc782843660c38a61b578dfe2c3abf43e3319617 » Clone Now
What's new in 4?Responsive design gets lighter, faster and more advanced, so you can code smarter.
Shiny New HTMLTemplates
We've created some
![Page 85: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/85.jpg)
![Page 86: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/86.jpg)
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.
Building websites should be easy. Building websites should be easy. That's why there's Hammer for Mac.That's why there's Hammer for Mac.
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
![Page 87: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/87.jpg)
StarStar 47,10547,105 ForkFork 13,72013,720 Follow Follow @twbootstrap@twbootstrap 55.3K followers TweetTweet 18.1K
Introducing Bootstrap.Need reasons to love Bootstrap? Look no further.
Bootstrap
BootstrapSleek, 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
![Page 88: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/88.jpg)
1. Migliorare i processi2. Collaborazione tra le varie discipline
@bermonpainter #codemotion
![Page 89: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/89.jpg)
SCOPORaggiungere attraverso il
web appena possibile.
@bermonpainter #codemotion
![Page 90: Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter](https://reader033.vdocumenti.com/reader033/viewer/2022061209/548c03fcb47959db0a8b4575/html5/thumbnails/90.jpg)
DOMANDE
@bermonpainter #codemotion