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.

expo 2015

 

 

Checklist CSS

1- Nella compilazione del CSS, procedere dall'alto verso il basso del layout e dividere con i commenti le sezioni del layout.

I commenti sono una buona idea per rendere leggibile il codice.

/****** Generic classes ***/

 (body, a, p, h1, etc.)

/****** Main content ****/

.main-content

/****** Footer *********/
.footer


2- Accorpare il più possibile le dichiarazioni assieme ( sfruttando le regole comuni e le ereditarietà ) ed evitare i selettori troppo lunghi.

iframe ie11 e blocco dei javascript

errore nei js su iframe in IE Linea: 1 Carattere: 1 Codice: 0 Messaggio di Errore: Errore di sintassi In realtà l'errore dipende dal fatto che non viene caricato il js ma si viene dirottati nella pagina di login per un problema di autenticazione. Il codice, in una pagina a se stante, funziona correttamente: dentro l'iframe il cookie di sessione non viene caricato correttamente .

Mixins

I "mixins" permettono di inserire tutte le proprietà di una classe "padre", semplicemente includendo il nome della classe stessa come uno delle proprietà della classe "figlia".

.padre{ color: red; font-size: 12px; } 

.figlia{ .padre; }

Border-box

La proprietà box-sizing è utilizzato per dire al browser quali proprietà di dimensionamento includere in larghezza e altezza: se includere il border e padding o solo il contenuto del box. Ad esempio , se si desiderano che due div siano fianco a fianco, si può creare un box-sizing a "border-box" . In questo modo il browser interpreta il box con la larghezza e l'altezza specificate posizionando il margin e il padding all'interno del nostro box.