1.5.1 — 7kb minified. Supporta IE8+ e tutti i moderni browser web. Progetto ospitato su GitHub. Creato da Ivan Ionut @ivan_ionut

Layout Fluido

Il layout fluido in percentuale è rapidamente diventato il metodo standard per la creazione di siti web responsive.

Mobile first

Nisaba è progettato per essere mobile first.

Responsive

Nisaba include quattro break-point configurabili. Potete configurarli o usarli così come sono!

Colonne Variabili

Usa quante colonne ti fa più comodo. Nisaba non ti costringe a usare un numero prestabilito di colonne.

Annidabile

Dividi e includi le colonne all'interno di altre colonne utilizzando altrettanti livelli di cui hai bisogno.

Spaziatura Fissa

Un presupposto importante di Nisaba è quello di avere la spaziatura fissa da conformarsi meglio con le regole tipografiche.

 

 

 

 

 

 

 

 

 

 

 

 

Markup


<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.

Configurazioni

  • @colonne
  • @spaziatura
  • @screenTablet
  • @screenDesktop
  • @screenDesktopHD

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

Colonne

  • .mb-x
  • .tb-x
  • .dt-x
  • .hd-x

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.

Offset

  • .offset-mb-x
  • .offset-tb-x
  • .offset-dt-x
  • .offset-hd-x

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.

Fix delle proporzioni

  • .fix-hd
  • .fix-landscape
  • .fix-square
  • .fix-portrait

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.

Ordinamento

  • .pull-mb-x
  • .push-mb-x
  • .pull-dt-x
  • .push-dt-x

Modifica l’ordine di visualizzazione delle colonne. Puoi giocare con l’ordine delle colonne per tutti i break-points.

Utils

  • .mb-margin-x-y
  • .mb-padding-x-y
  • .dt-margin-x-y
  • .dt-padding-x-y
  • .show-x
  • .hide-x

Classi per impostare margin e padding. Esempio: mb-margin-bottom-20, .dt-padding-top-50

  • .show-x
  • .hide-x

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)