Intro
Framaework CSS è un framework sviluppato internamente dal team di RAD per lo sviluppo di siti web responsive, frutto dell'esperienza maturata nel tempo e della collaborazione con esperti del settore. Il progetto è in continua evoluzione e coesiste insieme ad altri, come il Wordpress starter theme e Iconae: il set di icone dinamico.
è scritto in SASS puro (non in SCSS) e sfrutta la metodologia BEM per mantenere una logica chiara e ben definita. Per una guida dettagliata consiglio questo link: https://en.bem.info/methodology.
La versione BEM utilizzata da Framaework è descritta in questo articolo.
N.B: Tutta la documentazione è scritta non soltanto per spiegare come si utilizza il framework ma anche come funziona, per permettere ad eventuali sviluppatori interessati a contribuire al suo sviluppo.
La semantica
Framaework segue gli standard BEM già descritti nell'introduzione, consiglio l'articolo About HTML semantics and front-end architecture, di Nicolas Gallagher per prendere spunto su ottimi consigli di semantica (alcuni presenti anche in questa documentazione) oltre a questo, ecco alcune regole da tenere in considerazione per sfruttarlo al meglio:
HTML
- Utilizzare sempre i tag semantici di HTML5.
- Eccetto dove specificato, inserire le classi di Framaework all'interno di
div
. - Utilizzare
div
appositi per le classi strutturali di Framaework, senza associare ad essi altre classi che possano modificarne il corretto funzionamneto. - Nel caso in cui sia necessario modificare il funzionamento delle classi di Framaework, creare degli overlay del codice tramite un padre che inglobi la regola interessata. (questo permette di continuare a sfruttare la modularità di BEM).
- Tutto il codice di Framaework è sviluppato con un sistema di indentazione composto da due spazi per tab.
- Utilizzare sempre classi. Gli ID possono essere utilizzati solo per il JavaScript.
- Quando sarà necessario creare classi da richimare in funzioni JavaScript dovranno essere precedute dal suffisso
js--nome-classe
. Questo permette di riconoscere quali classi non toccare per non interrompere il funzionamento del JS.
CSS
- Per poter utilizzare correttamente Framaework, è necessario scrivere il codice in SASS.
- Creare file multipli da inlcudere successivamente tramite SASS permette di gestire il codice in modo più pulito e ordinato.
- Ogni nuovo file dovrà essere rinominato secondo la seguente logica:
nome-pagina_blocco_elemento_modificatore
. In questo modo ogni membro del team sarà in grado di capire che file andare a modificare.
Media Queries
Tutto il framework è sviluppato seguendo le regole del mobile first e si basa su tre breakpoints per definire le risoluzioni dei vari dispositivi:
- $tab: 640px
- $desk: 1024px
- $wall: 1324px
È possibile gestire e modificare questi parametri dalla sezione dev/variables/_media-queries.sass. In questo file sono presenti delle condizioni in grado di definire i breakpoint in modo molto semplice: richiamando la funzione +breakpoint('risoluzione')
è possibile decidere per quali dispositivi rendere valida la regola CSS (sempre tenendo conto del mobile first):
- Nessun breakpoint: Senza nessuna specifica, la regola è valida da 0px di risoluzione in su.
- +breakpoint(tab): Valido da 640px in su.
- +breakpoint(eq_mobile): Valido fino a 640px.
- +breakpoint(eq_tab): Valido da 640px a 1024px.
- +breakpoint(desk): Valido da 1024px in su.
- +breakpoint(wall): Valido da 1324px in su.
Font
Di default, Framaework è impostato per riportare il testo base alla grandezza di 14px (0.875em). È possibile cambiare questa impostazione tramite CSS, nella sezione "dev/text/_font.sass", impostando il valore di default della funzione SASS =font-size($sizeValue: FONT-SIZE)
, dove al posto di "FONT-SIZE dovrà essere inserita la grandezza desiderata in pixel, senza l'aggiunta di unità di misura.
Allo stesso modo è possibile cambiare il valore di line-height
e letter-spacing
, delle funzioni presenti nella solita sezione.
Font Families
Tramite la sezione dev/text/_font-families.sass è posisbile aggiungere o modificare le impostazioni delle famiglie dei fonts del framework: di base sono presenti tre variabili: $sans-serif
, $serif
e $monospace
.
Text Alignment
Aggiungendo le classi .txt-left
, .txt-right
, .txt-center
e .txt-justify
è possibile definire come allineare il testo, rispetivamente a: sinistra, destra, centrato o giustificato. Il file che definisce queste funzioni è dev/text/_text-alignment.sass.
Grid Container
Con il grid container introduciamo la sezione che gestisce il layout. Il grid container permette di definire dei contenitori per i nostri contenuti, ne esistono di quattro tipi e si assegnano semplicemente con delle classi al nostro contenitore:
- .grid-container: È lo standard, contenitore fluido con larghezza massima a 1024px.
- .grid-container--small: Contenitore fluido con larghezza massima a 800px.
- .grid-container--large: Contenitore fluido con larghezza massima a 1220px.
- .grid-container--responsive: Varia di grandezza a seconda delle risoluzioni: dal desktop in giù rispettivamente 1220px, 1024px e 800px.
Il file del grid-container è raggiungibile da dev/grid/_grid-container.sass.
Columns Grid system
Per impaginare gli elementi all'nterno della pagina, Framaework utilizza un classico sistema a dodici colonne.
Per funzionare, necessita di un padre con la classe .row
all'interno del quale è possibile definire delle colonne tramite la classe .row__columns
associata alla risoluzione e il numero di colonne, seguendo lo schema risoluzione-num
.
Tutte le classi e le funzionalità del columns grid system sono raggiungibili in dev/grid/_grid.sass.
<div class="row">
<div class="row__column mobile-3 tab-6 desk-3">
1
</div>
<div class="row__column mobile-3 tab-6 desk-3">
2
</div>
<div class="row__column mobile-3 tab-6 desk-3">
3
</div>
<div class="row__column mobile-3 tab-6 desk-3">
4
</div>
</div>
.row
dovrà sempre essere a sua volta contenuto in un div .row__column
, anche se la colonna è una sola.
Columns Grid Margins
Per riuscire a gestire al meglio ogni casistica, Framaework mette a disposizione tre diversi rapporti di spazio tra una colonna e l'altra, per impostarlo è sufficiente aggiungere un modificatore alla classe .row
:
- row: È lo standard, tra una colonna e l'altra sono presenti 16px (1rem).
- row--half: Lo spazio tra le colonne è dimezzato, sarà quindi di 8px (0.5rem).
- row--stuck: Lo spazio viene totalmente eliminato, le colonne si trovano affiancate l'una all'altra.
.row
.row--half
.row--stuck
Columns Grid Vertical align
È possibile gestire l'allineamento verticale delle colonne assegnando uno classe extra all'elemento .row
, è riconoscibile tramite il suffisso columns-
, aggiungendo infine tab o desk è possibile definirne anche il responsive ai diversi breackpoint:
- columns-top: È lo standard, le colonne di diversa altezza si allineano dall'alto.
- columns-middle: Le colonne di diversa altezza si centrano nel mezzo.
- columns-bottom: le colonne di diversa altezza si allineano dal basso.
I breakpoints:
- columns- : Senza nessun prefisso è valido per tutti i breakpoints.
- tab-columns- : Allineamento verticale valido per i breackpoints tablet e desktop.
- desk-columns- : Allineamento verticale valido per il breackpoint desktop.
Questo esempio allinea verticalmente le colonne in alto per gli smartphone e al centro per tablet e desktop:
<div class="row columns-top tab-columns-middle"></div>
dolor sit amet
dolor
sit amet
dolor sit amet
Columns Grid Horizontal align
È possibile gestire l'allineamento orizzontale delle colonne assegnando uno classe extra all'elemento .row
, è riconoscibile tramite il suffisso columns-
, aggiungendo infine tab o desk è possibile definirne anche il responsive ai diversi breackpoint:
- columns-start: È lo standard, le colonne si allineano da sinistra verso destra.
- columns-center: Le colonne si centrano nel mezzo.
- columns-end: Le colonne si allineano da destra verso sinistra.
- columns-around: Le colonne si distanziano l'una dall'altra in egual misura.
- columns-between: Le si posizionano al centro e agli estremi, con lo spazio massimo possibile l'una tra l'altra.
I breakpoints:
- columns- : Senza nessun prefisso è valido per tutti i breakpoints.
- tab-columns- : Allineamento orizzontale valido per i breakpoints tablet e desktop.
- desk-columns- : Allineamento orizzontale valido per il breakpoint desktop.
Vari esempi di allineamento:
Start:
<div class="row columns-top columns-start"></div>
Center:
<div class="row columns-top columns-center"></div>
End:
<div class="row columns-top columns-end"></div>
Around:
<div class="row columns-top columns-around"></div>
Between:
<div class="row columns-top columns-between"></div>
Columns Grid Custom columns grid
Di base Framaework funziona con il classico sistema a 12 colonne, di conseguenza, tutti i layout possibili delle colonne devono essere multipli di dodici. È possibile definire dei columns grid customizzati sfruttando un mixin del SASS (situato in dev/grid/_grid-custom.sass), ad esempio per creare cinque colonne.
Layout a 5 colonne:
.custom-columns .row__column
+custom-grid(5)
Buttons
Framaework permette di sfruttare varie tipologie di bottoni di default, che differiscono per forma dimenioni e colori.
Tutti i colori sono gestibili tramite il file colors in dev/variables/_colors.sass alla sezione "Feedback colors".
Le altre impostazioni dei bottoni sono invece presenti in dev/blocks/_buttons.sass.
Il bottone standard può essere richiamato utilizzando la classe .button
.
Sizing:
<a href="#" class="button">Standard</a>
<a href="#" class="button--large">Large Button></a>
<a href="#" class="button--small">Small Button></a>
<a href="#" class="button--tiny">Tiny Button></a>
Coloring:
<a href="#" class="button">Primary Button</a>
<a href="#" class="button--secondary">Secondary Button></a>
<a href="#" class="button--success">Success Button></a>
<a href="#" class="button--alert">Alert Button></a>
<a href="#" class="button--warning">Warning Button></a>
<a href="#" class="button--disabled">Disabled Button></a>
Expanding:
<a href="#" class="button--expand">Primary Button</a>
Rounding:
<a href="#" class="button--radius">Radius Button</a>
<a href="#" class="button--round">Round Button></a>
Forms
Grazie a Framaework è possibile impaginare i forms con pochi semplici accorgimenti, è possibile modificare lo stile dei forms in dev/blocks/_forms.sass.
Seguendo la logica BEM, gli input non posseggono larghezze definite o margini: per poter distanziare verticalmente più input, questi devono essere inseriti dentro un div con classe .form__field
o .form__field--double
per avere uno spazio doppio (vedi lo spazio dopo il bottone di file upload nell'esempio).
Form standard:
<form class="form">
<fieldset>
<legend>Signup</legend>
<div class="form__field form__field--invalid">
<label>
Email
<input placeholder="foo@bar.com" type="email" class="form__input--large">
</label>
<div class="form__msg">Invalid email</div>
</div>
<div class="form__field">
<label>
Password
<input placeholder="Insert your password" type="password">
</label>
<div class="form__msg">Password must be at least 6 chars long</div>
</div>
<div class="form__field">
<label>Select Box
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbucks</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
</label>
</div>
<div class="form__field">
<label for="exampleSelect2">Example multiple select</label>
<select multiple="" class="form-control" id="exampleSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
</div>
<div class="form__field--double">
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="hidden">
</div>
<input type="submit" value="Create Contact" class="button--large">
</fieldset>
</form>
Forms - All HTML5 inputs
Lista di tutti i nuovi input speciali HTML5, stilizzati con Framaework.
<form class="form">
<fieldset>
<legend>HTML5 Special input</legend>
<div class="form__field">
<div class="row columns-middle">
<div class="row__column mobile-2">
<label for="example-text-input">Text</label>
</div>
<div class="row__column mobile-10">
<input class="form-control" type="text" value="Text input" id="example-text-input">
</div>
</div>
</div>
<div class="form__field">
<div class="row columns-middle">
<div class="row__column mobile-2">
<label for="example-search-input">Search</label>
</div>
<div class="row__column mobile-10">
<input type="search" value="Search input" id="example-search-input">
</div>
</div>
</div>
<div class="form__field">
<div class="row columns-middle">
<div class="row__column mobile-2">
<label for="example-email-input">Email</label>
</div>
<div class="row__column mobile-10">
<input type="email" value="mail@example.com" id="example-email-input">
</div>
</div>
</div>
<div class="form__field">
<div class="row columns-middle">
<div class="row__column mobile-2">
<label for="example-url-input">URL</label>
</div>
<div class="row__column mobile-10">
<input type="url" value="http://www.example.com" id="example-url-input">
</div>
</div>
</div>
<div class="form__field">
<div class="row columns-middle">
<div class="row__column mobile-2">
<label for="example-tel-input">Telephone</label>
</div>
<div class="row__column mobile-10">
<input type="tel" value="+39 340 0000000" id="example-tel-input">
</div>
</div>
</div>
<div class="form__field">
<div class="row columns-middle">
<div class="row__column mobile-2">
<label for="example-password-input">Password</label>
</div>
<div class="row__column mobile-10">
<input type="password" value="Password" id="example-password-input">
</div>
</div>
</div>
<div class="form__field">
<div class="row columns-middle">
<div class="row__column mobile-2">
<label for="example-number-input">Number</label>
</div>
<div class="row__column mobile-10">
<input type="number" value="42" id="example-number-input">
</div>
</div>
</div>
<div class="form__field">
<div class="row columns-middle">
<div class="row__column mobile-2">
<label for="example-datetime-local-input">Date and time</label>
</div>
<div class="row__column mobile-10">
<input type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
</div>
</div>
</div>
<div class="form__field">
<div class="row columns-middle">
<div class="row__column mobile-2">
<label for="example-date-input">Date</label>
</div>
<div class="row__column mobile-10">
<input type="date" value="2011-08-19" id="example-date-input">
</div>
</div>
</div>
<div class="form__field">
<div class="row columns-middle">
<div class="row__column mobile-2">
<label for="example-month-input">Month</label>
</div>
<div class="row__column mobile-10">
<input type="month" value="2011-08" id="example-month-input">
</div>
</div>
</div>
<div class="form__field">
<div class="row columns-middle">
<div class="row__column mobile-2">
<label for="example-week-input">Week</label>
</div>
<div class="row__column mobile-10">
<input type="week" value="2011-W33" id="example-week-input">
</div>
</div>
</div>
<div class="form__field">
<div class="row columns-middle">
<div class="row__column mobile-2">
<label for="example-time-input">Time</label>
</div>
<div class="row__column mobile-10">
<input type="time" value="13:45:00" id="example-time-input">
</div>
</div>
</div>
<div class="form__field">
<div class="row columns-middle">
<div class="row__column mobile-2">
<label for="example-color-input">Color</label>
</div>
<div class="row__column mobile-10">
<input class="form-control" type="color" value="#2980b9" id="example-color-input">
</div>
</div>
</div>
</fieldset>
</form>
Forms - Special status
È possibile personalizzare gli input dei form associando dei modificatori alle classi. Inserendo dei testi con la classe .form__msg
verranno posizionati dei messaggi sotto gli input.
<div class="form__field form__field">
<label>
Disabled Input
<input placeholder="Disables form" type="text" disabled class="form__input--large">
</label>
<div class="form__msg">Disabled messagge here.</div>
</div>
<div class="form__field form__field--invalid">
<label>
Invalid Input
<input placeholder="Invalid Input" type="text" class="form__input--large">
</label>
<div class="form__msg">Invalid messagge here.</div>
</div>
<div class="form__field form__field--warning">
<label>
Warning Input
<input placeholder="Warning Input" type="text" class="form__input--large">
</label>
<div class="form__msg">Warning messagge here.</div>
</div>
<div class="form__field form__field--success">
<label>
Success Input
<input placeholder="Success Input" type="text" class="form__input--large">
</label>
<div class="form__msg">Success messagge here.</div>
</div>
Forms - Radio e Checkbox
È possibile assegnare uno stile grafico a checkbox e radio buttons, aggiungendo alcune classi agli elementi standard: il tag label dovrà contenere tutto, con le classi .custom-radio
o .custom-checkbox
. Al suo interno, oltre all'input, sarà presente un altro elemento con classe .custom-radio__icon
o custom-radio__icon
.
Radio buttons:
<label class="custom-radio">
<input type="radio" name="color" value="Red" id="colorRed">
<span class="custom-radio__icon"></span>
Red
</label>
<label class="custom-radio">
<input type="radio" name="color" value="Blue" id="colorBlue">
<span class="custom-radio__icon"></span>
Blue
</label>
<label class="custom-checkbox">
<input type="checkbox" for="Red" id="checkRed">
<span class="custom-checkbox__icon"></span>
Red
</label>
<label class="custom-checkbox">
<input type="checkbox" for="Blue" id="checkBlue">
<span class="custom-checkbox__icon"></span<
Blue
</label>
Forms - Custom Labels
È possibile definire delle etichette customizzate con un background di sfondo e un bottone affiancato al campo di testo: può far comodo per inserire dei suffissi per gli url, numeri di telefono o valute, ecco alcuni esempi:
Custm Label:
<div class="form__field">
<label class="input-group">
<span class="input-group__label">http://</span>
<input class="input-group__field" type="text" placeholder="www.your-domain.com">
</label>
</div>
<div class="form__field">
<label class="input-group">
<span class="input-group__label">$</span>
<input class="input-group__field" type="text">
<span class="input-group__label">.00</span>
</label>
</div>
Label + input:
<div class="form__field">
<label class="input-group">
<span class="input-group__label">Label Text</span>
<input class="input-group__field" type="text">
<div class="input-group__button">
<input type="submit" class="button" value="Submit">
</div>
</label>
</div>
Tables
Le tabelle dovranno essere utilizzate solo per la gestione dei dati, non servono per definire ogni tipologia di layout (per quello utilizzare gli elementi della sezione grid).
Esistono varie tipologie di tabelle: è possibile fare vari tipi di accostamenti sfruttando i modificatori SASS e alcune classi speciali, è possibile modificare il codice delle tabele in dev/bloks/_table.sass.
Per sfruttare le funzionalità base delle tabelle, basta affiancare la classe .table
al normale tag table.
Standard Table:
<table class="table">
<thead>
<tr>
<th width="200">Table Header</th>
<th>Table Header</th>
<th width="150">Table Header</th>
<th width="150">Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Goes Here</td>
<td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
</tbody>
</table>
Table Header | Table Header | Table Header | Table Header |
---|---|---|---|
Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Tables - Striped Table
Aggiungere il modificatore striped alla classe table per ottenere background alternati alle colonne delle tabelle.
<table class="table--striped">
Table Header | Table Header | Table Header | Table Header |
---|---|---|---|
Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Tables - Bordered Table
Aggiungere il modificatore bordered alla classe table per aggiungere i bordi alla tabella (non alle singole celle).
<table class="table--bordered">
Table Header | Table Header | Table Header | Table Header |
---|---|---|---|
Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Tables - Condensed Table
Aggiungere il modificatore condensed alla classe table per dimezzare i padding della tabella e ottenere una versione con gli spazi ridotti.
<table class="table--condensed">
Table Header | Table Header | Table Header | Table Header |
---|---|---|---|
Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Tables - Bordered Cell
Aggiungendo come classe aggiuntiva la classe .bordered-cell
, ogni cella avrà un bordo.
<table class="table bordered-cell">
Table Header | Table Header | Table Header | Table Header |
---|---|---|---|
Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Tables - Hover on row
Aggiungendo come classe aggiuntiva la classe .hover-row
, all'hover del mouse ogni riga della tabella sarà evidenziata.
Ecco un esempio su una tabella con più caratteristiche:
<table class="table--striped bordered-cell hover-row">
Table Header | Table Header | Table Header | Table Header |
---|---|---|---|
Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Tables - Responsive
Per rendere le tabele responsive, aggungere attorno al tag table un div con classe .table-responsive
.
Table Header | Table Header | Table Header | Table Header |
---|---|---|---|
Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Modal Pop-up
È possibile richiamare dei contenuti in overlay, tramite dei pop-up: inserendo il codice del contenuto a fondo pagina, può essere richiamato tramite un qualsiasi tipo di bottone o link, inserendo un attributo extra data-popup="popup1"
. Il valore dell'attributo dovrà coincidere con un id del pop-up con il solito valore del pulsante d'azione.
Aggiungendo le variazioni della lista, è possibile definire la grandezza dei pop-up:
.popup--tiny
: Pop-up largo 320px;.popup--small
: Pop-up largo 520px;.popup
: Pop-up largo 900px;.popup--large
: Pop-up largo 1200px;.popup--full
: Pop-up full screen;
Come utilizzare il pop-up
Un contenuto, per essere definito come pop-up, deve possedere le classi js--popup
e popup
, più un ID univoco.
Per richiamare il pop-up, basterà creare un bottone con la classe js--popup-action
e l'attributo data-popup=""
che, come valore, dovrà contenere l'ID univoco del pop-up.
È possibile inserire la chiusura del pop-up con <button class="js--close-popup popup__button">×</button>
o semplicemente inserendo la classe js--close-popup
a qualsiasi elemento.
All'interno del pop-up è possibile inserire ogni tipologia di contenuto.
È possibile decidere se centrare il popup, inserendo la classe vertical-align
all'elemento .popup__wrap. Ricordarsi di non inserirlo nel pop-up full-screen, causerebbe un malfunzionamento.
Per funzionare, i pop-up hanno bisogno del file CSS dev/blocks/_popup.sass e il file JS in js/dev/global/popup.js, più la dipendenza alla libreria jQuery.
Standard Pop-up
<!-- Bottone in qualsiasi parte della pagina -->
<div data-popup="popup1" class="button js--popup-action">Open Popup</div>
<!-- Codice del Pop-up a fondo pagina (Prima della chiusura del body) -->
<div class="js--popup popup" id="popup1">
<div class="popup__wrap vertical-align">
<h2>Pop-up Title</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<button class="js--close-popup popup__button">×</button>
</div>
</div>
Modal Feedback
Può far comodo inserire dei messaggi di feedback, tramite delle barre colorate (a seconda della tipologia di messaggio), inserendo al suo interno un contenuto testuale. I possibili stati sono: standard, alert, success e warning. È inoltre possibile inserire un modificatore per decidere se inserire il feedback fisso in alto, o in basso.
Per funzionare, i feedback hanno bisogno del file CSS dev/blocks/_feedback.sass e il file JS in js/dev/global/feedback.js, più la dipendenza alla libreria jQuery.
le possibili variazioni sono:
.feedback-modal
: Messaggio di feddback standard (grigio);.feedback-modal--positive
: Messaggio di feddback positivo (verde);.feedback-modal--warning
: Messaggio di feddback di avvertimento (giallo);.feedback-modal--alert
: Messaggio di feddback di errore (rosso);.feedback-modal fixed--top
: Messaggio di feddback posizionato fisso, in alto;.feedback-modal fixed--bottom
: Messaggio di feddback posizionato fisso, in basso;
Esempi di Feedback:
<!-- START Feedback modal -->
<div class="feedback-modal js--feedback-action enable">
<div class="feedback-modal--container">
Standard Feedback messagge
<div class="feedback-modal__close-btn js--feedback-modal__close-btn">
<i class="iconae regular ae--circle-cross"></i>
</div>
</div>
</div>
<!-- END Feedback modal -->
Off Canvas
Off canvas è la soluzione perfetta per creare sidebar animate, apribili con un click. Comodo con un hamburger menu o per layout responsivi. Per funzionare correttamente, l'Off Canvas necessita di tre elementi fondamentali:
- Un tasto azione per aprire il canvas, con un attributo univoco
data-off-canvas
e la classe.js--off-canvas-action
. Spesso è applicato ad un bottone o all'hamburger menu. - La sidebar del canvas con classe
.js--off-canvas
, un id con il solito valore dell'attributodata-off-canvas
, per connettere i due elementi e infine.off-canvas--left
per far apparire l'elemento a sinistra oppure.off-canvas--right
per farlo apparire a destra. All'interno della sidebar è possibile inserire altri elementi opzionali come il.off-canvas__header
per creare una piccola testata, il.off-canvas__close-btn
per creare un bottone di chiusura (se inserito all'interno della testata si centrerà automaticamente) e.off-canvas__body
per crearre un po' di margini e inserire il contenuto. - Per oscurare il resto della viewport, inserire un div vuoto con la classe
.js--off-canvas-overlay
. - Per poter chiudere l'Off Canvas, assegnare la classe
.js--close-popup
. In questo esempio è stata assegnata al bottone di chiusura e a tutto l'overlay.
Tutte le classi e le funzionalità dell'Off Canvas system sono raggiungibili in css/dev/blocks/_off-canvas.sass. per il CSS e in js/global/off-canvas.js per il JS.
<div data-off-canvas="off-canvas-right" class="button js--off-canvas-action">
Open Off Canvas Right <i class="iconae regular ae--row-right"></i>
</div>
<div id="off-canvas-right" class="off-canvas--right js--off-canvas">
<header class="off-canvas__header">
<h2 class="off-canvas__title">Off Canvas Title</h2>
<div class="off-canvas__close-btn js--close-popup">
<i class="iconae light ae--cross x2"></i>
</div>
</header>
<div class="off-canvas__body">
Lorem ipsum dolor sit amet...
</div>
</div>
<div class="js--off-canvas-overlay js--close-off-canvas"></div>
Off Canvas Title
Off Canvas Title
Accordions
Gli accordions sono elementi che aiutano ad organizzare i contenuti in singole tab. Framaework implementa alcune animazioni che migliorano la user experience dell'utente, evitando cambi repentini dei documenti che potrebbero disorientare la navigazione. Gli accoridons sono perfettamente compatibili con iconae.
È possibile modificare il CSS degli accordion in css/dev/blocks/_accordion.sass e il JS in js/dev/global/accordion.js.
<ul class="accordion js--accordion">
<li class="accordion__single js--accordion__single">
<div class="accordion__single-header js--accordion__single-header">
<i class="iconae regular ae--gear"></i> Titolo 1
<div class="accordion__single-header-ui">
<i class="iconae light ae--arrow-down"></i>
</div>
</div>
<div class="accordion__single-content js--accordion__single-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</li>
<li class="accordion__single js--accordion__single">
<div class="accordion__single-header js--accordion__single-header">
<i class="iconae regular ae--folder"></i> Titolo 2
<div class="accordion__single-header-ui">
<i class="iconae light ae--arrow-down"></i>
</div>
</div>
<div class="accordion__single-content js--accordion__single-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br> Illum maxime nulla optio, quae, magni culpa.
</div>
</li>
<li class="accordion__single js--accordion__single">
<div class="accordion__single-header js--accordion__single-header">
<i class="iconae regular ae--pencil"></i> Titolo 3
<div class="accordion__single-header-ui">
<i class="iconae light ae--arrow-down"></i>
</div>
</div>
<div class="accordion__single-content js--accordion__single-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</li>
</ul>
-
Titolo 1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum maxime nulla optio, quae, magni culpa libero distinctio incidunt facere enim commodi voluptatibus laudantium deleniti expedita dolor neque ad similique odit!
-
Titolo 2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum maxime nulla optio, quae, magni culpa libero distinctio incidunt facere enim commodi voluptatibus laudantium deleniti expedita dolor neque ad similique odit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos accusamus in ad nobis, officia obcaecati tempore corporis ex minima qui ipsum commodi possimus debitis quam est dolorem porro sequi voluptatem. -
Titolo 3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum maxime nulla optio, quae, magni culpa libero distinctio incidunt facere enim commodi voluptatibus laudantium deleniti expedita dolor neque ad similique odit!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos accusamus in ad nobis, officia obcaecati tempore corporis ex minima qui ipsum commodi possimus debitis quam est dolorem porro sequi voluptatem.
Tiny Pop-up
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, incidunt quae distinctio facere sint voluptas magnam est, fugiat, vel tempore velit. Quia, blanditiis pariatur rem, dolorem molestiae officiis officia aliquid!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, incidunt quae distinctio facere sint voluptas magnam est, fugiat, vel tempore velit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Close Pop-up!Small Pop-up
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, incidunt quae distinctio facere sint voluptas magnam est, fugiat, vel tempore velit. Quia, blanditiis pariatur rem, dolorem molestiae officiis officia aliquid!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, incidunt quae distinctio facere sint voluptas magnam est, fugiat, vel tempore velit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Close Pop-up!Standard Pop-up
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, incidunt quae distinctio facere sint voluptas magnam est, fugiat, vel tempore velit. Quia, blanditiis pariatur rem, dolorem molestiae officiis officia aliquid!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, incidunt quae distinctio facere sint voluptas magnam est, fugiat, vel tempore velit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Close Pop-up!Large Pop-up
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, incidunt quae distinctio facere sint voluptas magnam est, fugiat, vel tempore velit. Quia, blanditiis pariatur rem, dolorem molestiae officiis officia aliquid!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, incidunt quae distinctio facere sint voluptas magnam est, fugiat, vel tempore velit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Close Pop-up!Full Pop-up
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, incidunt quae distinctio facere sint voluptas magnam est, fugiat, vel tempore velit. Quia, blanditiis pariatur rem, dolorem molestiae officiis officia aliquid!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, incidunt quae distinctio facere sint voluptas magnam est, fugiat, vel tempore velit.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Close Pop-up!