Twitter Bootstrap facilite la création de mises en page complexes. Ajoutez quelques lignes de code HTML, appliquez quelques classes et vous obtenez une maquette de travail décente et minimale.
Ce ne serait pas bien si les choses étaient encore plus faciles? Et si Bootstrap avait une interface visuelle? Et si vous pouviez créer des pages Bootstrap en glissant-déposant des éléments sur un canevas vide? Avec Easel.io, vous pouvez faire exactement cela. Voyons voir comment ça fonctionne.
Commencer
Une fois que vous avez terminé le processus d'inscription rapide, vous serez redirigé vers votre tableau de bord. Ici, vous devriez voir une page de démonstration incluse et quelques commandes pour créer un nouveau document à partir de zéro.
Dès le départ, je me suis dit que je souhaiterais pouvoir disposer de quelques mises en pages de base pouvant servir de blocs de construction. Il serait bon de voir un tas de modèles de base ici dans le futur.
Au lieu de cela, cliquez sur le bouton "Créer un document". bouton pour commencer. À partir de là, nommez votre document et définissez les autorisations à l'aide du menu déroulant.
UI & Outils
L'interface utilisateur est extrêmement simple. Il y a juste un grand canevas vide et un ensemble d'outils sur le côté gauche.
L'ensemble d'outils Bootstrap standard est divisé en huit catégories réductibles: typographie, tableau, formulaires, boutons, navigation, conteneurs, miniatures et divers.
Vous trouverez également à droite un jeu d’outils de base, basé sur des icônes, avec quelques outils classiques: déplacer, rectangle, type, zoom et panoramique. En plus des éléments Bootstrap, il existe quelques éléments personnalisés dans le? Pack Chevalet? et un ensemble d'icônes gratuites que vous pouvez utiliser dans votre conception.
Flux de travail
Easel a un flux de travail assez ouvert. Il suffit de faire glisser des éléments sur la toile et de les mélanger. Toutefois, si vous souhaitez que votre code résultant soit structuré correctement et que le résultat final soit réactif, vous devrez suivre un processus beaucoup plus spécifique.
Il n’ya pas beaucoup de documentation à parler, donc je suis certes un peu flou sur les détails moi-même, mais voici comment je pense que cela fonctionne.
Commencez avec un conteneur
La première chose à faire est de faire glisser un conteneur. Ceci est situé dans le? Conteneurs? section de vos outils.
Pensez à cela en termes de votre système de grille typique, les conteneurs contiennent des lignes de contenu, chacune contenant un nombre spécifique de colonnes.
Lorsqu'un conteneur ou tout autre élément est sélectionné, le côté droit de l'écran s'anime avec diverses options permettant d'ajuster la taille, la rondeur, etc. de tout ce que vous avez sélectionné.
Ces options sont sensibles au contexte et changent en fonction de ce que vous avez sélectionné.
Maintenant une rangée
Maintenant que vous avez un conteneur à utiliser, il est temps de faire glisser une rangée. Assurez-vous de le faire glisser dans le conteneur que vous avez créé à l'étape précédente. Vous devriez voir un survol en survol qui vous aide à voir où vous placez la ligne.
Par défaut, une ligne apparaît avec deux colonnes. Lorsque vous cliquez et faites glisser pour redimensionner les limites de l'un, l'autre s'adapte automatiquement pour occuper le reste de l'espace.
Si vous voulez plus de colonnes, sélectionnez-en une et son bouton de duplication en haut du menu de droite. Vous pouvez également définir manuellement la largeur de chaque colonne à l'aide du menu déroulant situé sous le menu? Personnalisé? menu d'outils.
Glisser-déposer des éléments
Maintenant que vous avez quelques colonnes avec lesquelles travailler, vous pouvez commencer à les remplir avec divers éléments. Ici, j’ai utilisé les trois cases que j’ai configurées pour mettre en forme un joli texte.
À partir de là, répétez simplement ce processus encore et encore. Vous pouvez utiliser le conteneur existant, il suffit de faire glisser de nouvelles lignes et de continuer à ajouter des éléments à ces lignes. Ici, j'ai inclus une autre ligne de texte et des images miniatures.
Personnalisation
Une fois que vous avez quelques éléments sur la page, vous pouvez commencer à les peaufiner et à les personnaliser. Par exemple, sélectionnez du texte et essayez de changer de police. Easel propose d'excellentes options de types Web de Typekit et de Google.
Autres goodies
Avant de terminer, il convient de souligner quelques autres fonctionnalités. Tout d'abord, comme je l'ai mentionné ci-dessus, il existe un grand nombre d'icônes géniales intégrées dans l'application:
Il existe également des options de visualisation de grille très utiles qui vous permettent de vraiment bien regarder ce qui se passe avec la disposition Bootstrap. Vous pouvez afficher et personnaliser votre grille dans ce menu.
Comme nous avons suivi un flux de travail réactif, nous pouvons utiliser les icônes en haut à droite pour modifier la taille de la fenêtre d'affichage et voir comment notre conception répond à différents scénarios.
Enfin, une fois votre conception terminée, vous pouvez télécharger le code et les ressources utilisées. Cette fonctionnalité est de loin la meilleure partie de l’application, car elle permet à vos prototypes d’être réellement utilisables.
Le code généré ici est beau et propre. très proche de ce que vous obtenez lorsque vous travaillez à la main avec Bootstrap.
Comment c'est?
Malgré le fait que je m'amuse toujours au sujet des WYSIWIGs, j'étais assez excité de pouvoir mettre la main sur Easel. Je pensais depuis un moment que le système de code propre de Bootstrap serait facile à automatiser et espérais que quelqu'un sauterait sur un constructeur de page Bootstrap interactif.
Une fois que j’ai mis la main sur Easel, mes pensées étaient partagées. Examinons quelques domaines spécifiques et leurs résultats.
Concept: génial
Les personnes derrière Easel ont pris un bon départ. Ils ont un concept stellaire et une base solide en place pour construire quelque chose qui est vraiment utile pour les utilisateurs de Bootstrap (il y en a beaucoup).
Instructions: presque inexistant
Actuellement, il semble que je puisse trouver de la documentation sur l'utilisation de Easel (peut-être qu'elle existe et que je ne la vois pas!). Certes, il s’agit du type d’application que vous souhaitez juste utiliser et exécuter, mais la complexité de ce document est telle qu’une documentation détaillée est nécessaire.
Il y a au moins quelques info-bulles utiles lorsque vous survolez divers éléments de l'interface utilisateur. Ce sont bien, mais ne sont pas suffisants à eux seuls.
Flux de travail de mise en page: Un peu Wonky
Construire une page avec Easel est très facile, il suffit de faire glisser des éléments sur la page. Malheureusement, alors que vous commencez à faire cela, vous avez le soupçon que vous faites quelque chose de mal.
Ensuite, vous découvrez les? Conteneurs? section et vous réalisez que vous étiez peut-être censé utiliser des conteneurs et des lignes dans votre mise en page. Si c'est vraiment la première étape cependant, pourquoi ne sont-ils pas en haut de la liste d'outils?
Une fois que vous vous rendez compte que vous devez créer des lignes, diviser ces lignes en autre chose que deux colonnes est en réalité assez délicat. Il m'a fallu beaucoup de temps pour comprendre comment le faire et je ne suis toujours pas sûr de le faire correctement.
Je repenserais complètement le fonctionnement de la mise en page. Tout d’abord, placez les outils de présentation en haut du jeu d’outils. Ensuite, une fois qu'une ligne est déposée sur un conteneur, affichez des commandes qui me permettent d'augmenter et de réduire facilement le nombre de colonnes dans ce conteneur, ainsi que d'ajuster chaque largeur de colonne.
En outre, donnez-moi quelques modules de disposition prédéfinis à faire glisser. Ils pourraient ressembler à quelque chose comme ça:
Cela vous permettrait de faire glisser rapidement et de créer des structures de présentation communes avec un effort presque nul, ce qui réduirait considérablement la frustration de la présentation actuelle.
Placeholder Images: Un mess
Il faut sans aucun doute un meilleur système pour les images d’espace réservé. Lorsque je fais glisser une image d'espace réservé unique, je ne parviens pas à la redimensionner efficacement. Cette fonctionnalité est super buggy et elle bascule entre une image minuscule ou une image incroyablement énorme. Donnez-moi un moyen simple de créer une image de substitution qui prend douze colonnes et mesure 300 pixels de haut, une colonne de quatre colonnes de large et 100 pixels de haut, etc.
De plus, la grille de vignettes n'est pas très facile à utiliser non plus. Je pense qu'il devrait y avoir des contrôles simples qui me permettent de définir le nombre d'images à utiliser dans chaque ligne et colonne, mais il n'y a pas de tel système. Au lieu de cela, vous obtenez trois images par défaut et devez suivre un processus fastidieux pour copier et coller votre chemin vers la galerie de votre choix.
Prix: excellent
En fait, j'aime beaucoup la stratégie de prix. Je m'attendais totalement à ce qu'ils bloquent le téléchargement de code pour des utilisateurs libres similaires à Gridset, mais j'ai découvert que je pouvais réellement faire presque tout ce que je voulais avec le forfait gratuit.
Les forfaits premium vous demandent essentiellement une collaboration accrue et un nombre de pages illimité, ce qui est tout à fait juste. Si vous trouvez légitimement un moyen de distribuer des sites plus rapidement avec ce produit, alors 15 $ par mois est une évidence.
Allez l'essayer!
J'ai été assez dur avec Easel dans mes commentaires, mais c'est uniquement parce que je vois une tonne de potentiel ici et que je sais que cela pourrait aller de? Quelque chose d'intéressant à jouer? à un? outil indispensable? avec un peu de temps et d'attention.
Dans sa forme actuelle, Easel est un bon outil de maquette statique, mais pour les prototypes dynamiques et réactifs, je me suis toujours demandé comment coder toute mise en page Bootstrap que je souhaite beaucoup plus rapidement. Idéalement, l'outil devrait me faire gagner du temps.
Tout cela étant dit, je vous recommande fortement d'essayer Easel. Donnez un coup de feu et laissez un commentaire ci-dessous pour nous faire savoir ce que vous pensez.