Share
Pour de nombreux internautes, développer un projet à partir de zéro à chaque fois fait partie du travail; Il est souvent difficile de constituer une base de code réutilisable lorsque chaque projet est différent. Les développeurs plus expérimentés ont peut-être pris le temps de créer une sorte de cadre frontal, mais le faire correctement peut être une entreprise sérieuse, sans parler de la nécessité de maintenir les choses à jour et de les aligner sur les meilleures pratiques..
En examinant les souhaits et les besoins de chaque codeur, il est clair que les développeurs veulent quelque chose qui soit open source, stable, flexible et (le plus important) bien documenté. En fonction de la taille du projet, un système de grille CSS est peut-être suffisant, mais ne serait-il pas formidable de pouvoir ajouter et supprimer des fonctionnalités à votre guise? Dans cette session, nous examinerons un framework frontal personnalisable appelé Foundation..
Couvrir un cadre tel que Foundation doit être fait correctement et dans les détails. Ainsi, au cours des prochaines semaines, je couvrirai tout, depuis les débuts, les versions personnalisées jusqu'à l’intuition des rouages qui animent ce cadre particulier. Plus important encore, je vais illustrer les avantages que cela pourrait vous apporter dans vos futurs projets Web..
Foundation est un framework frontal comprenant de nombreux outils utiles pour créer des premiers sites Web réactifs et mobiles. Construit principalement avec HTML, CSS et jQuery, Foundation utilise les technologies et les pratiques modernes, mais se dégrade gracieusement dès IE8. Bien que le framework soit le plus souvent utilisé par les développeurs HTML et CSS, vous avez la possibilité d’aller plus loin en utilisant Foundation en conjonction avec Sass et Rails..
La société derrière la fondation, ZURB, a créé un ensemble d’outils très strict pour les développeurs et les concepteurs. Chaque module a son rôle à jouer dans le cadre dans son ensemble, mais peut en même temps fonctionner de manière totalement indépendante du leadership central. Cela signifie donc que vous pouvez combiner et mettre en correspondance les fonctionnalités de votre projet actuel, ou prendre une fonctionnalité unique et l'ajouter à un projet plus ancien. Vous pouvez même l'ajouter en tant que fonctionnalité à un autre framework.
En résumé, il s’agit d’un cadre moderne qui a été bien construit et qui convient à un large éventail d’utilisateurs. Il offre un bon ensemble de fonctionnalités, c'est gratuit, et il y a une communauté grandissante de personnes pour vous aider si vous êtes bloqué..
De nos jours, il est courant que les développeurs utilisent des frameworks (pourquoi réinventer la roue?) Cependant, bon nombre de ces frameworks ont été gonflés par les créateurs qui ont essayé de couvrir chaque éventualité de manière ponctuelle. Ce qui, jadis, a peut-être commencé sa vie en tant qu’outil léger et léger peut devenir une centaine de requêtes http et une chorale à désassembler en fonction de vos besoins..
Foundation comprend une gamme de fonctions et de fonctionnalités. Il repose sur un système de grille de fluide basé sur un pourcentage, est livré avec un curseur jQuery, un plugin lightbox, contient tous les éléments HTML imaginables avec un style agréable et est conçu pour le mobile d’abord. Vous pouvez créer des formulaires personnalisés qui utilisent jQuery pour repenser des éléments d’entrée, des menus déroulants et des cases à cocher complexes, ce qui signifie que vous pouvez les styliser facilement. La structure offre également des options permettant de définir des dispositions mobiles personnalisées à l'aide du réseau mobile, ce qui vous permet de personnaliser réellement votre projet pour les utilisateurs mobiles et de bureau..
Zurb a reconstruit de nombreuses fonctionnalités de base dans la version 4 pour couvrir des cas d'utilisation relativement larges. Le code semble avoir été maintenu propre et commenté là où il doit l'être. L'ajout et la suppression de fonctions sont simples et permettent d'adapter votre construction à vos besoins..
Les utilisateurs de la version 3 peuvent également suivre un document de migration pour mettre à niveau leurs installations existantes ou, s'ils le souhaitent, continuer à utiliser la version 3 en tant que ZURB hébergeant la version précédente pour ceux qui ne sont pas prêts à passer à la v4..
Zurb a une page de téléchargement qui vous permet de modifier un formulaire prérempli pour générer une version personnalisée parfaite pour vos besoins. Disons que vous voulez seulement une grille CSS? Terminé. Désélectionnez tout sauf la "grille" et entrez les mesures de votre projet. Peut-être que vous voulez des éléments de base de l'interface utilisateur? Terminé. Encore une fois, il suffit de vérifier les éléments d'interface utilisateur dont vous avez besoin, tels que les libellés et les boutons, et vous obtiendrez exactement ce que vous obtiendrez. Vous pouvez même saisir tout ce qu'ils offrent (leur évier de cuisine) en un clic. Il permet de personnaliser les couleurs CSS par défaut et même les tailles de clé telles que max-width.
Bien que ce soit pratique, il ne s’agit toujours que d’une forme et j’estime qu’elle pourrait être améliorée. Idéalement, j'aimerais voir un processus par étapes avec peut-être une représentation visuelle du modèle HTML. De plus, comme v4 utilise em comme unité de mesure et qu’il est basé sur la taille de police principale, il semblerait intuitif d’inclure un calculateur px-to-em, juste pour le rendre un peu plus facile..
Rendez-vous sur http://foundation.zurb.com et cliquez sur le gros bouton de téléchargement. De nombreuses options vous seront proposées pour personnaliser votre infrastructure. Décochez toutes les fonctionnalités dont vous n’avez pas besoin, insérez vos couleurs principales, secondaires, d’alerte, de réussite et de police. Combinez cela avec des largeurs de points d'arrêt, des largeurs maximales, des gouttières et même un choix du nombre de colonnes que vous souhaitez.
Après avoir examiné les principaux avantages offerts par Foundation et exploités lors du téléchargement de la version personnalisée, vous devez disposer d’une version personnalisée dans votre dossier de téléchargement. Jouez avec cela, essayez des choses et si vous êtes bloqué, jetez un coup d'œil à la documentation ou jetez vos questions dans le fil de commentaire ci-dessous..
Dans la prochaine partie de cette session, nous utiliserons le système de grille en plongeant dans la navigation, les onglets, les boutons et quelques autres éléments clés de l'interface utilisateur. Nous parlerons également de quelques outils susceptibles d’aider votre développement lorsque vous utiliserez Foundation comme base de vos projets..
Accentsconagua