Mises en page CSS

Ce dossier contient des exemples de mise en page CSS.

Pour chaque exemple, le code (CSS et JavaScript) est contenu directement dans le fichier HTML principal.

Voici quelques éléments communs que tous les projets utilisent:

• CSS / normalize.min.css : Normalize est un reset CSS qui corrige certains comportements par défaut de navigateurs.
• CSS / main.css : Contient quelques éléments de base que nous utilisons partout. Applique le fonctionnement box sizing: border-box à tous les éléments (voir documentation).
• JS / prefixfree.min.js : Cet outil, créé par Lea Verou, ajoute les préfixes navigateurs à notre CSS lorsque c’est nécessaire. Cela nous permet d’écrire un CSS plus sobre, sans préfixes redondants.

Voici les exemples de mise en page proposés:

carousel.html

Une mise en page comprenant plusieurs sections, qui deviennent visibles au fur et a mesure de l’avancement. La navigation utilise le JavaScript.

• Voir l’exemple
• Notes explicatives

carousel-vertical.html

Variation sur la mise en page précédente, avec navigation verticale.

• Voir l’exemple

batonturbo.html

Exemple de chargement de webfont.

• Page d’exemple
• Notes explicatives

gradient-corners.html

Un effet de coin transparent, obtenu avec un dégradé CSS.

• Page d’exemple
• Article de Lea Verou sur cette technique
• Documentation couleurs et dégradés

grille.html

Un exemple utilisant le “CSS Grid Layout”.

• Page d’exemple
• Un article explicatif (par Raphaël Goetter)

grid1.html

Encore un exemple de “CSS Grid Layout”.

• Page d’exemple

---

Licence

Le code est mis à disposition sans restrictions de licence et peut être utilisé librement (The Unlicense).