GRETA de Clermont-Ferrand • Lycée La Fayette • Pôle Plurimédia
Formation : Utiliser le framework W3.CSS
Mise à jour : 2 juillet 2019
Source (en anglais) : https://responsivedesign.is/resources/frameworks/
Les frameworks sont conçus pour vous permettre de démarrer rapidement et facilement. Examinons de plus près ce qu'est un framework réactif ou “responsive”. La définition du terme “framework” est large :
En ce qui concerne le développement des sites Web, les frameworks responsives ne sont pas autre chose que ce qui vient d'être défini. Ils fournissent une structure et des outils prédéfinis pour vous permettre de vous concentrer sur la mise en page et le contenu du site plutôt que sur les CSS et le HTML (même si les CSS et le HTML sont également très importants).
Photo : unsplash.com - par Samuel Zeller
W3.CSS est mentionné dans la liste des frameworks CSS sur le site cssframeworks.org
Voici une traduction de sa fiche de présentation :
W3.CSS est un framework CSS moderne autorisant un design adaptatif pour l'affichage sur mobile. Plus petit et plus rapide que les autres frameworks CSS, il est plus facile à apprendre et plus facile à utiliser que d'autres frameworks CSS. W3.CSS utilise uniquement les CSS standard (pas de bibliothèque jQuery ou JavaScript).
W3.CSS accélère et simplifie le développement Web. Ce framework prend en charge le responsive design moderne (mobile first) par défaut et fournit une égalité CSS pour tous les navigateurs : Chrome, Firefox, IE, Safari, etc. Il fournit un rendu CSS identique pour tous les périphériques de consultation : PC, ordinateur portable, tablette ou mobile.
W3.CSS est donc une feuille de style pré-codée dans laquelle sont définies les valeurs de nombreuses propriétés CSS liées à de très nombreuses classes.
La plupart des sites mentionnés plus bas ont été réalisés en utilisant un gabarit (template) HTML-CSS proposé par w3shools.com.
La qualité du design des sites présentés, leur ergonomie ou la qualité de leur structure rédactionnelle dépend du niveau d'expérience des concepteurs. Dans l'ensemble, les gabarits (templates) utilisés sont très partiellement personnalisés. La grande majorité des sites est cependant fonctionnelle.
On notera l'importance des points suivants :
Pour lire le site w3schools.com en français, cliquer sur le terme “français” dans la liste des langues affichée quand on clique sur la petite planète placée dans la barre de menu, à côté de la loupe du champ de recherche.
https://www.w3schools.com/about/default.asp
Sur l'ensemble du site se trouvent des informations illustrées par des exemples à personnaliser directement en ligne. Pour accéder à l'éditeur de code intégré au site : cliquer sur les boutons “Try it yourself” (“Essayez-vous-même”, en français).
La page des exemples permet de découvrir des éléments HTML simples, stylisés avec W3.CSS. Chaque exemple peut être personnalisé (penser à cliquer sur le bouton “Run” pour visualiser les modifications apportées).
https://www.w3schools.com/w3css/w3css_examples.asp
Les démos sont une série de pages Web simples, stylisées avec W3.CSS. Le code de ces pages peut être utilisé pour élaborer des pages similaires ou compléter des pages existantes utilisant déja les classes du framework W3.CSS.
https://www.w3schools.com/w3css/w3css_demo.asp
Pour élaborer des documents plus complexes, une page de gabarits (modèles ou “templates”) propose des structures de site complètes, mono ou multipages.
https://www.w3schools.com/w3css/w3css_templates.asp
Pour mettre en œuvre rapidement l'un des gabarits proposés par le site, utilisez les modèles mis à votre disposition dans le cadre de la formation. Ils ont été structurés de manière à ce que vous localisiez très facilement les dépendances et les composants de chaque template dans le dossier correspondant.
La page des tutoriels permet d'apprendre comment construire les composants HTML et CSS utilisables dans un site Web stylisé par W3.CSS. Cette page est aussi un inventaire élargi d'exemples.
https://www.w3schools.com/howto/default.asp
Il est ainsi possible, en suivant pas à pas les instructions données, de construire un site “from scratch” :
Effectuer les exercices détaillés dans le document fourni intitulé “formation-W3CSS”.
Seule une mise en pratique très concrète du framework W3.CSS permet d'en appréhender l'intérêt pour réaliser des sites simples et fonctionnels.
