Pubblicato il

css

skeleton

bootstrap

framework

framework alternativo a bootstrap css skeleton.css

Se siete come me, allora avete utilizzato Bootstrap per molti anni, e vi siete sicuramente ritrovati nella situazione di scaricare l’intero framework Bootstrap per poi andare ad utilizzare solamente alcune delle sue funzionalità. 

Io per esempio mi ritrovo spesso a fare uso solamente del layout a colonne (Grid) di Bootstrap, dato che permette la creazione veloce di layout responsive, senza dover pensare a dimensioni e divisioni dello spazio della pagina.
Scaricare l’intero framework però può comportare ad alcuni problemi, Il problema principale essendo quello del peso e dei tempi di caricamento dei file CSS. 

Fortunatamente, esistono altri framework più leggeri, che hanno funzionalità più specifiche rispetto a framework più grandi. Oggi andiamo a vedere uno dei miei framework CSS preferiti, ovvero Skeleton.css


Secondo la pagina ufficiale di skeleton.css, il framework andrebbe utilizzato da coloro che stanno lavorando su progetti di piccola taglia, dato che questo framework stilizza solamente alcuni elementi HTML e include un sistema Grid simile a quello di Bootstrap.
Uno dei vantaggi principali di Skeleton.css è infatti la sua dimensione di 11kb, che permette un caricamento dei file in maniera istantanea. 

Vediamo insieme come utilizzare gli elementi chiave del framework.

Scaricare e utilizzare il framework.


I file del framework possono essere scaricati dal sito ufficiale di Skeleton.css http://getskeleton.com/

Questo download scaricherà un file zip contenente alcuni file CSS, tra cui skeleton.css (Il file principale del framework) 
Andiamo quindi a piazzare questo file nel tag  <head>  della nostra pagina in questo modo:

<head>
    <title>Skeleton.css</title>
    <link rel="stylesheet" type="text/css" href="skeleton.css">
</head>


Adesso se carichiamo la pagina del sito in cui abbiamo linkato Skeleton.css, possiamo notare alcuni cambiamenti come: font utilizzati, i colori dei link e dei bottoni… etc.

Sulla pagina http://getskeleton.com/ sono presenti molti esempi sull’utilizzo dei Skeleton.css, andiamo a vedere insieme alcuni di questi: 

Come utilizzare la griglia per creare un layout responsive

Se venite dal mondo di bootstrap sarete a conoscenza del fatto che la pagina viene divisa in colonne e 12 unità verticali, dove ogni colonna può occupare uno spazio compreso tra 1 e 12 unità.

framework css leggero skeleton griglia grid layout

In Skeleton.css, il funzionamento è identico. L’unico cambiamento da notare è la sintassi di utilizzo. 
Immaginiamo di volere creare un layout del tipo: 

framework skeleton layout leggero

Possiamo vedere che il layout è composto da due righe, dove la prima colonna della seconda riga è divisa ulteriormente in due righe.
Vediamo quindi il codice HTML completo per creare questo layout:

<div class="container">
    <!-- prima riga -->
    <div class="row">
        <!-- tre colonne -->
        <div class="four columns superiore">1</div>
        <div class="four columns superiore">2</div>
        <div class="four columns superiore">3</div>
    </div>
    <!-- seconda riga -->
    <div class="row">
        <!-- tre colonne -->
        <div class="four columns">
            <!-- prima colonna divisa in due righe -->
            <div class="twelve columns superiore">4</div>
            <div class="twelve columns superiore">5</div>
        </div>
        <div class="four columns inferiore">6</div>
        <div class="four columns inferiore">7</div>
    </div>
</div>

CSS

.columns{
    text-align: center;
    color: #777;
    font-size: 20px;
    font-weight: bold;
    vertical-align: middle;
    line-height: 90px;
}
.superiore{
    background: #eee;
    margin-bottom: 20px;
    height: 90px;
}
.inferiore{
    background: #eee;
    margin-bottom: 20px;
    height: 200px;
    line-height: 200px;
}

Oltre ai layout possiamo cerare con Skeleton.css alcuni elementi comuni come: Tables , Forms, Lists, Media Queries, etc.

Potete vedere altri esempi sull’utilizzo di questo framework leggero sul sito ufficiale di Skeleton.css http://getskeleton.com/

Grazie per aver seguito questa guida su questa alternativa a Bootstrap chiamata Skeleton.css. Se volete darmi una mano potete condividere questa guida sui social o con i vostri amici. 

Grazie e alla prossima :)

Se hai una domanda puoi chiedere qualsiasi cosa nei commenti in basso

Grazie per aver letto questa guida su Devnews.it

Spero ti sia stata utile in qualche modo. Ti prego di supportare questa pagina mettendo mi piace alle nostre pagine social cliccando un basso, dove pubblichiamo regolermente notizie, tutorial e fatti curiosi sull'informatica. Grazie e ci vediamo alla prossima :)

Devnews

Devnews