créer un thème - étape styles 02
Dans le précédent article nous avons vu comment lié une feuille de style aux fichiers du thème.
Pour accéder à un fichier du thème la fonction <?php $plxShow->template() ?> donne le chemin vers le thème actif. Cette fonction vous sera utile pour intégrer à votre thème les ressources CSS, JavaScript, images, etc. qu'il contient.
Pour des mise en page simple et peu de fonctionnalités, l'usage d'une seule feuille de style peut sembler suffisant. Ce n'est plus le cas si vous souhaitez par exemples utiliser une famille d'icône, un framework CSS, un fichier reset , etc.
L'avantage d'utiliser des ressources gratuites (ou payantes) est que celles-ci seront généralement maintenues par leurs auteurs respectifs et que des tutoriels et exemples sont souvent fournis sur les sites officiels des ressources. Un autre aspect est que d'autres utilisateurs pourront aux travers de tutoriels et de forums vous aider à utiliser ces ressources ou à choisir entre des ressources similaires ou des version différentes.
Quelques frameworks
Ces frameworks sont souvent utilisés à distance, cela facilite leurs usages mais à la particularité de pisté vos visiteurs qui vont devoir se connecter sur un serveur distant du votre pour charger ces ressources.
Cet aspect est a prendre en compte dans la gestion et collecte des données individuelles.
Vous pouvez utilisé un gestionnaire pour informer et donner au visiteur le choix de charger ou non ces ressources externes, ou copier l'ensemble de ces ressources distantes dans votre thème pour éviter que vos visiteurs soit "traquer" à distance.
Les icônes
Certaines seront issues d'un framework général et d'autres d'un framework spécialisé, voir d'une police.
Pour les icônes, il y a du choix et leurs intégrations est assez similaire d'un framework à un autre et sont généralement injecté dans une balise <i> La différence réside dans le style et le nombre d'icônes disponibles et leurs possibilités d'usages, comme à l'aide d'un pseudo-element.
Listons quelques unes d'entre elles
| Frameworks proposant des icônes | ||
|---|---|---|
| nom | En ligne | Télechargement |
| Materializecss | <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
font-family materalizecss |
| FontAwesome | CDN choix des versions :CDN par version | doc installation |
| Icône Bootstrap | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"> |
Sur GitHub |
| Icône Ionicons | <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> |
Sur GitHub |
| Icône Lineicons | <link href="https://cdn.lineicons.com/5.0/lineicons.css" rel="stylesheet" /> |
Sur le site, version gratuite: lineicons5-free-pakage.zip |
| Icône Boxicons | <link href='https://cdn.boxicons.com/fonts/basic/boxicons.min.css' rel='stylesheet'> |
Sur Github |
Cette liste n'est qu'un aperçu de la multitude de collections d'icônes disponibles sur le web.
Frameworks CSS
Là, nous avons encore du choix des plus simple et léger aux plus complets et complexe
Le choix va dépendre de: votre connaissance des uns et des autres, de la complexité, de votre environnement de développement, du temps d'apprentissage, de leur légèreté et simplicité ou du nombre d'utilisateurs. Bref, il n'y pas de meilleurs. Tous auront des limites ou des rigidités dans leurs usages.
| Frameworks CSS | ||
|---|---|---|
| nom | En ligne | Télechargement |
| Bootstrap | <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet"> |
bootstrap-5.3.6-dist.zip |
| Fondation | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.9.0/dist/css/foundation.min.css" crossorigin="anonymous"> |
Foundation-Sites-CSS.zip |
| Bulma | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css"> |
bulma-1.0.4.zip |
| UIkit | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.22.1/css/uikit-core.css" crossorigin="anonymous"> |
uikit-3.23.7.zip |
| Pure.CSS | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" crossorigin="anonymous"> |
Sur Github |
| Skeleton | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rossorigin="anonymous" referrerpolicy="no-referrer" /> |
Skeleton-2.0.4.zip |
Là encore la liste est trés incompléte.
Certains de ces frameworks CSS sont aussi accompagnés de script pour ajouté des fonctionnalités et animations à vos pages.
Avantages ?
L'avantage des frameworks les plus utilisés sont leurs bonnes stabilité et la multitude d'utilisateurs et ressources disponibles. De nombreux tutoriels et exemples de composant sont généralement disponibles et trouver de l'aide sur un forum est relativement rapide.
Inconvénients ?
Certains frameworks peuvent semblé rigides dans leurs possibilités et design de mise en page.Il est bien sur toujours possible de créer vos propre styles.
D'autres peuvent être compliqués pour les débutants car ils nécessitent une installation préalable, ou sont clairement orientés pour un usage dans un environnement utilisant react ou vite.js par exemples.
Et le reset ?
Si vous n'utilisez pas de framework, il existe plusieurs exemples et methodes de normalisation des styles de bases que vous pouvez mettre en place avant de créer votre feuille de styles.
L'une des dernieres methode est The new reset - le fichier reset.css. Et l'un des plus ancien peut être vue chez Eric Meyer.
Si vous êtes curieux , voici un article intéressant sur le site d'Alsacréations: Le Reset CSS, une histoire d'héritage et de réinitialisation
Vous pouvez aussi regarder comment sont construite les feuilles de styles d'un site ou framework, par exemple feuille de pure.css où les 360 premieres lignes concernent le reset noter les commentaires dans la feuille de style
Ajouter de nouvelles feuilles de styles
Dans le fichier header.php, nous avons de une à deux feuilles de styles qui se chargent à l'ouverture d'une page.
C'est dans ce fichier et dans la balise <head> que les feuilles de styles sont appelées. L'ordre dans lequel elles sont chargées a son importance
Pour un thème avec une seule feuille de style, nous avons vu que la fonction <?php $plxShow->pluginsCss(); ?> peut potentiellement chargé une seconde feuille de style pour un ou plusieurs plugins.
Cette seconde feuille de style est à charger en dernier.
Exemple de base:
<link rel="stylesheet" href="<?php $plxShow->template() ?>/css/styles.css" media="all">
<?php $plxShow->pluginsCss(); ?>plusieurs liaisons
Avec la balise link, nous avons vu que nous pouvions ajouter une feuille de styles stocké dans le thème ou depuis un site distant. Il n'y a pas vraiment de limite aux nombres de feuilles de styles chargées.
Comment organiser tout ça
Lorsqu'il y a plusieurs feuilles de styles , il faut les triées par usages et spécificités. Les premières à chargées seront celles qui normalisent et les dernières celles qui apportent des ajouts spécifiques, comme celle des plugins ou des icônes par exemple.
Le sens dans lequel vos feuille sont chargée les styles est un peu comme créer des fondations couche par couche, les premières seront donc la base et les dernieres seront les finitions.
Exemple de couches
- un reset (normalisation) Les framework CSS ont généralement un reset
- chargement de polices
- un framework (Boostrap, tailwind, etc)
- CSS spécifique de votre thème
- un framework pour les icône
- feuilles de styles des plugins
On peut donc par exemple si l'on veut utiliser Bootstrap et ses icônes en ligne et une feuille de styles personnalisé depuis le thème avoir:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="<?php $plxShow->template() ?>/css/mesStyles.css" media="all">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<?php $plxShow->pluginsCss(); ?>La feuille mesStyles.css est mise aprés celle du framework de façon à ce qu'elle le compléte sans être ecraser,
les couches suivantes concerneront les icônes et les plugins.
Pour un thème au CSS maison et auto-hebergé, on peut avoir quelque chose comme:
<link rel="stylesheet" href="<?php $plxShow->template() ?>/css/monReset.css" media="all">
<link rel="stylesheet" href="<?php $plxShow->template() ?>/css/mesStyles.css" media="all">
<link rel="stylesheet" href="<?php $plxShow->template() ?>/css/print.css" media="print">
<?php $plxShow->pluginsCss(); ?> Noter la feuille de styles print.css et l'attribut media="print".
La valeur print fait que cette feuille de style ne sera chargé que lorsque le document est imprimé.
Vous pouvez alors cacher tout les éléments inutile comme les éléments de navigation et pied de page.
À l’opposée, l'attribut media="screen" ne chargera la feuille de syle que pour les écrans.
l'attribut media.
Vue d'ensemble
| Articles de la série: "créer un thème" |
articles connexes | Ressources externes |
|---|---|---|
| étape fichiers 01 | MAJ d'un vieux thème | |
| étape fichiers 02 | ||
| étape fichiers 03 | thème multilingue | |
| étape fichiers 04 | affichage des commentaires. | |
| étape fichiers 05 | le fil d'Ariane | |
| étape fichiers 06 | ||
| archive ZIP du thème construit dans ce tutoriel themedututo.zip. | ||
| étape CSS 01 | meta "viewport" | |
| étape CSS 02 | la balise "link" | |
| étape CSS 03 | Outils de verification du W3C. | |