Layout Fluido
Il layout fluido in percentuale è rapidamente diventato il metodo standard per la creazione di siti web responsive.
Nisaba è una griglia CSS responsive e mobile first.
Standalone, leggera & scritta in LESS.
1.5.1 — 7kb minified. Supporta IE8+ e tutti i moderni browser web. Progetto ospitato su GitHub. Creato da Ivan Ionut @ivan_ionut
Il layout fluido in percentuale è rapidamente diventato il metodo standard per la creazione di siti web responsive.
Nisaba è progettato per essere mobile first.
Nisaba include quattro break-point configurabili. Potete configurarli o usarli così come sono!
Usa quante colonne ti fa più comodo. Nisaba non ti costringe a usare un numero prestabilito di colonne.
Dividi e includi le colonne all'interno di altre colonne utilizzando altrettanti livelli di cui hai bisogno.
Un presupposto importante di Nisaba è quello di avere la spaziatura fissa da conformarsi meglio con le regole tipografiche.
<div class="row">
<article class="mb-8 dt-4 offset-dt-0">
<div class="row">
<div class="mb-6">
…
</div>
<div class="mb-6">
…
</div>
</div>
</article>
<aside class="mb-6 dt-8">
…
</aside>
</div>
Ciascun set di colonne deve essere annidato dentro .row e può contenere un qualsiasi numero di colonne. Le colonne usano il box model border-box per una maggiore comodità. Ciò si traduce in meno codice da scrivere.
Ricordati di inserire un blocco .row nelle colonne annidate.
Hai cinque opzioni per personalizzare la griglia alle tue esigenze: numero di colonne (@colonne), larghezza massima del container (@screenTablet @screenDesktop @screenDesktopHD) e la dimensione della spaziatura (@spaziatura).
Le variabili @sceen servono per definire i break-points responsive.
Puoi usare un qualsiasi numero di colonne impostando la variabile @colonne
Nisaba usa quattro classi per costruire la griglia: Mobile .mb-x, tablet .tb-x, desktop .dt-x e .hd-x per schermi più grandi.
Dal momento che Nisaba è “mobile first”, le colonne sono definite per break-point mobile e vengono ereditate dai break-point superiori. Per ogni colonna possono essere definiti break-points multipli.
Un insieme di classi per “spingere” (offset: .offset-mb-x, .offset-tb-x, .offset-dt-x, .offset-hd-x) una colonna utilizzando il margine sinistro. Questo è utile da usare al posto delle colonne vuote. Hai a disposizione anche la classe .offset-0 per nessun offset.
Puoi fissare l’altezza di una colonna ad una specifica proporzione. Per fare questo devi inserire il contenuto della colonna dentro ad un elemento con classe .col-content. Questo è utile per avere una griglia con la stessa altezza.
Modifica l’ordine di visualizzazione delle colonne. Puoi giocare con l’ordine delle colonne per tutti i break-points.
Classi per impostare margin e padding. Esempio: mb-margin-bottom-20, .dt-padding-top-50
Classi per mostrare (.show-mb, .show-tb, .show-dt, .show-hd,) e nascondere (.hide-mb, .hide-tb, .hide-dt, .hide-hd) elementi nella pagina. Trovi anche tre classi generali: .show (display: block), .hidden (display: none) e .invisible (visibility: hidden)