Skeleton

Table des matières

1      Principe

2      Initialisation et première main sur  SKELETON

  1. Inialisation
  2. Première main sur SKELETON

Glossaire

Sitographie

  • Principe

Skeleton c’est quoi ? Skeleton est un framwork permettant la création de site web rapidement. Il imbrique des composants web, facilitant le développement, en étant simple et léger, mais aussi un design responsive*. Il peut se comparer avec les autres grands frameworks de création de sites web, c’est à dire, Foundation et Bootstrap.

Faisons un petit topo de ces deux concurrents.

Foundation : Foundation est un framework web riche en stylisation de composants. En effet, il propose en premier lieu le modèle SASS (ou Syntactically Awesome Stylesheets), qui permet de générer des feuilles de style.

Bootstrap : La simplicité de Bootstrap en fait le meilleur framework responsive en termes de design. La personnalisation de chaque entité, ou de template, fait qu’il est le meilleur dans son domaine. Il est intéressant de noter qu’en ce qui concerne sa rapidité d’exécution, Bootstrap est largement devant Foundation et en devient le premier choix pour les développeurs web.

Pour revenir sur Skeleton, ce framework est conseillé dans la construction de projet Web de petite envergure avec un design simple, de préférence en One Page.

Il est intéressant de noter que Skeleton est supporté par toutes les dernières versions des navigateurs.

Passons maintenant à l’initialisation et à notre première main sur Skeleton.

  • Initialisation et première main sur Skeleton

  1. Initialisation et pré-requis

Afin d’avoir un bon aperçu et de bien comprendre Skeleton, il faut avant tout avoir des bases dans les « langages » HTML et CSS.

La récupération de Skeleton peut se faire de plusieurs façons…

  1. Téléchargement du zip

La première correspond simplement à récupérer le zip sur le site de Skeleton même en allant sur le lien suivant :

http://getskeleton.com/

 

En cliquant sur le bouton « Download », le zip se téléchargera automatiquement. Il vous suffira ensuite de le décompresser à la racine de votre dossier projet.

Il apparaîtra alors :

Composé donc d’une arborescence basique, avec une page d’accueil en one page, ainsi qu’un dossier contenant un favicon et un dossier css, disposant un fichier de style généré par défaut pour l’index.html.

Le code de la page reste assez simple

<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 25%">
<h4>Basic Page</h4>
<p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton documentation</a>.</p>
</div>
</div>
</div>

2. Récupération par GIT

Pour cela, il suffira simplement de créer un répertoire dans le dossier de votre choix, et d’y faire un clone du projet

git clone https://github.com/dhg/Skeleton.git

3. Ajouter directement un lien CDN

Une autre façon d’ajouter Skeleton à votre projet de rajouter un lien CSS CDN dans votre code, tel que

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.css">

B. Première main sur Skeleton

Skeleton se voit utiliser plusieurs composants HTML.
Premièrement, une classe css nommée Container permet de réaliser un wrapper*, centrant au milieu de la page tout votre code à l’intérieur.

Faisons une brève liste de ce qui est mis à disposition.
Skeleton est composé des éléments basiques que l’on peut retrouver dans HTML.

• Les grids
Elles permettent de structurer la page selon la largeur totale de la page même.
La grid part d’une largeur de 12, et ensuite nous pouvons la découper en partie distincte, inspiré de Bootstrap même.
Exemple :

 

Two

 

Ten

 

 

On voit donc qu’une ligne de la grille (grid) est ainsi noté dans une classe css « row ».
Les classes utilisées pour séparer les différentes colonnes sont assez explicites puisqu’il suffit juste de spécifier le nombre et de récupérer la classe « columns » afin de préciser à Skeleton que l’on souhaite des colonnes.
• Les lists
• Les boutons
Il est possible avec Skeleton de réaliser des boutons avec une balise hyperlien. Il suffit alors de rajouter une classe CSS nommée « button » tel que ci-dessous

Bouton hyperlien

Le bouton que nous aurons créé ici permettant d’avoir un lien d’ancrage sur un point de votre site.
• Les formulaires
• Les tables
• Les media queries (pour bien rester responsive)

Les media queries permettent quant à elle de réaliser un design responsive pour les différents périphériques disponibles. Par exemple, nous pouvons avoir une apparence pour les smartphones mais différents pour une tablette ou encore un pc.
Voici un exemple pour un Media Query de smartphone

@media (min-width: 400px) {}

Il faut utiliser le prédicat @media, préciser la taille minimum en pixel.

Les développeurs de ce framework ont ajouté la balise permettant d’avoir un aperçu dans un bloc de description.

Après avoir vu un aperçu des quelques composants de Skeleon, réalisons maintenant notre premier projet avec ce framework…
Nous allons donc créer un mini portfolio, avec un formulaire de contact, mais attention, seulement le côté design de la page.

C. TP : Mini portfolio

Pour ce TP, nous allons donc faire un mini portfolio, vraiment très simpliste, pour que l’on puisse s’essayer aux composants de Skeleton.

En ce qui concerne le design, voici une impression écran de ce que nous allons réaliser…

Voici donc un squelette d’un portfolio.

Au niveau code, nous allons voir qu’un One Page suffira et que cela se fait très facilement.
Nous allons utiliser le fichier qui a été récupéré dans le zip que vous avez téléchargé ou cloné depuis Github.

Il s’agira ensuite de créer un fichier « app.css » dans le dossier prévu à cet effet et de le rajouter tel que ceci, après l’import de squelette.css.

Le site sera contenu dans une balise div, avec une classe « container » comme vu précédemment, tel que :

La barre de navigation qui se situera au-dessus de cette div principale sera de la forme :

 

On peut s’apercevoir que la div pour la barre de navigation dispose de deux classes « band » et « navigation ». Les voici :

/*navigation*/
nav.primary ul,
nav.primary ul li {
  margin: 0px;
}

.band {
  background: #f8f8f8;
  padding: 0 0 14px 0;  
}

.band.navigation {
  Background : left top repeat-x,
        #343434;  
  padding: 0;
  color: #e0e0e0; 
}

*

Il s’agit simplement de la modification d’une liste pour que le menu soit à l’horizontal, avec un fond noir.
La suite…

nav.primary ul li {
  display: inline;
  float: right;
  position: relative;
}

nav.primary ul li a {
  display: inline-block;
  line-height: 49px;
  padding:  0 14px;
  color: #ebebeb;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 0.08em;
}

1. Les photos

Pour avoir les images alignées comme vu, il suffit de :

 

Mes photos

 

 

 

 

 

 

 

On crée une div avec une classe « row », et à l’intérieur, on ajoute 3 div avec la séparation de la ligne (row) pour que cela fasse 12. Soit, 3 fois 4.
Pour la démonstration, j’ai utilisé le site loremflickr qui permet de générer des images aléatoires pour les tests.

2. Le formulaire de contact

 

Contact

 

 

 

 

 

 

 

 


Création de photo
Questions

 

 

 

 

De même, un formulaire classique, qui ressemble au template Bootstrap. On peut tout de même constater la classe « u-full-width » qui permet au composant qui le porte de prendre toute la largeur de son conteneur.
4. Le footer
Enfin, le footer, que l’on peut personnaliser à sa guise…

 

 

Copyright © Valentin LEON 2018

 

 

 

En résumé, on peut dire que Skeleton permet d’avoir une structuration de site bien ancré dans sa page web, puisqu’il fait en sorte de centrer les conteneurs afin d’avoir une présentation simple et sobre.

Glossaire

Framework : Ensemble de composants logiciels permettant le développement plus rapidement et structurel d’un projet.

Responsive : Est un principe qui permet d’avoir un site web qui s’adapte à chaque composant et/ou périphérique.

Sitographie

https://github.com/dhg/Skeleton

http://getskeleton.com/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *