Aujourd'hui, nous allons examiner un nouveau projet du réseau Enavu appelé 52 Framework.
Il prétend être le premier framework conçu spécifiquement pour HTML5 et CSS3. Ci-dessous, nous allons examiner certaines des fonctionnalités de base et creuser dans le code pour voir ce que nous pouvons trouver.
Concernant les cadres
Les cadres sont un sujet intéressant. Certains développeurs ne jurent que par eux et vont même jusqu'à dire qu'aucune page Web ne devrait être lancée sans cela, d'autres développeurs les considèrent comme des complications inutiles qui ajoutent un poids superflu à un code qui serait autrement assez simple.
Je suis personnellement quelque part entre les deux. Je suis tout à fait d’accord pour dire que de nombreux cadres, s’ils ne sont pas altérés, contiennent beaucoup de peluches qui pourraient être détruites. Cependant, je les trouve également très utiles et qui font gagner du temps.
La clé est la personnalisation. Tous les frameworks que vous trouverez en ligne ont été créés par des personnes ayant un flux de travail différent du vôtre, voire une autre façon de concevoir les sites Web et leur structure. C'est l'une des principales raisons pour lesquelles les frameworks sont si chargés: ils peuvent ainsi répondre aux besoins de tous. Tous les petits fichiers et morceaux de code inclus dans le téléchargement ne sont pas destinés à tout le monde, ils servent simplement de point de départ pour votre propre cadre personnel.
Lorsque vous empruntez la voiture de quelqu'un d'autre, vous ne vous contentez pas d'entrer et de conduire. Vous ajustez le siège du conducteur et les rétroviseurs en fonction de vos spécifications. De la même manière, ne vous attendez pas à saisir simplement un framework pré-fab et à l'exploiter. La première étape consiste à filtrer tout ce dont vous n’avez jamais besoin. La deuxième étape consiste à ajouter les éléments manquants dont vous aurez toujours besoin. Et la troisième étape devrait consister à peaufiner les choses que vous voulez mais que vous devez modifier légèrement pour votre propre usage.
Au fur et à mesure que nous entrons dans le cadre ci-dessous, réfléchissez à chaque partie et à la manière de la personnaliser pour répondre à vos besoins spécifiques.
Le cadre 52
Le cadre 52 est un nouveau cadre, en cours de construction, spécialement conçu pour l’utilisation de HTML5 et CSS3 de manière compatible avec les standards du navigateur.
Trop tôt?
HTML5 et CSS3 sont encore de nouvelles technologies, n'est-il pas un peu tôt pour commencer à créer des frameworks pour eux? Absolument pas. La prise en charge de ces deux nouvelles normes augmente rapidement et est alimentée par un grand nombre de développeurs qui ne pouvaient tout simplement pas attendre pour les mettre en œuvre.
Que ce soit ou non le moment de commencer à utiliser HTML5 et CSS3 est un tout autre débat, l’idée ici est que c’est le moment idéal pour commencer à construire des systèmes afin de faciliter leur utilisation dans un proche avenir. Il ne sera jamais un jour où les normes Web cesseront d'évoluer et créeront donc le climat idéal pour créer des cadres. Au lieu de prendre du retard, des outils comme ceux-ci devraient suivre les nouvelles technologies et évoluer avec elles. Ainsi, lorsque les développeurs décideront qu'il est temps de commencer à implémenter HTML5 et CSS3, les outils seront déjà en place pour le faire.
Le téléchargement
Comme vous pouvez le constater, la structure du fichier est relativement petite, même avec les fichiers PSD inclus, qui peuvent évidemment être supprimés site par site.
Le téléchargement consiste en trois fichiers CSS, deux fichiers HTML, un fichier JS, un fichier JPG et deux fichiers PSD. Nous examinerons le rôle de chacun de ces éléments dans l'explication ci-dessous.
Le fichier de démonstration
Une fois le framework téléchargé, ouvrez index.html. C'est le cœur de tout le cadre et ce que je veux passer la plupart de notre temps à discuter.
Comme vous pouvez le constater, le cadre vous aide en définissant un certain nombre des éléments les plus courants. Vos balises d'en-tête (h1, h2 et h3) sont stylées avec une typographie de page de base, les éléments de formulaire sont prêts à l'emploi et ont une conception de bouton personnalisée en prime, une méthode est en place pour l'affichage du code et même une multitude de styles supplémentaires pour différents éléments tels que fort, gras, italique, texte inséré, gros texte, etc.
Le code
Pour obtenir un meilleur aperçu du contenu du fichier de démonstration, regardez sous le capot pour voir le code. Nous allons analyser cette pièce par pièce ci-dessous.
DOCTYPE
La première chose que vous verrez dans le fichier .html est le nouveau DocType, à la fois simple et magnifique.
Il s'agit d'une déclaration indispensable qui indique aux navigateurs comment interpréter votre code. C'est sympa et succinct et je le préfère nettement aux versions précédentes, plus compliquées.
JavaScript
La prochaine chose notable que vous verrez est un lien vers un fichier JavaScript externe.
Ne vous inquiétez pas, vous n'avez pas besoin de comprendre une seule ligne de JavaScript pour utiliser ce framework. Le JS inclus utilise simplement quelques lignes de code pour créer la prise en charge de nouveaux éléments dans les navigateurs plus anciens. C'est un truc astucieux qui vous permet de tirer parti des avantages de HTML5 sans vous soucier de qui vous laissez.
Sémantique
La prochaine chose que vous devriez remarquer à propos de ce document est la façon dont le HTML est construit. Il utilise le nouveau balisage sémantique que vous devriez déjà apprendre à suivre. Voici une version extrêmement simplifiée et simplifiée de la structure.
Comme vous pouvez le constater, un certain nombre de nouveaux éléments HTML5 sont utilisés ici. La page est divisée en zones d'en-tête, de navigation, de côté, de section, d'article, de code et de pied de page. En utilisant la structure, ces éléments fourniront la structure de base pour tout ce que vous créez. Notez que bon nombre des éléments pour lesquels vous créez normalement des divs ont un support natif en HTML5.
Utiliser le Framework 52 vous obligera à créer vos pages en utilisant ces nouveaux éléments. C'est donc un excellent moyen de passer à HTML5 lorsque le moment sera venu.
Système de réinitialisation et de grille
Trois fichiers CSS sont inclus dans le cadre: général, grille et réinitialisation.Le fichier de réinitialisation est assez basique et est essentiellement une version modifiée de la réinitialisation très populaire d'Eric Meyer CSS. Cette version a été créée par Richard Clark.
La grille CSS est là car, comme tout bon framework, celui-ci utilise beaucoup de grilles.
Il n’ya vraiment rien de révolutionnaire ici, c’est un système de grille 960 à 16 colonnes exactement comme vous l’avez utilisé dans d’autres frameworks. La largeur des colonnes disponibles varie de 40 pixels à 940 pixels et chacune contient une marge gauche et droite de 10 pixels.
CSS générale
Le CSS primaire contient un certain nombre de styles utiles pour vous aider à démarrer. Tous les éléments HTML mentionnés ci-dessus ont des styles spécifiques, ainsi qu'un certain nombre d'autres éléments de base, tels que les classes de compensation de flottant et les guillemets.
Une fonctionnalité intéressante ici est que vous pouvez définir la couleur de sélection d’une page Web pour remplacer la valeur par défaut du navigateur. Cela signifie que lorsque vous sélectionnez une ligne de texte, la surbrillance correspond à la couleur que vous définissez.
Dans les styles de champs, vous trouverez certains styles pour créer ces coins arrondis CSS3, toujours très populaires.
Enfin, dans le CSS incorporé dans le fichier HTML, vous verrez plus de CSS3 s’appliquer pour créer des ombres.
Plus à venir
Comme je l'ai dit plus haut, le cadre 52 en est encore à ses débuts et continuera à se développer et à s'améliorer. Par exemple, la dernière version bêta prend en charge les éléments de canevas et vidéo.
J'aimerais voir les CSS pour les coins arrondis et les ombres extraites d'éléments spécifiques dans des classes générales ou des exemples d'éléments plus remarquables afin que vous n'ayez pas à les rechercher dans le code si vous souhaitez les utiliser comme élément de départ vos propres styles.
Autre que cela, je pense que le cadre est un bon début et je peux vraiment me voir le construire pour créer quelque chose qui est parfait pour mon propre usage.
Que changerais tu?
Laissez un commentaire ci-dessous et dites-nous ce que vous pensez du 52 Framework. Qu'est-ce que vous aimez à ce sujet? Qu'est-ce que tu detestes? Les développeurs recherchent des suggestions de fonctionnalités à ajouter. Assurez-vous d’énumérer celles qui vous viennent à l’esprit!