Sass, Compass e MiddlemanPROTOTIPAZIONE RAPIDA CON

@bermonpainter #codemotion

HTML, CSS e JavaScriptMEDIO DI WEB

@bermonpainter #codemotion

1. Migliorare i processi2. Collaborazione tra le varie discipline

@bermonpainter #codemotion

Raggiungere attraverso il web appena possibile.

SCOPO

@bermonpainter #codemotion

Processo Tipico

@bermonpainter #codemotion

Investigar

@bermonpainter #codemotion

@bermonpainter #codemotion

Attività Regole

@bermonpainter #codemotion

@bermonpainter #codemotion

Schizzo

@bermonpainter #codemotion

@bermonpainter #codemotion

@bermonpainter #codemotion

@bermonpainter #codemotion

Prototipi

@bermonpainter #codemotion

@bermonpainter #codemotion

Specifiche di Contenuto

@bermonpainter #codemotion

@bermonpainter #codemotion

Mockup di Photoshop

@bermonpainter #codemotion

@bermonpainter #codemotion

Documentazione eccessiva in un modo statico

@bermonpainter #codemotion

@bermonpainter #codemotion

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

SCOPO

Processo Veloce

@bermonpainter #codemotion

@bermonpainter #codemotion

1. Osservare e analizzare2. Costruire (diseño/desarollo)

3. Lanciare (Ship It)4. Informare ed Educare5. Scorrere e Manutenzione

@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)

Costruire (design/development)

1. Schizzo (wireframe)

@bermonpainter #codemotion

1. Schizzo (wireframe)2. Prototipazione Rapida3. Style Tile4. Criticare / Critica e Test5. Ripetere

Costruire (design/development)

@bermonpainter #codemotion

2. Prototipazione Rapida

Prototipo Rápido1. Pairing2. Components3. Scaffolding4. Theming

@bermonpainter #codemotion

Construir (diseño/desarollo)

@bermonpainter #codemotion

1. Schizzo (wireframe)2. Prototipazione Rapida3. Style Tile4. Criticare / Critica e Test5. Ripetere

3. Style Tile

Construir (diseño/desarollo)

@bermonpainter #codemotion

1. Schizzo (wireframe)2. Prototipazione Rapida3. Style Tile4. Criticare / Critica e Test5. Ripetere4. Criticare / Critica e Test

Construir (diseño/desarollo)

@bermonpainter #codemotion

1. Schizzo (wireframe)2. Prototipazione Rapida3. Style Tile4. Criticare / Critica e Test5. Ripetere5. Ripetere

Construir (diseño/desarollo)

@bermonpainter #codemotion

1. Schizzo (wireframe)2. Prototipazione Rapida3. Style Tile4. Criticare / Critica e Test5. Ripetere

2. Prototipazione Rapida

Prototipazione Rapida

@bermonpainter #codemotion

Strumenti

@bermonpainter #codemotion

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..

Altre Opzioni

@bermonpainter #codemotion

Sistemi Modulari

@bermonpainter #codemotion

Componenti

@bermonpainter #codemotion

Estensioni di Compass

@bermonpainter #codemotion

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:

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!

Struttura Utile

@bermonpainter #codemotion

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

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

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

1. Migliorare i processi2. Collaborazione tra le varie discipline

@bermonpainter #codemotion

SCOPORaggiungere attraverso il

web appena possibile.

@bermonpainter #codemotion

DOMANDE

@bermonpainter #codemotion