Est-ce que toi aussi tu t’étais déjà dit que le CSS c’était chiant ?
C’est vrai, ce n’est pas de la programmation, on perd du temps à tout bien positionner, le bouton n’est jamais bien aligné avec le reste. Bref on passe souvent des heures à faire du CSS pour avoir quelques choses d’à peu près joli.
Je t’avoue qu’à mes débuts j’apprécié faire du CSS, essayer de faire de belles choses, des petites animations sympas et tout. C’est cool quand tu es sur un petit projet sur lequel tu veux essayer de nouvelles choses.
Mais je me suis lassé, ce n’est plus ma tasse de thé.
Pourquoi ?
Parce que ça prend du temps à mettre en place, c’est toujours compliqué à avoir un joli design surtout quand tu as très peu de talent visuel (comme moi) et c’est aussi que ce n’est pas ce qui me passionne dans le développement.
En effet, le CSS n’est pas un langage de programmation, c’est un langage qui permet simplement de rendre joli tes pages. De plus, ce n’est pas là le cœur du métier de développeur. Ainsi beaucoup de développeurs n’aiment pas passer du temps à faire le CSS de leur site.
Avec un peu de chance, tu peux te retrouver dans des équipes dans lesquelles certaines personnes se chargeront de tous l’aspect graphique du site web. Mais lorsque tu es tout seul dans ton projet, il faudra malheureusement que tu t’en charge tout seul.
Du coup, quelles sont les solutions s’offrent à toi quand tu as un peu la flemme ?
La solution miracle : le framework CSS !
Tout d’abord, il faut prendre en compte que la majorité des gens viendront sur ton site avec leurs téléphones. Aujourd’hui la plupart des utilisateurs arrivent sur un site web depuis leur téléphone. Il faut donc prendre en compte ce facteur et forcément faire un design responsive. C’est à dire qui va s’adapter sur mobile.
Ensuite, il faut que l’on trouve une solution dans laquelle on n’a pas presque rien à faire pour que le CSS rende bien sur notre site web.
La solution : un framework CSS.
Les framework CSS, tout comme les frameworks des autres langages, mettent à disposition des outils. Dans le cas des frameworks CSS, on retrouve des feuilles de style prêtes à l’emploi ainsi que des composants que l’on peut directement intégrer dans nos pages (bouton, formulaire, modal, …). Et cerise sur le gâteau, ils sont tous déjà tous responsive.
En gros tu n’as plus qu’à en trouver un qui te plait un sur internet, le télécharger, l’intégrer dans ton site web et utiliser simplement les classes définis. C’est tout ! Tu as un site tout beau sans toucher au CSS.
Comment ça marche ?
Les frameworks CSS reposent généralement sur un système de grille. C’est-à-dire qu’ils découpent l’écran sous forme de grille. Il n’y a plus qu’à positionner les éléments dans cette grille pour avoir un design sympa.
L’avantage d’utiliser le principe de grille avec un framework c’est que l’on peut lui spécifier le comportement à avoir sur des tailles d’écran différent (ordinateur, tablet, mobile)
Parmi les framework CSS les plus utilisés, on retrouve :
- Bootstrap
- Foundation
- Semantic UI
- Materialize
- Skeleton
- Pure
Dans ma majorité de mes projets j’utilise le framework Bootstrap. Là aussi le choix, s’est fait par affinité. Tu peux tester différents frameworks et te lancer avec celui qui te correspond le plus. L’avantage avec Bootstrap c’est que c’est l’un des plus connus et des plus utilisés. Beaucoup de projets reposent sur ce framework et il est assez facile de trouver des informations lorsque l’on est bloqué.
Quels avantages à utiliser un framework CSS ?
Ne pas faire de CSS
Le premier avantage, tu l’auras compris c’est de ne pas avoir à mettre les mains dans le CSS. Tu as juste à utiliser les classes fournis par le framework pour positionner les différents blocs de ton code et les styliser.
Je te montre un exemple qui prend environ 2 minutes à mettre en place.
En utilisant simplement quelques classes (container, row, col). Tu peux déjà obtenir un système de 3 colonnes responsives.
<div class="container"> <div class="row"> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> <div class="col-sm"> One of three columns </div> </div> </div>
Tu obtiens alors ce résultat sur ordinateur :
Et celui-ci sur mobile :
Pratique non ?
Sans avoir à faire une seule ligne de code, tu peux facilement positionner tes éléments dans ta page et ne pas t’embêter à gérer les différentes tailles d’écran.
Gagner du temps
Le deuxième avantage est de gagner énormément de temps dans ton développement. Tu n’as plus à t’embêter avec toute la partie CSS. De plus, il existe même des templates et des thèmes déjà prêts que tu n’as plus qu’à utiliser.
D’autres développeurs ont réalisé ces thèmes avec Bootstrap. Tu peux en récupérer certains gratuitement et d’autres sont payant. Tu peux par exemple, en retrouver sur le site startbootstrap.com. N’hésite pas à passer un peu de temps à fouiller sur internet pour trouver d’autre thèmes que tu peux ré-utiliser.
Gagner en productivité
Le dernier avantage d’utiliser des frameworks CSS est de gagner en productivité. Tu peux ainsi te concentrer uniquement sur le développement de ton application ou site web, te concentrer sur son fonctionnement et sur les problématiques fonctionnelles. Tu n’as plus besoin de t’occuper de la partie graphique.
Créer son propre framework
Si tu te sens d’attaque, tu peux créer toi-même ton propre framework. Ou sans parler de framework, tu peux créer une feuille de style que tu pourras ré-utiliser dans tes différents projets.
Les principaux éléments que tu devras insérer dans ta feuille de style sont : le système de grille (que l’on a vu précédemment), les différents composants que tu utilises le plus (bouton, formulaire, barre de navigation), des mises en pages prêts à l’emploi (layout), des animations (fade in, zoom).
Liste de ressources
Pour que tu puisses trouver plus facilement des thèmes, je te donne quelques ressources complémentaires qui pourront t’aider dans tes futurs développements.
- Créer des animations CSS
- Effeckt.css : Transition et animations prêtes à l’emploi
- Css-tricks : Blog sur le CSS
- Startbootstrap : Thèmes Bootstrap gratuit / payant
- Themewagon :Thèmes Bootstrap gratuit
- Getbootstrap : Thèmes Bootstrap payant
Aussi, tu trouveras sur GitHub, de nombreux projets CSS qui mettent à disposition des feuilles de style que tu as juste à récupérer et à utiliser.
Tu l’auras compris, il n’y a pas besoin d’être un as en CSS pour pouvoir créer de beaux sites web, et il n’y a pas besoin de ré-inventer la roue à chaque fois. Utilises ce qui existent déjà, de nombreux développeurs ont déjà fait une grosse partie du travail. Dans le monde du web, penses toujours à aller voir ce qui existe déjà si tu n’as pas envie de le faire. Les développeurs sont flemmard 😉
