+ SASS = - stress

18
+ SASS = - STRESS Fare CSS orientato al metodo e all’utente

description

#uxcamp.it

Transcript of + SASS = - stress

Page 1: + SASS = - stress

+ SASS = - STRESSFare CSS orientato al metodo e all’utente

Page 2: + SASS = - stress

2

[+ S

ASS =

- Stre

ss] Thin

k C

SS

A LITTLE PRESENTATION

body{ nome: Fabio; cognome: Fabbrucci; mail-work: [email protected]; mail-personal: [email protected]; twitter: @Fabbrucci !important; company: Retina; job: CTO;}

Page 3: + SASS = - stress

3

[+ S

ASS =

- Stre

ss] Thin

k C

SS

PROGRAMMA DEL TALK

Come siamo arrivati a Sass Introduzione al Sass Pro e contro In concreto UX e Sass Conclusioni Domande On the battleground

Page 4: + SASS = - stress

4

[+ S

ASS =

- Stre

ss] Thin

k C

SS

COME SIAMO ARRIVATI A SASS

Il cliente cambia idea a CSS fatto I commenti nel CSS stavano proliferando CSS di un anno fa… Oh my god! 15 chiamate HTTP per il css

Page 5: + SASS = - stress

5

[+ S

ASS =

- Stre

ss] Thin

k C

SS

COME SIAMO ARRIVATI A SASS

Bisogni: Riutilizzo del codice Framework Metodologia condivisa Programmabilità

Siamo passati per: Inclusioni di CSS

Reset.css di Eric Meyer Blueprint

Page 6: + SASS = - stress

6

[+ S

ASS =

- Stre

ss] Thin

k C

SS

INTRODUZIONE A SASS

http://sass-lang.com/ “Sass makes CSS fun again” Scritto in Ruby Sintassi YML

2 forme di sintassi Scss Sass

Cross Platform Tool di conversione Css > Sass

Page 7: + SASS = - stress

7

[+ S

ASS =

- Stre

ss] Thin

k C

SS

MY FIRST SASS FILE

.titolo color: blue font-size: 24px

.testo color: black

a text-decoration: none

Page 8: + SASS = - stress

8

[+ S

ASS =

- Stre

ss] Thin

k C

SS

VANTAGGI

Tecnici Variabili Formule o Mixin Gerarchia o Nesting Velocità

Scrittura del CSS Prestazioni

Framework Umani

Riutilizzo Arginamento Metodica Manutenibilità

Page 9: + SASS = - stress

9

[+ S

ASS =

- Stre

ss] Thin

k C

SS

VARIABILI

$larghezza_totale: 950px

$bordo: 3px

$altezza_content: 400px

$color_blu: #0000ff

$color_rosso: #ff0000

$color_verde: #00ff00

$color_grigio: #bcbcbc

$color_grigioChiaro: #999999

$color_grigioScuro: #666666

Page 10: + SASS = - stress

10

[+ S

ASS =

- Stre

ss] Thin

k C

SS

VANTAGGI

Tecnici Variabili Formule o Mixin Gerarchia o Nesting Velocità

Scrittura del CSS Prestazioni

Framework Umani

Riutilizzo Arginamento Metodica Manutenibilità

Page 11: + SASS = - stress

11

[+ S

ASS =

- Stre

ss] Thin

k C

SS

FORMULE O MIXIN

$larghezza_container: $larghezza_totale - ($bordo * 2)

$larghezza_right: $altezza_content

$altezza_li: ($altezza_content - 3 * $bordo) / 4

$larghezza_li: $altezza_li

$larghezza_left: ($larghezza_li + $bordo) * 2

$larghezza_center: $larghezza_container - $larghezza_left - $larghezza_right - $bordo

Page 12: + SASS = - stress

12

[+ S

ASS =

- Stre

ss] Thin

k C

SS

VANTAGGI

Tecnici Variabili Formule o Mixin Gerarchia o Nesting Velocità

Scrittura del CSS Prestazioni

Framework Umani

Riutilizzo Arginamento Metodica Manutenibilità

Page 13: + SASS = - stress

13

[+ S

ASS =

- Stre

ss] Thin

k C

SS

GERARCHIA O NESTING

.titolo

font-size: 24px

a

color: blue

=style_titolo($size = 24px)

font-size: $size

a

color: blue

&:hover

color: $color1

H1

+style_titolo(34px)

Page 14: + SASS = - stress

14

[+ S

ASS =

- Stre

ss] Thin

k C

SS

VANTAGGI

Tecnici Variabili Formule o Mixin Gerarchia o Nesting Velocità

Scrittura del CSS Prestazioni

Framework Umani

Riutilizzo Arginamento Metodica Manutenibilità

Page 15: + SASS = - stress

15

[+ S

ASS =

- Stre

ss] Thin

k C

SS

SVANTAGGI

Framework Different Bug Detection Selezione del personale Formazione e startup

Page 16: + SASS = - stress

16

[+ S

ASS =

- Stre

ss] Thin

k C

SS

UX E SASS

Design ed arte – è una storia antica Dinamicità al cambiamento Consapevolezza del progetto Professionalità

Page 17: + SASS = - stress

17

[+ S

ASS =

- Stre

ss] Thin

k C

SS

CONCLUSIONI

Miglioramenti notevoli al ciclo di sviluppo Personale orientato al metodo e non alle

conoscenze Do less Fare Css ora è Fun, anche per me! See also

Blueprint Compass

Page 18: + SASS = - stress

18

[+ S

ASS =

- Stre

ss] Thin

k C

SS

DOMANDE

?

http://www.slideshare.net/fabio.fabbrucciFeedback PER FAVORE alla mia Email

La crescita passa per gli erroriGrazie per la pazienza