Sass Appunti - Sass (Syntactically Awesome StyleSheets)

(documentazione: http://sass-lang.com/documentation/file.SASS_REFERENCE.html )

 

Sass è un'estensione di CSS che aggiunge potenza ed eleganza a questo linguaggio di base. Esso consente di utilizzare le variabili, regole annidate, mixin, le importazioni in linea, e molto altro, il tutto con una sintassi completamente compatibile CSS. 

Sass aiuta a mantenere grandi fogli di stile ben organizzati e ottenere piccoli fogli di stile rapidamente operativi.

regole selettore specifiche

l'input #input dovrebbe avere dimensione 95% ma viene sovrascritto, nonostante sia in cima, dalla seconda regola...

#input {
  width: 95%;
}

...che dice che tutti gli input contenuti nel #form sono di 98%.

#form input {
  min-height: 25px;
  width: 98%;
}

Per risolvere, basta specificare il tipo ad #input e usare il selettore più preciso input#input

drupal-sub-theme

Per creare un sub tema ( fondamentale non modificare il tema originale ma creare sempre un sub tema ) bisogna creare una cartella che contenga il file miotema.info

Il nome del base theme deve corrispondere al nome della cartella del tema principale, NON al nome del tema :

name = miotema
base theme = bluemasters
description = A responsive theme based on Blue Masters
version = VERSION
core = 7.x
engine = phptemplate

O si otterrebbe una serie di errori di tipo non-object.

"Trying to get property of non-object in drupal_alter() sub theme"

Usabilità e accessibilità

A differenza del predecessore, in B3 l'orientamento è verso il mobile first*. Significa che l'aspetto responsivo ( visuale e a livello di prestazioni ) non è un opzione ma la base del framework. In pratica, la griglia offre un esteso margine di personalizzazione a seconda che il device sia extra small, grazie all'utilizzo delle classi specifiche seguite dalla dimensione ( col-xs- ), small ( col-sm- ), medium (col-md), large ( col-lg- ). 

 Extra small devices Phones (<768px)Small devices Tablets (≥768px)Medium devices Desktops (≥992px)Large devices Desktops (≥1200px)
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Container widthNone (auto)750px970px1170px
Class prefix.col-xs-.col-sm-.col-md-.col-lg-
# of columns12
Column widthAuto~62px~81px~97px
Gutter width30px (15px on each side of a column)
NestableYes
OffsetsYes
Column orderingYes

Checklist Accessibilità

 
1. Che il load-time del sito sia ragionevole.
2. Contrasto adeguato tra testo e sfondo
3. Dimensione carattere / spaziatura di facile lettura
4. Add-on utilizzati con parsimonia, assenza di contenuti Flash o Iframe.
5. Le immagini hanno appropriati tag ALT
6. Il sito ha delle appropriate pagine non-found (404) o accesso negato (403)
Identità
7. Il logo della società  è in evidenza 
8. Il messaggio è chiaro e in evidenza
9.