HTML5 framework: Skeleton

Skeleton è il giardino zen dei framework HTML5, pulito, leggero, senza javascript aggiunti, senza altri elementi che non siano quelli essenziali ad un pagina di base.
HTML5 framework: Skeleton

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “HTML5 frameworks an overview (part I): Skeleton” tradotto e parzialmente adattato da: Alfredo Cosco.

Intro

Questo articolo e i successivi comporranno uno sguardo generale sui framework HTML5. Con questo termine intenderemo, per convenzione, un insieme di pagine in HTML5, con un foglio di stile (CSS/CSS3) altamente strutturato e con ulteriori caratteristiche e migliorie aggiunte tramite javascript. Quindi, non solo HTML5 ma una serie di tecnologie sempre più strettamente integrate.

Un set di strumenti integrati
Comparando differenti soluzioni si possono individuare alcune caratteristiche di base più o meno diffuse nei framework più comuni:

  • Best practices come: una struttura human readable delle cartelle, un file robots.txt, un file humans.txt, una pagina 404, link inclusi via CDN, riscrittura degli URL, convention over configuration.
  • Prototipi dei più comuni elementi delle pagine web: struttura della pagina (testata, contenuti, piè di pagina), breadcrumbs, icone, bottoni, helpers per i form, carosello di immagini / gallerie /effetto lightbox, effetti di sliding, scrolling, collapsing e fading.
  • Un forte approccio ai cambiamenti della User Experience nel web: un layout responsive basato su griglie o DIV flottanti (vedi http://960.gs/), menù a scomparsa, ridimensionamento e ritaglio delle immagini, autocompletamento, uso di AJAX.

Skeleton

Il primo framework che prenderemo in considerazione è: Skeleton.
http://www.getskeleton.com

“Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.”

Skeleton è il giardino zen dei framework HTML5, pulito, leggero (40kb scompattato), senza javascript aggiunti, senza altri elementi che non siano quelli essenziali ad un pagina di base.

Ha un design responsivo e mobile-friendly, viene definito sulla home page Style Agnostic per sottolineare che il prodotto è un solido basamento su cui applicare gli stili che si preferiscono.
zen garden
La struttura grezza di Skeleton è composta da:

  • index.html: la pagina base con il markup necessario ad iniziare
    Pagina base di Skeleton
  • stylesheets/ (cartella)
    • base.css: stili di base
    • skeleton.css: la ‘gloriosa’ griglia di Skeleton
    • layout.css: un file senza stili particolari ma molte utili media-queries
  • images/ (cartella):
    • favicon.ico: Standard 16×16 favicon
    • apple-touch-icon (x3): icone per iPhone 3, iPad and iPhone 4.

Layout

Il framework è basato su una variante del 960 grid style system con 16 colonne, la larghezza massima della pagina è fissata a 748px, si può definire il numero di colonne usando i nomi delle classi CSS, sia usando valori assoluti che frazioni.

Ad esempio il codice per un layout a due colonne può essere:

<div class="container">
 <div class="sixteen columns">
  <h1>Mauris feugiat</h1>
  <h5>metus at condimentum tempor</h5>
  <hr>
 </div>
 <div class="one-third column">
  <h3>Lorem ipsum dolor</h3>
 </div>
 <div class="two-third column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit volutpat 
aliquam. Praesent et enim venenatis, gravida sem sit amet, mollis mauris. Proin euismod,
mauris sed sodales gravida, felis nisi scelerisque massa, vitae ornare mauris ante id nulla.
 </div>
</div><!-- container -->

Oppure:

<div class="container">
 <div class="four columns sidebar">
  <nav>
  Here the sidebar with the menu
  </nav>
 </div>
 <div class="twelve columns content">
Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vivamus bibendum aliqua est, at condimentum 
turpis. Pellentesque nec erat ornare, auctor urna et, laoreet diam. Nam scelerisque 
vel purus id posuere. 
 </div>
</div><!-- container -->

I CSS hanno un insieme di valori predefiniti per: una stabile tipografia, bottoni, classi per form. Sono preimpostate anche diverse media queries:

  • Smaller than 960: Più piccolo della griaglia standard di base
  • Tablet Portrait: Tra 768px e 959px
  • All Mobile Sizes: Meno di 767px
  • Just Mobile Landscape: Tra 480px e 767px
  • Just Mobile Portrait: Meno di 479px

Estensioni e guide

Si può integrare liberamente Skeleton in un proprio progetto perchè è distribuito con licenza libera MIT, esistono già alcune interessanti estensioni: Skeleton per WordPress, per Drupal e una Gem per Rails, possono aiutarci a provare questo wireframe e a usarlo come punto di partenza per i nostri progetti.

Inoltre due guide di buon livello si trovano agli indirizzi:

Videotutorial

Si trovano inoltre diverse videoguide:

Using Skeleton in 11 videos

Create a Responsive Homepage in 5 Minutes or Less with Skeleton

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github