3 bibliothèques HTML, CSS et JS open source

Avec une compréhension de base du HTML et CSS, vous pouvez créer une page web très fonctionnelle avec très peu d’effort.

<html>
  <head>
    <title>Ma première page web</title>
  </head>
  <body>
    <h1>titre de ma page !</h1>
    <p>C'est une page codée à la main.</p>
  </body>
</html>

Vous pouvez toujours coder une page comme celle-ci aujourd’hui. Ce qui a changé sont les attentes. Au fur et à mesure que les vitesses de connexion Internet augmentaient, les navigateurs sont devenus plus standardisés et plus puissants, les utilisateurs sont plus exigeant sur le Web. Et les sites Web sont plus complexe, de plus en plus souvent, nous verrons même des concepteurs expérimentés qui étaient à l’aise avec du HTML et du CSS bruts utilisent ces bibliothèques.

Aujourd’hui, peu de gens dessinent leurs pages Web à partir de rien. La plupart choisissent d’utiliser une conception de modèle pré-construit, personnalisée pour leur système de gestion de contenu de choix. Même les développeurs créant des applications Web complexes s’appuient sur des bibliothèques de modèles pour assembler la majorité de leur application.

Mais que faire si vous voulez créer un nouveau modèle pour votre système de gestion de contenu ou générateur de site statique? Que faire si vous souhaitez construire un site simple avec une seule page de destination ou un petit nombre de pages statiques qui ne changeront pas très souvent? Que faire si vous souhaitez coder une application JavaScript mais ne souhaitez pas utiliser un cadre ou une bibliothèque compliqué pour créer la sortie finale?

Il y a encore un million de raisons de coder à la main une page Web. Pour moi, la raison principale est le contrôle. La taille des pages Web deviennent de plus en plus grande au fil du temps. Mais lorsque vous concevez une page à partir de zéro, il est plus facile de laisser de côté les choses dont vous n’avez pas vraiment besoin. Est-ce que j’ai vraiment besoin de charger des polices sur Internet pour que cette page soit sympa? Est-ce que jQuery a quelque chose dont j’ai besoin, ou quelques lignes de JS peuvent-elles accomplir la même chose? Un peu de SVG au lieu d’une image complexe?

En même temps, il est inutile de réinventer la roue chaque fois que vous voulez concevoir quelque chose pour le Web. Il existe probablement des éléments communs entre les pages que vous créez, et des outils de développement modernes tels que Sass et Less font face à un CSS plus rapide que beaucoup.

Pour ces raisons, l’utilisation d’un gabarit et de cadres HTML est utile pour vous apporter le meilleur des deux mondes. Il peut aider à mettre en place une standardisation, une grille facile à utiliser pour la mise en page et un support de fonctionnalité moderne à vos pages, mais en même temps, elles sont souvent assez simples pour réduire tout ce que vous n’utilisez pas réellement.

Voici trois bibliothèques open source que vous pouvez utiliser dans votre prochain projet Web.

Bootstrap

Bootstrap est une collection d’outils utile à la création du design (graphisme, animation et interactions avec la page dans le navigateur … etc. …) de sites et d’applications web. C’est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option

Bootstrap est disponible sur GitHub sous licence MIT.

HTML5 Boilerplate

HTML5 Boilerplate est un template (HTML+CSS+JS+…) lancé par Paul Irish (Modernizr) et Divya Manian. Il contient toutes les bonnes pratiques du moment en terme de performances, de compatibilité inter-navigateurs, de JavaScript, avec un soupçon d’accessibilité.

Mais c’est aussi assez léger, et si vous n’avez pas besoin d’un composant particulier, il est assez facile de le supprimer et de ne jamais regarder en arrière. Si vous cherchez un équilibre entre minimaliste et complet, utilisez HTML5 Boilerplate.

HTML5 Boilerplate est sur GitHub sous licence MIT.

Skeleton

Skeleton est le template le plus léger du groupe. Pesant à environ 400 lignes de code, il est également très facile à utiliser. Si vous avez déjà travaillé avec des bibliothèques Web et que vous les trouviez trop volumineux ou que vous avez trop besoin pour ce dont vous avez besoin, Skeleton offre de bons résultats ! Pour travailler avec: une simple grille; Des formulaires, des listes, des tableaux bien formés. La typographie et d’autres éléments de base; Et le support multi-navigateur. Tout le reste dépend de vous.

Skeleton est sur GitHub sous licence MIT.

Devriez-vous utiliser une de ces libraries ?

Ma recommandation est de magasiner, d’essayer quelques options et d’utiliser celle qui fonctionne le mieux pour vos besoins. Détestez ces trois options? Il existe de nombreuses autres options. Et si vous dépensez une quantité considérable de temps créée pour le Web, envisagez de créer un modèle Web générique qui vous intéresse. En dépit de ce que certains pensent peut-être, vous n’avez pas besoin d’un cadre JavaScript complexe pour construire un template simple, que ce soit pour une page d’information traditionnelle ou une application Web légère.

Vous pouvez également consulter Initializr, une application Web open source qui peut pré-configurer HTML5 Boilerplate, en tant que page classique ou réactive, ou Bootstrap, avec uniquement les options dont vous avez besoin.

Alors et toi? Avez-vous un modèle ou un template préféré pour la conception de sites Web? Ou choisissez-vous une approche différente du design web? Faites-nous savoir dans les commentaires ci-dessous.