slide sessione drupal theming & css framework – drupal camp torino 2010
DESCRIPTION
Difficoltà: Facie, BeginnerArgomenti: Drupal Theming & Css FrameworkDescrizione: Le slide sono state proiettate durante la sessione "Drupal Theming & Css Framework" al Drupal Camp 2010 di Torino da Domenico Monaco, aka Kiuz. domenico.monaco[@]kiuz.itTRANSCRIPT
![Page 1: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/1.jpg)
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.
![Page 2: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/2.jpg)
2 / 41
Non Reinventare la ruota
![Page 3: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/3.jpg)
3 / 41
Dove cercare …
![Page 4: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/4.jpg)
4 / 41
Cosa Cerchiamo ...
http://www.flickr.com/photos/pinksherbet/3387327059/
![Page 5: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/5.jpg)
5 / 41
Codice Banale o ripetitivo?
Sempre i soliti problemi e le solite soluzioni?
Spesso si usa un tema base ...
http://www.flickr.com/photos/67499195@N00/2571056264
![Page 6: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/6.jpg)
6 / 41
1° ParteButtiamo un po' di carne al fuoco
![Page 7: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/7.jpg)
7 / 41
Design Mockup & Draft
Design User Interface
![Page 8: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/8.jpg)
8 / 41
Cascading Style Sheet
Foglio di stile: *.css
Panoramica CSS
![Page 9: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/9.jpg)
9 / 41
Cos'è & Cosa fà?
Panoramica CSS
● É 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
![Page 10: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/10.jpg)
10 / 41
Sintassi
Panoramica CSS
● 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
![Page 11: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/11.jpg)
11 / 41
Uso & Possibilità
Panoramica CSS
● Spostare una gran quantità di informazioni● Presentazione e Markup più manutenibile● Condivisione degli Stili
http://www.flickr.com/photos/britbohlinger/4223755982/
![Page 12: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/12.jpg)
12 / 41
Sorgenti
Panoramica CSS
● 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>
![Page 13: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/13.jpg)
13 / 41
Panoramica CSS
●Inline negli elementi di markup (usando Style)
●Embeded Style Block nel file HTML
●File Esterno
●User Style / Local CSS
●User Agent Style
Priorità
![Page 14: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/14.jpg)
14 / 41
DRUPAL THEMING
Drupal Theming
![Page 15: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/15.jpg)
15 / 41
Componenti comuni
Drupal Theming
● TemplateName.info
● page.tpl.php
● front-page.tpl.php
● block.tpl.php
● template.php
![Page 16: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/16.jpg)
16 / 41
Separazione …
Drupal Theming
preprocess_hook +
Template Engine
![Page 17: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/17.jpg)
17 / 41
Granularità
Drupal Theming
![Page 18: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/18.jpg)
18 / 41
Eredità & Gerarchia
Drupal Theming
• 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
![Page 19: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/19.jpg)
19 / 41
2° Parte
… facciamo un po' di ordine
CSS Framework!
![Page 20: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/20.jpg)
20 / 41
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
Cos'è un Css Framework
![Page 21: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/21.jpg)
21 / 41
Qual'è lo scopo?
CSS Framework
[…] 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!
![Page 22: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/22.jpg)
22 / 41
Componenti/separazione
CSS Framework
Componenti comuni:● RESET.css
● BASELINE.cssAdd-ons / Extra● Print.css● Typography.css● Forms.css● Grid.css● ....
Modularizzazione:● Utilizzo più semplcie● Utilizzo disgiunto● Pensare a “mattoncini”
![Page 23: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/23.jpg)
23 / 41
Vantaggi
CSS Framework
● 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 (?)
![Page 24: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/24.jpg)
24 / 41
Svantaggi
CSS Framework
Non è tuo
Curva di apprendimento
Non tutto è necessario (?)
Possibili implicazione Semantiche (Pro/Contro?)
![Page 25: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/25.jpg)
25 / 41
Perdite di Tempo / Risparmio di tempo
CSS Framework
É assodato:Non c'è dubbio, fa risparmiare tempoCrea una baseNon si inizia a sviluppare da “Zero”
In contrasto:Esiste una curva di ApprendimentoAll'inizio potrebbe esserci confusioneSe non lo si consce, i tempi si allungano
EqilibrioBuona comprensione prima di avere dei beneficiTuttavia esiste chi trova positivo utilizzare il proprio codice
![Page 26: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/26.jpg)
26 / 41
Css Framework
Quale Scegliere!?
![Page 27: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/27.jpg)
27 / 41
Blueprint CssFramework
![Page 28: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/28.jpg)
28 / 41
Blueprint CssFramework
![Page 29: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/29.jpg)
29 / 41
Blueprint CssFramework
![Page 30: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/30.jpg)
30 / 41
Mockup
Drupal - Design a Theme
![Page 31: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/31.jpg)
31 / 41
Drupal - Design a Theme
c
![Page 32: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/32.jpg)
32 / 41
Drupal - Design a Theme
![Page 33: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/33.jpg)
33 / 41
Blueprint/ LICENSE.txt README.txt
blueprint.info
page.tpl.php node.tpl.php block.tpl.php
comment.tpl.php
box.tpl.php forum-list.tpl.php
template.php template.block-editing.inc
system.patch
Blueprint/css: blueprint.css ie6.css ie.css style.css
./images: icons loading.gif lquote.png
./images/icons: forum-closed.png forum-default.png forum-hot-new.png forum-hot.png forum-new.png forum-sticky.png menu-collapsed.gif menu-expanded.gif menu-leaf.gif
./scripts: general.js
Non contiene CSS FRAMEWORK!→ Blueprint
Bisogna effettuare il download!
Drupal - Design a Theme
![Page 34: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/34.jpg)
34 / 41
http://www.blueprintcss.org/Root/
BlueprintPluginSrcie.cssprint.cssscreen.css
LibTemplates
Psdfixed-width.psd
TestCHANGELOGS, LICENSE, README.textile
SRC/forms.cssgrid.css (?)ie.cssprint.cssreset.csstypograpy
Drupal - Design a Theme
![Page 35: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/35.jpg)
35 / 41
Drupal - Design a Theme
Grid.css
![Page 36: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/36.jpg)
36 / 41
Grid.css
Drupal - Design a Theme
![Page 37: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/37.jpg)
37 / 41
30pixel x 24colonne = 720px
720px + (10px (gutter) x 24px) = 960px
Span 1 = 30px + 10px = 40pxSpan 2 = ((30 * 2) + (2-1)*10px) + 10px = 80pxSpan “n” = ((30px * n) + ((n-1)*10px)) + 10px = ??
Custom?Span “n” = ((WIDTH-COL * n) + ((n-1) * GUTTER-SPACE)) + GUTTER-SPACE = ??
Drupal - Design a Theme
![Page 38: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/38.jpg)
38 / 41
Dimostrazione Pratica
Drupal - Design a Theme
![Page 39: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/39.jpg)
39 / 41
The End
http://www.flickr.com/photos/kiuz/
![Page 40: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/40.jpg)
40 / 41
Domande?
http://www.flickr.com/photos/oberazzi/318947873/
![Page 41: Slide sessione Drupal Theming & CSS Framework – Drupal Camp Torino 2010](https://reader033.vdocuments.mx/reader033/viewer/2022052505/555ee4d6d8b42a772f8b596e/html5/thumbnails/41.jpg)
41 / 41
Domenico Monaco - Web Developer & Designer -
[email protected]@kiuzhack
Links:
http://www.kiuz.it → Home
http://www.pillsofbits.com → Blog
CoFounder @ http://www.slice2theme.com
Un Grazie a tutti voi