Je vous propose l’analyse d’un outil fait maison que j’ai nommé « PumpSkin » ; soit un jeu de mots mélangeant « potiron » (bien de saison) et « peau » en anglais. Ici, c’est la partie « peau » dont l’analyse fera l’objet, puisqu’il s’agit d’un petit Framework CSS ou plutôt un d’Template html-css-js.
Avant-propos
Comme déjà expliqué à travers ce blog, vous pouvez faire appel à ce qu’on nomme des « Frameworks css » pour commencer à styliser votre site-web. Vous pouvez par exemple faire appel à Bootstrap ou Tailwind. Très influencé par ces derniers, j’ai voulu faire mon propre Framework, avec en prime tous les fichiers de base qui composent un site web avant l’injection de son contenu et de son style définitif. C’est l’objectif de ce nouveau projet nommé « PumpSkin » !
Un site web, c’est quoi ?
Pour comprendre la structure de PumpSkin, je ne peux m’empêcher de revenir sur des fondements essentiels à tout site web de base aussi simple soit-il. Dans les faits, vous pourriez réaliser un site web avec un fichier (php ou html par exemple). Bien sûr, par convention, mais surtout pour un souci de bonne organisation et au cas où quelqu’un devrait reprendre votre code, il serait très déconseillé de faire comme tel. Par convention, les développeurs organisent par dossiers, les différents fichiers construits dans leurs langages. Autrement dit, ils séparent le type de fichiers et les technologies qui s’y attachent. Les images dans un dossier images, le javascript dans un dossier javascript et les pages qui composent votre site à la racine de votre projet par exemple.
Il existe d’autres structures bien sûr comme l’architecture MVC que j’ai pu rencontrer plusieurs fois au travail, mais plus rarement. C’est d’ailleurs une méthode que je ne maîtrise pas, mais très intéressante et qui me parait plus adéquate pour des projets dynamiques ou plus importants.
PumpSkin
PumpSkin est un Template HTML-js-css, comme vous pouvez d’ailleurs en trouver sur le web. Une fois téléchargé, vous aurez donc une série de dossier et de fichiers bien organisés, qui afficheront une home page de base. À travers celle-ci, vous ferez le choix d’utiliser tel ou tel contenu proposé. Ces éléments sont des éléments que l’on retrouve assez souvent sur les pages que vous visitez sur la toile, avec par exemple ; un slider, un système d’onglets ou une google map préconfigurée. C’est au final l’ensemble des outils dont je vous ai fait part à travers ce blog et prêt à l’emploi.
Le style
En travaillant de plus en plus sur le projet, je me suis rendu compte que je m’éloignais quelque peu du but premier de PumpSkin, comparable à un Template html et moins à un Framework CSS. Sa force réside cependant et surtout dans les fichiers du dossier SCSS du site, qui une fois compilés, se transformeront en CSS et feront apparaître le style d’écriture, les espacements ou les couleurs de votre site. En deux mots : sa forme.
Le dossier SCSS est divisé en 2 parties : « PumpSkin » et « Theme« . Le dossier » PumpSkin » est le cœur du projet. Il possède 6 fichiers qui organisent différentes classes CSS qui une fois insérées sur votre élément HTML, appliqueront son style particulier. Les fichiers « base » & « text » sont très très inspirés du projet Tailwind. En revanche, le fichier « flex-boxes » pourrait je pense m’être très utile dans les projets à venir. Il me permet de positionner les éléments entre eux, et ce, en spécifiant une à 3 classes au sein de mon élément HTML. Le fichier color.scss gère les couleurs par défaut.
Enfin, le fichier « mixins » renferment une série de fonctions SCSS utilisées très souvent au cours de la construction du style des éléments. Vous y trouverez un générateur de bouton ou d’ombre portée. Le tout s’accompagne d’un fichier responsive qui gère les lignes de flottaison et comment les éléments doivent-ils réagir aux différentes tailles d’écran.
Votre propre thème.
Une fois étudié, vous pouvez commencer à coder votre propre thème. Et c’est là que le débat des Framework revient à la charge ; comment savoir où coder : directement dans l’html ou en réutilisant les classes de PumpSkin dans sa propre feuille de style en cascade ? J’ai prévu les 2. Vous pouvez par exemple changer toutes les couleurs et la fonte des textes du site en modifiant les fichiers textes et « colors » et « text » placé à la racine du dossier thème. Pour le reste, je proposerais de faire ainsi : construisez la structure et les couleurs de vos éléments dans votre page html. Pour des éléments spécifiques ou répétés, passez par le CSS. Exemple : vous savez que tous les titres de second niveau (H2) seront écrits en gras et en lettre capitale. Vous pouvez alors écrire ceci dans votre CSS, une fois que PumpSkin ait été importé :
h2 {
@extend .cap;
@extend .bold;
}Qui se compilera comme ceci :
h2 {
text-transform: capitalize;
font-weight: bold;
}Pour les espacements et les positions, je conseillerais de coder directement dans votre page.
L’exemple ci-dessous affichera 2 colonnes de même largeur et dont les éléments seront alignés au milieu sur leurs hauteurs. L’image prend la totalité de la largeur de la colonnes, le texte quant à lui bénéficiera de marges internes. Au-dessus de 1024px, le contenu sera « boxé » :
<div class="container container-lg row jc_bet ai_cen">
<div class="col--50 container_block">
<p class="color_dark">
Lorem Elsass ipsum dignissim vulputate aliquam wie DNA, eget id Strasbourg météor yeuh. munster leverwurscht ac geht's lacus barapli ch'ai réchime Racing. rossbolla flammekueche Pellentesque amet, hopla rhoncus
</p>
</div>
<div class="col--50">
<img class="w--100" src="images/image_01_600x400.jpg" alt="<?= $titre;?>" title="<?= $titre;?>"/>
</div>
</div>Les 5 piliers d’un site web
Je reviens sur les 5 piliers d’un site web que j’avais décrit dans mon article précédent, à savoir : le contenu, le style, le dev, l’accessibilité et la sécurité. Dans notre cas, il n’y aura pas beaucoup de dev, puisque dédié à du contenu plutôt statique dans un premier temps. Il n’empêche que j’aie prévu le cas où ce dernier devra faire un peu plus que d’afficher du texte et des images en vous indiquant dans un fichier texte les lignes de commandes pour installer Stripe et PHP Mailer avec composer. En regardant sa structure, le dossier « vendor » et « data » seront dédiés à du contenu dynamique. Pour le reste, PumpSkin suit une logique on ne peut plus simple comme expliqué ci-dessus. Vous pouvez retrouver la description de la structure de PumpSkin ici.
Après avoir attaqué le cœur de PumpSkin…
Il nous reste l’accessibilité et la sécurité avant d’attaquer le style. Pour l’accessibilité, vous vous doutez bien que le projet de base répond aux différentes tailles d’écrans, à la compatibilité des navigateurs ou à la performance. Côté SEO, les 4 fichiers habituels font le travail pour débuter un référencement naturel et gratuit. À savoir : la présence du fichier robots.txt, sitemap.xml et le fichier .htaccess qui gère la réécriture d’URLS sous les serveurs Apache. J’ai ajouté également un fichier émanant de google search console qui peut valider la propriété de votre site et commencer son indexation au sein du célèbre moteur de recherche. Bien sûr, il faudra créer le votre. Il s’agit surtout d’un pense-bête.
Au niveau de sa sécurité, le fichier .htaccess est configuré de sorte à freiner plus d’un attaquant à votre projet. Mais il est évident qu’il vous faudra ajouter un certificat SSL, un pare-feu et un antispam via votre plateforme d’hébergement par exemple.
Et pour conclure
Comme chacun de mes projets, celui-là aussi fera l’objet de mise à jour et de futures améliorations. Il s’agit en réalité d’un réceptacle d’une grosse partie de mes connaissances et je pense sincèrement que j’utiliserai PumpSkin pour débuter un nouveau site-web, à l’instar de « Virgin » que j’ai créé pour WordPress. Au niveau de ses lacunes, je pourrai par exemple ajouter un cookies pour mémoriser le fait que votre visiteur ait bien accepté ces derniers. Je pourrais également améliorer le traitement du formulaire en javascript. Autre problème ; après coup je me suis rendu compte que le nom de mes classes étaient identiques à celles utilisées par Tailwind, ce qui peut poser problème si on installe les deux. En revanche, je suis assez fier du fichier flex-boxes, qui me permet de positionner les éléments.
Vous trouverez PumpSkin à cette adresse : https://pumpskin.lintermediaire.be
N’oublions pas les dépendances et les outils utilisés et qui ne sont pas de moi :
- Beer-Slider
- Reset css
- Slick Slider
- YouTubeplayer
- fonteawesome
- pixabay
- lorem ipusm
- jQuery
- Google Map
- Google Search Console
- Google analitycs
- Stripe
- Php mailer
Prochaine étape : mettre tout ça sur Github !
A bientôt
