Aujourd'hui, nous allons jeter un coup d'œil à Boks, un petit outil génial qui vous aidera à définir très rapidement une présentation de base du site.
Nous verrons en quoi cela consiste et comment vous pouvez l’utiliser pour accélérer votre développement, ainsi que les limites et les inconvénients que vous voudrez connaître avant de télécharger l’application.
introduction
Les systèmes de grille sont une bête intéressante: vous les aimez ou vous les détestez. Personnellement, je peux voir les deux côtés de l’argumentation mais à la fin je n’ai pas trop contre eux étant donné que vous les personnalisiez à vos propres fins plutôt que de laisser des tonnes de code non modifié et / ou non sémantique.
Le véritable problème des systèmes de réseau réside dans leur complexité. Je viens de terminer un tutoriel à Six Révisions sur l'utilisation du système de grille 960 et les commentaires ont semblé être unanimes en ce sens que la plupart des gens avaient simplement besoin de quelqu'un pour expliquer comment utiliser le système en termes simples et faciles à comprendre. Si vous êtes confus par les systèmes de grille, veillez à consulter cet article.
En guise de suivi, je voulais vous montrer comment utiliser une interface graphique pour créer des structures de code CSS et HTML extrêmement complexes, basées sur le framework CSS Blueprint, avec une rapidité incroyable. Nous ferons cela avec une application AIR appelée Boks.
Plan
Juste pour vous informer, Blueprint est un framework gratuit doté de nombreuses fonctionnalités exceptionnelles. Ceux-ci inclus:
- Une réinitialisation CSS qui élimine les écarts entre les navigateurs.
- Une grille solide pouvant prendre en charge les mises en page les plus complexes.
- Typographie basée sur des principes experts antérieurs au Web.
- Styles de formulaire pour de superbes interfaces utilisateur.
- Styles d'impression permettant de préparer une page Web pour le papier.
- Plugins pour les boutons, les onglets et les sprites.
- Des outils, des éditeurs et des modèles pour chaque étape de votre flux de travail.
Pour ma propre utilisation, Blueprint est un peu trop massif, ce que nous verrons plus tard. Cependant, de nombreux développeurs l'utilisent religieusement et le trouvent parmi les meilleurs cadres existants.
Qu'on le veuille ou non, c'est ce que Boks utilise pour créer du code. Si les développeurs de Boks lisent ceci, j'aimerais voir une option pour utiliser la grille CSS de 1 Ko à la place.
Qu'est-ce que Boks?
Déjà assez d'introduction, qu'est-ce que c'est que ce truc Boks? Honnêtement, je ne me souviens pas de la façon dont je l’ai trouvé à l’origine, mais c’était une de ces situations où vous téléchargiez quelque chose, le jetiez dans votre dossier d’applications et oubliez qu’il existe. J'étais récemment en train de purger mon disque dur de telles absurdités lorsque j'ai ouvert Boks pour la première fois et que je me suis dit: "C'est vraiment chouette!"
Comme je l'ai déjà dit, Boks est une application AIR et devrait donc fonctionner parfaitement sous Mac ou PC.
Boks fournit un moyen visuel innovant de créer le balisage structurel de base pour votre site. Je vais m'arrêter ici pour dire aux haïsseurs WYSIWYG que je suis avec vous. Si coder un site à partir de zéro revient à s'approcher d'une toile vide, les WYSISYG me semblent toujours un peu comme Paint By Number.
Ce que je veux dire par là, c'est qu'ils sont généralement beaucoup trop structurés et ajoutent toutes sortes de confinement et de complications inutiles. Boks n'est pas une de ces applications. En fait, ce n'est même pas quelque chose que vous utiliseriez pour construire un site entier. Cela vous aide simplement à créer le squelette sur lequel vous construisez votre site.
Commencer
Après avoir récupéré le téléchargement gratuit, ouvrez Boks et vous devriez voir l'interface illustrée ci-dessous.
C’est à cet endroit que vous présenterez visuellement la structure de votre site Web. Faire cela sera aussi simple que de cliquer et de faire glisser l'endroit où vous voulez que vos colonnes aillent. Cependant, avant de faire autre chose, cliquez sur le bouton ? Paramètres de la grille? bouton. Vous trouverez ici de nombreuses options de personnalisation indiquant comment Boks construira votre page.
Sous les options de grille vues ci-dessus, vous pouvez définir votre largeur de la page avec le le nombre de colonnes et comment vous voulez diviser les gouttières et les colonnes. Nous voyons déjà que Boks rend l'utilisation d'un framework de grille vraiment flexible et beaucoup plus facile à personnaliser que de séparer le code pièce par pièce.
Dans l'image ci-dessus, vous pouvez voir que j'ai tout configuré pour fonctionner essentiellement comme la version à 12 colonnes du système de grille 960. Cela me donnera 12 colonnes de 60 pixels de large chacune avec une gouttière de 20 pixels. Si vous n'êtes pas d'accord, simplement entrez le vôtre configuration préférée ici.
Autres réglages
En vous déplaçant vers l'onglet suivant de la fenêtre de configuration, vous pouvez définir ici une ligne de base personnalisée pour la taille de la police et spécifier les éléments d'en-tête dont vous avez besoin.
Les onglets CSS et JavaScript vous permettent d'attacher des ressources personnalisées. Ceux-ci seront placés dans leurs propres dossiers ou ajoutés au code existant.
Enfin, si vous changez quoi que ce soit dans les préférences, assurez-vous de définir les paramètres d'exportation. Il y a un certain nombre de choses importantes ici. Commencez par définir le titre et la langue de votre page. Assurez-vous ensuite que vous utilisez le bon DOCTYPE. La valeur par défaut est XHTML, mais comme vous pouvez le voir sur l’écran ci-dessous, le format HTML5 est pris en charge, vous permettant ainsi d’utiliser Boks pendant un certain temps.
Je recommande fortement éteindre le? Compresser CSS? option. Si vous faites cela, il sera beaucoup plus facile de trier et de personnaliser votre code. Sinon, tout sera brisé ensemble. C'est excellent pour la taille du fichier, mais incroyablement ennuyeux pour essayer de lire.
Enfin, si vous utilisez Boks pour la première fois, vous pouvez activer l’option permettant d’afficher la grille afin de voir ce qui se passe. Évidemment, lorsque vous commencez à utiliser ceci pour créer des sites réels, vous aurez envie de désactiver cette option.
Création de la mise en page
Maintenant que tous nos paramètres sont définis, il est temps de créer la mise en page. Pour ce faire, simplement cliquez et faites glisser sur l'aperçu de la grille créer un div.
Un rectangle apparaîtra qui s'aligne automatiquement sur la structure de grille que vous avez créée.Vous pouvez créez autant de divs que vous le souhaitez en cliquant et en faisant glisser pour ajouter plus. Pour repositionner une div, cliquez dessus une fois et utilisez les touches fléchées. Maintenez la touche Maj enfoncée tout en utilisant les touches de direction pour redimensionner un div.
Ajout de balisage
Boks contient de nombreuses fonctionnalités qui vous permettent de vraiment personnaliser votre mise en page comme vous le feriez si vous codiez manuellement. Vous pouvez utiliser le div, ajouter une bordure, prévisualiser et ajouter des classes CSS.
Si vous voulez aller aussi loin, vous pouvez même commencer à empiler du contenu HTML dans un div. Comme vous pouvez le voir ci-dessous, il vous suffit de le taper comme vous le feriez dans un éditeur de code.
Vous ne savez pas avec quoi vous voulez farcir la mise en page? Aucun problème, vous pouvez laisser le champ vide ou utiliser le générateur intégré Lorem Ipsum de Bok pour créer un texte factice.
Devenir fou
Comme vous pouvez le voir dans l'image ci-dessous, Boks vous permet de créer des mises en page qui sont aussi complexe que vous en avez besoin pour être. La disposition ci-dessous comporte une zone de navigation, une barre latérale, une zone de contenu et un pied de page. La zone de contenu comporte plusieurs autres div imbriquées à l'intérieur et divisées en colonnes séparées.
Cela a pris littéralement une trentaine de secondes et peut donc vous faire gagner beaucoup de temps de codage initial lors de la phase initiale de construction du site.
Pas de hauteur?
Comme je l'ai déjà dit, Boks n'est pas destiné à créer des sites Web entiers. Les barres horizontales que vous voyez dans les images ci-dessus représentent seulement la largeur et la hiérarchie résultantes des divs créés. La hauteur de chaque élément augmente dynamiquement à mesure que vous ajoutez du contenu, mais toute hauteur spécifique doit être traitée lorsque vous progressez réellement dans le codage du site.
Exportation
Une fois que vous avez fini de diviser votre mise en page, cliquez sur le bouton d'exportation et choisissez un emplacement pour les fichiers. Le résultat sera un fichier HTML avec le CSS, JavaScript et les autres ressources que vous avez choisi d'inclure.
Le produit final ne semble pas grand-chose à ce stade-ci, mais étant donné qu’il ne vous a fallu que quelques secondes pour résoudre bon nombre de problèmes de mise en page CSS, ce n’est pas une mince affaire!
Le mauvais côté
La partie malheureuse est bien sûr la énorme Fichier CSS qui en résulte. Si vous avez l'habitude d'utiliser Blueprint, cela ne vous gênera pas le moins du monde mais cela pourrait rendre tout le monde fou.
Comme je l'ai déjà dit, il serait bon de voir une mise en œuvre de 1KB de Boks qui supprime tout ce code supplémentaire. En attendant, le fichier CSS est très clair et contient beaucoup de commentaires. Cela facilite la saisie et la suppression rapide de tout code inutile.
Si vous souhaitez utiliser continuellement Boks pour créer vos mises en page mais que vous ne voulez pas de tout ce CSS supplémentaire, je vous recommande de prendre quelques minutes pour créer votre propre fichier CSS personnalisé que vous pourrez réutiliser à plusieurs reprises. Pour ce faire, il suffit de regarder le fichier CSS par défaut et d’éliminer tout ce qui n’affecte pas la disposition de la grille. Cela inclut les styles de texte, les styles de champ, le code de réinitialisation, etc. Après l'avoir fait une fois, vous pouvez toujours l'insérer en remplacement du fichier CSS créé par Boks.
En fait, si vous êtes assez intelligent, vous pourrez peut-être cliquer avec le bouton droit de la souris sur l'application et aller à? Afficher le contenu du paquet? pour parcourir les fichiers par défaut utilisés ici et les personnaliser à votre goût (Mac seulement).
Conclusion
Boks est un petit outil astucieux qui vous aide à créer le balisage de base de votre site en utilisant une version entièrement personnalisable du système de colonnes du framework Blueprint. Il ne s'agit pas de créer des sites Web complets, mais plutôt de vous faire gagner du temps au début de votre projet en créant divers div et en appliquant les classes appropriées.
Malheureusement, Boks n’est pas à la portée de tout le monde. Laissez un commentaire ci-dessous et dites-nous ce que vous pensez de Blueprint et si vous utiliserez ou non Boks dans votre prochain projet.