Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

Drupal Theming & CSS Framework

Velocizzare ed ottimizzare i tempi di sviluppo
di un tema. Panoramica, caratteristiche dei
CSS Framework e come utilizzarli per
realizzare Design per Drupal.

Non Reinventare la ruota

2 / 41

http://www.flickr.com/photos/pinksherbet/3387327059/

Cosa Cerchiamo ...

4 / 41

http://www.flickr.com/photos/67499195@N00/2571056264

Codice Banale o ripetitivo?
Sempre i soliti problemi e le solite soluzioni?
Spesso si usa un tema base ...
5 / 41

1° Parte
Buttiamo un po' di carne al fuoco

6 / 41

Design User Interface
Design Mockup & Draft

7 / 41

Panoramica CSS

Cascading Style Sheet
Foglio di stile: *.css

8 / 41

Panoramica CSS
Cos'è & Cosa fà?
● É un linguaggio
● Descrive la presentazione del contenuto
● Separa contenuto e presentazione
● Possiede priorità definite → prevedere risultato
→ Cascading
● Produce: Migliore accessibilità
Maggiore Flessibilità / Controllo
Minore complessità / Ripetizioni

9 / 41

Panoramica CSS
Sintassi
●
Alcuni termini “Anglofoni” → “Property”
● Style Sheet: Uno o più Blocchi di Dichiarazioni
● Blocchi di Dichiarazioni: lista di dichiarazioni
comprese tra parentesi graffe“{ }”
● Dichiarazione: Property : Value/Values;
● Selettori / Classi / Pseudo Classisi …
● Blocchi dichiarazione → Elementi Markup

10 / 41

Panoramica CSS

http://www.flickr.com/photos/britbohlinger/4223755982/

Uso & Possibilità
● Spostare una gran quantità di informazioni
● Presentazione e Markup più manutenibile

● Condivisione degli Stili

11 / 41

Panoramica CSS
Sorgenti
● Codice Inline: <tag style=”property:'value';”></tag>
● Codice embeded:

<html><head>
<title>Esempio</title>
<style type="text/css">
.Selector{
Property: value;
}
</style>
</head>
● File separato:
<html><head>
<title>Esempio</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
12 / 41

Panoramica CSS

● Inline negli elementi di markup (usando Style)
● Embeded Style Block nel file HTML
Priorità ● File Esterno
● User Style / Local CSS
● User Agent Style
13 / 41

Drupal Theming

DRUPAL THEMING

14 / 41

Drupal Theming
Componenti comuni

● TemplateName.info
● page.tpl.php
● front-page.tpl.php
● block.tpl.php
● template.php

15 / 41

Drupal Theming
Separazione …

preprocess_hook
+
Template Engine

16 / 41

Drupal Theming
Granularità

17 / 41

Drupal Theming
Eredità & Gerarchia

• Tema di base
• Sub-Theme eredita tutti gli stili
• Sub-Theme eredita tutti i *.tpl
• Sub-Theme eredita tutte le funzione template.php
• Sub-Theme non utilizza mai funzioni *phptemplate_
• Riuscire sempre ad ottimizzare e aggiornare il tema
• Override e Gerarchia

18 / 41

2° Parte
… facciamo un po' di ordine

CSS Framework!

19 / 41

CSS Framework

Cos'è un Css Framework
● jQuery, Symfony, Dojo ... Drupal! … sono Framework!
● Insieme di “tools”

● Libreria, insieme di Hacks … (?)

● Estraendo e rendendo disponibile per altri progetti

● Hai creato il tuo CSS Framework

20 / 41

CSS Framework
Qual'è lo scopo?
[…] The goal here is to allow the designer or developer to focus on
tasks that are unique to a given project, rather than reinventing the
wheel each time around. Generally speaking, this is the approach
taken by the aforementioned JavaScript and web application
frameworks. [...]

Jeff Croft - http://www.alistapart.com/articles/frameworksfordesigners/

… renderci la vita più facile!

21 / 41

CSS Framework
Componenti/separazione

Componenti comuni: Modularizzazione:
● RESET.css
● Utilizzo più semplcie
● BASELINE.css
● Utilizzo disgiunto

Add-ons / Extra ● Pensare a “mattoncini”
● Print.css

● Typography.css

● Forms.css

● Grid.css

● ....

22 / 41

CSS Framework
Vantaggi
● Non si è ripetitivi
● Concetti di base condivisi

● Uso implicito di nomenclatura

● Perfomance (?)

● Efficenza, ottimizate, codice condensato, no-withe-

space, Short-Hand – File leggeri
● Compatibilità Cross-Browser

● Minor tempo/risorse

● Layout Complessi ma veloce (?)

23 / 41

CSS Framework
Svantaggi

Non è tuo

Curva di apprendimento

Non tutto è necessario (?)

Possibili implicazione Semantiche (Pro/Contro?)

24 / 41

CSS Framework
Perdite di Tempo / Risparmio di tempo
É assodato:
Non c'è dubbio, fa risparmiare tempo
Crea una base
Non si inizia a sviluppare da “Zero”

In contrasto:
Esiste una curva di Apprendimento
All'inizio potrebbe esserci confusione
Se non lo si consce, i tempi si allungano

Eqilibrio
Buona comprensione prima di avere dei benefici
Tuttavia esiste chi trova positivo utilizzare il proprio codice

25 / 41

Css Framework
Quale Scegliere!?

26 / 41

Blueprint CssFramework

27 / 41


28 / 41


29 / 41

Drupal - Design a Theme
Mockup

30 / 41


c

31 / 41


32 / 41

Blueprint/css:
Blueprint/ blueprint.css
LICENSE.txt ie6.css
README.txt ie.css
blueprint.info
style.css
Non contiene
./images: CSS FRAMEWORK!
page.tpl.php icons
node.tpl.php loading.gif → Blueprint
lquote.png
block.tpl.php
./images/icons: Bisogna effettuare il
comment.tpl.php forum-closed.png
forum-default.png download!
forum-hot-new.png
box.tpl.php forum-hot.png
forum-list.tpl.php forum-new.png
forum-sticky.png
menu-collapsed.gif
template.php menu-expanded.gif
template.block-editing.inc menu-leaf.gif

system.patch ./scripts:
general.js

33 / 41

http://www.blueprintcss.org/
Root/
Blueprint SRC/
Plugin forms.css
Src grid.css (?)
ie.css
print.css ie.css
screen.css print.css
Lib reset.css
Templates typograpy
Psd
fixed-width.psd

Test
CHANGELOGS, LICENSE, README.textile
34 / 41

Grid.css

35 / 41

Grid.css

36 / 41


30pixel x 24colonne = 720px

720px + (10px (gutter) x 24px) = 960px

Span 1 = 30px + 10px = 40px
Span 2 = ((30 * 2) + (2-1)*10px) + 10px = 80px
Span “n” = ((30px * n) + ((n-1)*10px)) + 10px = ??

Custom?
Span “n” = ((WIDTH-COL * n) + ((n-1) * GUTTER-SPACE)) + GUTTER-SPACE = ??

37 / 41


Dimostrazione Pratica

38 / 41

The End

http://www.flickr.com/photos/kiuz/
39 / 41

http://www.flickr.com/photos/oberazzi/318947873/

Domande?
40 / 41

Un Grazie a tutti voi

Domenico Monaco - Web Developer & Designer -

domenico.monaco@kiuz.it
twitter@kiuzhack
Links:

http://www.kiuz.it → Home

http://www.pillsofbits.com → Blog

CoFounder @ http://www.slice2theme.com

41 / 41

Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

Recommended

Recommended

More Related Content

Similar to Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010

Similar to Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010 (20)

More from Domenico Monaco

More from Domenico Monaco (11)

Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010