Exemple de développement d'un template avec Sass

 
 

Éléments

Support de cours sur le développemnt SCSS/Sass.

 Voir le projet sur GitHub
Info : Si module Alpha rencontre un problème.
Info : Si module Beta rencontre un problème.

Eléments interactifs

Liste de liens classiques et ancres

Contôle de la disposition avec les classes “center”, “left" ou “right”


Liste de liens “bouton” avec ou sans “url”

Contôle de la disposition avec les classes “center”, "“left" ou “right”


Liens “tab” — disposition automatique

Lien bouton actif Lien bouton désactivé Lien bouton sélectionné  Tab avec icône

Boutons “button” en block et boutons "tab” en inline

Division avec bordure séparante

Titre de niveau 3 — De 0000 à 9999

  • Élément de liste
  • Autre élément de liste

Autre titre de niveau 3 — De 0000 à 9999

  • Élément de liste

Nouveau titre de niveau 3 beaucoup plus long — De 0000 à 9999

  • Aucune donnée trouvée

Aucun élément trouvé

Boites de projets

Titre du projet

Titre du projet

       
Long-titre de projet

Long-titre de projet

       
Long titre de projet étendu sur 3 lignes

Long titre de projet étendu sur 3 lignes

       

Boites spécifiques

Thématique

Intitulé caché mais screen-readable du lien

Titre de niveau 4

De 0000 à 9999

  • Nom de période
Intitulé caché mais screen-readable du lien

Autre titre de niveau 4

De 0000 à 9999

  • Nom de période
  • Autrepériode
Intitulé caché mais screen-readable du lien

Nouveau titre de niveau 4 beaucoup plus long

De 0000 à 9999

Aucune période trouvée


Badge

HTML 5

CSS 3

SASS

JavaScript

Node.js

NPM

MongoDB


Asynchrone

Boite de contenu en chargement

Cras ut felis luctus, finibus justo ut, suscipit massa. Mauris sollicitudin eu purus et tempus. Morbi euismod rutrum finibus. Praesent lacinia lacinia faucibus. Fusce dictum, enim nec malesuada viverra, magna magna accumsan tortor, id pretium mauris nunc vitae erat.

 

Boite de contenu chargé

Cras ut felis luctus, finibus justo ut, suscipit massa. Mauris sollicitudin eu purus et tempus. Morbi euismod rutrum finibus. Praesent lacinia lacinia faucibus. Fusce dictum, enim nec malesuada viverra, magna magna accumsan tortor, id pretium mauris nunc vitae erat.

Ensembles augmentés

Affichage des valeurs d'attributs data-*.

Moyen-Âge
Renaissance
Baroque
Classique
Romantique
Moderne
Contemporaine

Filtre

Pour le filtre n°1 et n°2

  • Élément

Pour le filtre n°1

  • Élément

Pour le filtre n°2 et n°4

  • Élément

Pour le filtre n°4

  • Élément

Animation


Chrono

00:00


Tâches

Ensembles structurés

Tableaux

Cellule d'en-tête

Label Alpha

Data Alpha

Label Beta

Data Beta

Label Gamma

Data Gamma

Résultats

Test pour le module “ScrollManager”

Destination pour l'ajustement du défillement automatique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor ligula orci, non elementum nisl scelerisque sed. Donec fermentum velit ac sapien posuere lobortis. Quisque posuere maximus purus, ultrices vestibulum enim pharetra quis.