Catégories
W3CSS W3CSS-exos

Utiliser des kits w3.css

Voici une série de lien pour exploiter le potentiel du framework W3.CSS en utilisant les ressources mises à votre disposition sur w3schools.com. Pour la prise en main du framework W3.CSS, voyez le cours Se familiariser avec le framework W3.CSS.

Suivre des tutoriels pas à pas

Le site w3schools.com propose des tutoriels pour construire des sites en utilisant le framework W3.CSS. En voici la liste.

Utiliser des templates à personnaliser

Des templates sont disponibles en ligne sur le site de w3schools.com. Vous les trouverez sur le page W3.CSS templates.

Le code source est disponible dans l’application Try-it. Il peut être copié et collé dans un éditeur de texte. Cependant, les liens vers les images des modèles seront rompus.

J’ai regroupé quelques templates en reconstituant les dossiers des sites en local. Utilisez ces modèles pour les personnaliser selon vos besoins;

Simplifier un template global

Vous trouverez sur le site w3schools un template intégrant un très grand nombre de fonctionnalités mises en œuvre grâce aux classes de W3.CSS. Ce template utilise un thème coloré monochromatique.

➜ Trois thèmes chromatiques sont proposées sur le site, sur la base du même template :

Ces thèmes sont disponibles en l’état à partir des gabarits (templates) téléchargeables plus haut.

➜ Pour obtenir les thèmes « black » et « red », modifiez la version du thème graphique appelée dans le head du gabarit presentation_fonctionnalites_w3procss. D’autres thèmes sont mis à votre disposition dans le dossier theme-color.

Supprimez les fonctionnalités dont vous n’avez pas besoin et diversifiez vos pages pour créer des sites pleinement fonctionnels.

Utiliser les thèmes chromatiques de w3.css

Il est très facile de modifier la couleur principale du template en changeant l’appel du thème coloré dans l’entête de la page (appel du thème via un link dans le header.

Présentation du thème Blue

La colonne de gauche de la page présentée ci-dessus liste l’ensemble des thèmes chromatiques proposés sur w3schools.com (il y en a plus de 20 !). Je vous propose de prévisualiser sur un même site toutes les options disponibles.