Style Guide Unibo General

Visibilità per Screenreaders

Utilizzare queste classi per nascondere il contenuto solamente in determinati breakpoints, mantenendo la leggibilità per gli screen readers

SCSS da includere: u_visibility.scss

Classe da utilizzare: hide-for-sr-*

              
          You are definitely not on a small screen.
          You are definitely not on a medium screen.
          You are definitely not on a large screen.

Spinner

Il widget per lo spinner ha una posizione Fixed, pertanto deve essere messo all'interno di qualsiasi elemento con "position: relative" se si vuole delimitarlo. Per averlo full-screen basta inserirlo come figlio del body (Vedi esempio).

SCSS da includere: u_spinner.scss

Classe da utilizzare: u-spinner-container e u-spinner

Lorem ipsum

Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

To Top

Questo elemento rimane fisso in basso a destra dello schermo e viene usato per tornare a inizio pagina.

SCSS da includere: u_to_top.scss

Classe da utilizzare: u-to-top

Bordi

In maniera analoga alle prototype classes usate in Foundation, è stato sviluppata una funzione analoga per la creazione di bordi.

Per utilizzare la funzionalità è sufficiente usare la classe border-* dove * indica il border-width. Ad esempio per avere un bordo di 1px si utilizza la classe border-1.

E' possibile indicare anche solo un lato a cui applicare il bordo. Ad esempio, in questo modo: border-top-1, verrà applicato un bordo di 1px al lato superiore dell'elemento.

Il colore del bordo è definito dalla variabile $border-color

SCSS da includere: u_border.scss

Classe da utilizzare: border-*

              
          
            Styleguide Foundation

Styleguide Foundation

Spaziature

In aggiunta alle prototype classes usate in Foundation, è stato sviluppata la possibilità di avere padding e margin più piccoli.

Per utilizzare la funzionalità è sufficiente usare la classe padding-half o margin-half. In questo modo la spaziatura sarà la metà del padding/margin normale.

E' possibile indicare anche solo un lato a cui applicare la spaziatura. Ad esempio, in questo modo: padding-top-half, verrà applicato la spaziatura dimezzata solo al lato superiore dell'elemento.

SCSS da includere: u_spacing.scss

Classe da utilizzare: padding-half o margin-half

              
          
            Styleguide Foundation