Drupal Theming & CSS Framework - Velocizzare ed ottimizzare i tempi di sviluppo di un tema. Panoramica, caratteristiche dei CSS Framework e come ...

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

Dove cercare …

3 / 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: 
● Codice embeded:

     Esempio
     
          .Selector{
              Property: value;
          }
     
●   File separato:
     
     Esempio
          
    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

Blueprint CssFramework

28 / 41

Blueprint CssFramework

29 / 41

Drupal - Design a Theme
             Mockup

30 / 41

Drupal - Design a Theme

                c

31 / 41

Drupal - Design a Theme

32 / 41

Drupal - Design a Theme
                      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

Drupal - Design a Theme
           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

Drupal - Design a Theme
             Grid.css

35 / 41

Drupal - Design a Theme
             Grid.css

36 / 41

Drupal - Design a Theme

                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

Drupal - Design a Theme

          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