Post on 13-Dec-2014
description
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