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

CSS


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:

È 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):


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.

.grid-container
.grid-container--small
.grid-container--large
.grid-container--responsive

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>
        
      
1
2
3
4
N.B: Per ottenere una visualizzazione sempre ottimale del contenuto, ogni elemento all'interno della classe .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

1
2
3
4

.row--half

1
2
3
4

.row--stuck

1
2
3
4

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:

I breakpoints:


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>
        
      
Lorem ipsum
dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum
dolor
sit amet
Lorem ipsum
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:

I breakpoints:


Vari esempi di allineamento:

Start:

          
  <div class="row columns-top columns-start"></div>
          
        
1
2
3

Center:

          
  <div class="row columns-top columns-center"></div>
          
        
1
2
3

End:

          
  <div class="row columns-top columns-end"></div>
          
        
1
2
3

Around:

          
  <div class="row columns-top columns-around"></div>
          
        
1
2
3

Between:

          
  <div class="row columns-top columns-between"></div>
          
        
1
2
3

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)
        
      
1
2
3
4
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>
        
      
Signup
Invalid email
Password must be at least 6 chars long

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>
        
      
HTML5 Special input

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>
        
      
Disabled messagge here.
Invalid messagge here.
Warning messagge here.
Success messagge here.

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:

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>
        
      
Open Tiny Pop-up
Open Small Pop-up
Open Standard Pop-up
Open Large Pop-up
Open Full Screen Pop-up

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:

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:

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>
        
      
Open Off Canvas Left

Off Canvas Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi deleniti ab laborum id earum, iste, possimus nobis libero architecto porro tenetur deserunt sequi aspernatur doloribus quidem itaque corporis repudiandae magnam!
Open Off Canvas Right

Off Canvas Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi deleniti ab laborum id earum, iste, possimus nobis libero architecto porro tenetur deserunt sequi aspernatur doloribus quidem itaque corporis repudiandae magnam!

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 1
    Lorem 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 2
    Lorem 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 3
    Lorem 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.