Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter

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

HTML, CSS e JavaScript
MEDIO DI WEB

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

Raggiungere attraverso il
web appena possibile.
SCOPO

Processo Tipico

Investigar

Attività Regole

Schizzo

Prototipi

Speciﬁche di
Contenuto

Mockup di
Photoshop

Documentazione eccessiva
in un modo statico

Come in HTML, CSS e
JavaScript al più presto.
SCOPO

Processo Veloce

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

1. Osservare e analizzare
3. Lanciare (Ship It)
4. Informare ed Educare
5. Scorrere e Manutenzione

Costruire (design/development)
1. Schizzo (wireframe)

2. Prototipazione Rapida
3. Style Tile
4. Criticare / Critica e Test
5. Ripetere
Costruire (design/development)

Prototipo Rápido
1. Pairing
2. Components
3. Scaffolding
4. Theming

Construir (diseño/desarollo)
3. Style Tile
5. Ripetere
3. Style Tile

3. Style Tile
5. Ripetere

3. Style Tile
5. Ripetere5. Ripetere

3. Style Tile
5. Ripetere

Prototipazione Rapida

Strumenti

AG1AG1
2 of102 of10
AG4AG4
3 of63 of6
AG5AG5
3 of6 (omega)3 of6 (omega)
AG6AG6
2 of62 of6
AG7AG7
AG2AG2
6 of106 of10
AG3AG3
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..

Altre Opzioni

Sistemi Modulari

Componenti

Estensioni di Compass
HTML + SCSS + JavaScript = GEM

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!

Struttura Utile

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

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

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

SCOPO
Raggiungere attraverso il
web appena possibile.

DOMANDE

Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (10)

Ähnlich wie Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter

Ähnlich wie Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter (20)

Mehr von Codemotion

Mehr von Codemotion (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Rapid Prototyping with Sass, Compass and Middleman by Bermon Painter