3 cadres CSS fantastiques vous ne voudrez pas manquer
Personnellement, je préfère commencer à coder tout projet avec juste une grille et construire à partir de là. Je suis pointilleux comme ça, et j'aime avoir le contrôle sur autant de variables que possible.
Il y a cependant des moments où ce n'est pas pratique. Peut-être que vous construisez une application, ou un site exceptionnellement grand et compliqué. Peut-être que vous n'avez simplement pas le temps de définir chaque élément à partir de zéro, et vous n'avez pas besoin de le faire. C'est quand vous voulez un cadre complet, avec des extras.
Eh bien, on a beaucoup écrit sur les frameworks-Bootstrap, Foundation, Gumby, alors on ne va pas en parler ici. J'ai joué au wi ... Je veux dire tester rigoureusement trois des options les moins connues. Jetez un oeil, l'un d'eux peut être exactement ce dont vous avez besoin.
Kube
Kube est définitivement un outil pour le développeur front-end moderne. Seuls les navigateurs modernes et IE9 + sont pris en charge. Les styles par défaut sont jolis, mais assez fades pour être adaptés à presque toutes les marques.
En bref, il s'agit d'un cadre simple mais simple, conçu avec un attrait visuel quasi universel et destiné à une personnalisation poussée.
Les caractéristiques
Décrire toutes les fonctionnalités en profondeur, voire les énumérer simplement, prendrait probablement trop de place dans cet article, alors je vais vous donner les points forts: le framework lui-même est basé sur LESS et modulaire. Si vous voulez tout sauf les styles de boutons, par exemple, il est très simple de "compiler" les vôtres. Supprimez simplement la règle @import correspondante de kube.less, et allez. Il est prudent de dire qu'il existe des styles pour presque tous les éléments HTML que vous pouvez imaginer, ainsi que les suppléments habituels tels que les boutons, les barres de navigation de base, les classes d'assistance et un système de disposition de grille assez solide.
En un sens, Kube se définit en partie par ce qu’il n’a pas. Par exemple, il n'y a pas une surabondance d'éléments d'interface utilisateur et de styles supplémentaires. Il n'y a aucun plugin jQuery pour les fonctionnalités de l'interface utilisateur que ce soit. Et cela n’a certainement pas l’impression que vous êtes "coincé" avec quelque chose.
Conclusion
Kube est une offre solide. Ses créateurs n'ont pas lésiné sur les fondamentaux, mais il existe un sens certain de "seulement ce dont vous avez besoin" qui accompagne ce cadre. C'est un bon point de départ, et il incarne le véritable objectif de tout cadre. Couleur moi impressionné.
Cadre IVOIRE
IVOIRE, comme Kube, est conçu pour être facilement compris et rapidement implémenté. La typographie semble bonne, mais elle est assez fade pour être utilisée avec presque tous les projets, et les styles par défaut généraux le sont aussi.
C'est un framework conçu pour vous donner juste assez pour commencer, et quelques extras.
Les caractéristiques
Les fonctionnalités correspondent à ce que vous attendez normalement: un système de grille solide et flexible, des styles pour la typographie et toutes les formes, etc. Cependant, IVORY se distingue de Kube par le fait que vous disposez de quelques éléments d'interface utilisateur supplémentaires: boutons, boîtes d'alertes, pagination, commutateurs à bascule, infobulles, navigation intégrée, onglets et accordéons.
Ce qui distingue ces composants de l'interface utilisateur, c'est qu'ils sont tous implémentés avec CSS3 et non avec JavaScript. La seule raison pour laquelle l'interface utilisateur de jQuery est liée est de faire fonctionner le sélecteur de date.
Juste deux choses que je n'aime pas: certains styles de composants de l'interface utilisateur rappellent beaucoup les styles de Bootstrap 2.0. Donc oui, vous voudrez probablement les changer. De plus, le système de grille nécessite l'utilisation d'une classe supplémentaire dans la dernière colonne de n'importe quelle ligne. Je déteste ça.
Conclusion
Mis à part ces deux petites mises en garde, IVORY Framework est une bonne option pour tous les projets. Ce n'est pas le plus facilement personnalisable des options, mais si vous avez juste besoin de commencer avec un bon ensemble de valeurs par défaut, et quelques composants d'interface utilisateur supplémentaires, donnez-lui un tourbillon.
Base
Base, par Matthew Hartman , adopte une approche un peu plus tendance (pour le moment, en tout cas) du framework CSS. Basé sur Normalize.css , il commence par des polices de titre fines et des cases plates pour les boutons. On ne peut nier que les styles par défaut sont franchement jolis.
Cela peut ne pas plaire à tout le monde, en fonction des préoccupations liées à l'image de marque, mais c'est assez simple à changer. Après tout, Base est tout au sujet de la personnalisation.
Les caractéristiques
Base est fourni dans les versions LESS et SASS, vous pouvez donc modifier rapidement les variables et les "recompiler" selon vos besoins. Les variables intégrées incluent les tailles de police, les points d'arrêt, les largeurs de conteneur principales pour chaque point d'arrêt, etc.
De nombreuses classes supplémentaires sont fournies pour vous aider à configurer vos mises en page spécifiques au mobile, et il existe des "mixins" dans un fichier séparé pour vous aider dans votre cheminement.
Comme Kube, il n'y a pas de composants d'interface utilisateur supplémentaires par rapport à ceux fournis avec HTML, donc si vous voulez des interfaces à onglets, des accordéons, etc., vous devrez les créer vous-même. La base semble être axée sur la création de sites Web magnifiques , par opposition aux applications Web .
Conclusion
Si vous créez un site qui ne nécessite pas trop de composants d'interface utilisateur spécifiques à l'application, Base est une ressource fantastique. Les pages construites avec elle ont déjà l'air jolies; mais si vous n'aimez pas les styles par défaut, il n'est pas trop difficile de les changer.
