Twitter Bootstrap semplifica la creazione di layout di pagina complessi. Rilascia alcune linee di codice HTML, applica alcune classi e avrai un modello di lavoro minimale dall'aspetto decente.
Non sarebbe bello se le cose fossero ancora più facili? Cosa succede se Bootstrap aveva un'interfaccia visiva? E se potessi creare pagine Bootstrap trascinando e rilasciando elementi su una tela vuota? Con Easel.io, puoi fare esattamente questo. Vediamo come funziona.
Iniziare
Una volta eseguita la procedura di registrazione rapida, verrai indirizzato alla tua Dashboard. Qui dovresti vedere una pagina demo inclusa e alcuni controlli per creare un nuovo documento da zero.
Subito mi trovo a desiderare che ci fossero dei layout di pagina di base che potrebbero essere utilizzati come elementi costitutivi. Sarebbe bello vedere una serie di modelli di avviamento qui in futuro.
Al posto di questo, premi il? Crea un documento? pulsante per iniziare. Da qui, assegna un nome al documento e imposta le autorizzazioni utilizzando il menu a discesa.
UI e strumenti
L'interfaccia utente qui è incredibilmente semplice. C'è solo una grande tela vuota e una serie di strumenti che corrono lungo il lato sinistro.
Il set di strumenti Bootstrap standard è suddiviso in otto categorie comprimibili: tipografia, tabella, moduli, pulsanti, navigazione, contenitori, miniature e varie.
C'è anche un set di strumenti base, basato su icone, sulla destra, con alcuni strumenti tipici: spostamento, rettangolo, tipo, zoom e panoramica. Oltre agli elementi Bootstrap, ci sono alcuni elementi personalizzati nello "Easel Pack"? e un set di icone gratis che puoi usare nel tuo design.
Flusso di lavoro
Easel ha un flusso di lavoro abbastanza aperto. Basta trascinare gli oggetti sulla tela e mescolarli in giro. Tuttavia, se si desidera che il codice risultante sia strutturato correttamente e il risultato finale sia reattivo, è necessario seguire un processo molto più specifico.
Non c'è molta documentazione di cui parlare, quindi sono un po 'confuso sui dettagli, ma ecco come penso che funzioni.
Inizia con un contenitore
La prima cosa che vorrai fare è trascinare un contenitore. Questo si trova nel? Contenitori? sezione dei tuoi strumenti.
Pensa a questo in termini di tipico sistema a griglia, i contenitori contengono righe di contenuto, ognuna delle quali contiene un numero specifico di colonne.
Quando hai un contenitore o qualsiasi altro oggetto selezionato, il lato destro dello schermo prende vita con varie opzioni per modificare le dimensioni, la rotondità, ecc. Di qualsiasi cosa tu abbia selezionato.
Queste opzioni sono sensibili al contesto e cambiano in base a ciò che hai selezionato.
Ora una fila
Ora che hai un contenitore con cui lavorare, è il momento di trascinare di fila. Assicurati di trascinarlo nel contenitore che hai creato nel passaggio precedente. Dovresti vedere un punto saliente al passaggio del mouse che ti aiuta a vedere dove stai posizionando la riga.
Per impostazione predefinita, una riga viene visualizzata con due colonne. Mentre si fa clic e si trascina per ridimensionare i limiti di uno, l'altro si adatta automaticamente per occupare il resto dello spazio.
Se vuoi più colonne, basta selezionarne una e il suo pulsante duplicato nella parte superiore del menu di destra. È anche possibile impostare manualmente ciascuna larghezza di colonna utilizzando il menu a discesa sotto? Personalizzato? menu degli strumenti.
Trascina e rilascia elementi
Ora che hai alcune colonne con cui lavorare, puoi iniziare a riempirle con vari elementi. Qui ho usato i tre riquadri che ho impostato per creare un testo piacevole.
Da qui, ripeti semplicemente questo processo più e più volte. Puoi utilizzare il contenitore esistente, basta trascinare nuove righe e continuare ad aggiungere elementi a tali file. Qui ho incluso un'altra riga di testo e alcune immagini in miniatura.
Personalizzazione
Una volta che hai alcuni elementi sulla pagina, puoi iniziare a modificare e personalizzare questi elementi. Ad esempio, seleziona del testo e prova a cambiare il carattere. Easel ha grandi opzioni di web type sia da Typekit che da Google.
Altri extra
Prima di concludere, vale la pena sottolineare alcune altre funzionalità. Innanzitutto, come ho detto sopra, c'è un'enorme serie di grandi icone incorporate nell'app:
Ci sono anche alcune super opzioni di visualizzazione della griglia che ti permettono di avere una buona visione di ciò che sta succedendo con il layout Bootstrap. Puoi visualizzare e personalizzare la tua griglia in questo menu.
Dal momento che abbiamo seguito un flusso di lavoro reattivo, possiamo utilizzare le icone in alto a destra per modificare le dimensioni della finestra e vedere come il nostro design risponde a diversi scenari.
Infine, una volta terminato il disegno, è possibile scaricare il codice e le risorse utilizzate. Questa funzione è di gran lunga la parte migliore dell'app in quanto rende i prototipi qualcosa che puoi effettivamente utilizzare.
Il codice che viene generato qui è bello e pulito; molto vicino a quello che ottieni quando lavori a mano con Bootstrap.
Com'è?
Nonostante il fatto che io stia continuando a parlare dei WYSIWIG, ero davvero entusiasta di mettere le mani su Easel. Ho pensato per un po 'che il sistema di codice pulito di Bootstrap sarebbe stato facile da automatizzare e speravo che qualcuno potesse saltare su un costruttore di pagine Bootstrap interattivo.
Una volta messo le mie mani su Easel, i miei pensieri erano misti. Esaminiamo alcune aree specifiche e come sono andate.
Concetto: fantastico
Le persone dietro a Easel sono partiti alla grande. Hanno un concetto stellare e una base solida per costruire qualcosa che sia veramente utile per gli utenti di Bootstrap (di cui ce ne sono molti).
Istruzioni: quasi inesistenti
Attualmente, posso sembrare di trovare una vera documentazione su come usare Easel (forse è lì e io proprio non la vedo!). Certo, è il tipo di app che si desidera solo raccogliere ed eseguire, ma c'è ancora abbastanza complessità qui che è necessaria una documentazione approfondita.
Ci sono almeno alcuni suggerimenti utili quando passi con il mouse su vari elementi dell'interfaccia utente. Queste sono belle, ma non sono sufficienti da sole.
Flusso di lavoro del layout: A Little Wonky
Costruire una pagina con Easel è semplicissimo, basta trascinare gli oggetti sulla pagina. Sfortunatamente, quando inizi a farlo, ottieni il vago sospetto che stai facendo qualcosa di sbagliato.
Allora scopri i contenitori? sezione e ti rendi conto che forse dovevi usare contenitori e righe nel tuo layout. Se questo è davvero il primo passo, perché non sono questi in cima alla lista degli strumenti?
Una volta capito che dovresti creare delle righe, dividere queste righe in qualcosa di diverso da due colonne è in realtà piuttosto complicato. Mi ci è voluto molto tempo per capire come farlo e non sono ancora sicuro di farlo correttamente.
Riflessivo completamente come funziona il layout. Innanzitutto, posiziona gli strumenti di layout nella parte superiore del set di strumenti. Successivamente, una volta che una riga viene rilasciata su un contenitore, mostra alcuni controlli che mi consentono di aumentare e diminuire facilmente il numero di colonne in quel contenitore e di modificare ogni larghezza di ciascuna colonna.
Inoltre, dammi alcuni moduli di layout predefiniti da trascinare. Potrebbero assomigliare a questo:
Ciò consentirebbe di trascinare rapidamente e creare strutture di layout comuni con uno sforzo quasi zero, riducendo notevolmente la frustrazione del layout corrente.
Immagini segnaposto: A Mess
Sicuramente deve essere un sistema migliore per le immagini segnaposto. Quando trascino in una singola immagine segnaposto, non riesco a farlo ridimensionare in modo efficace. Questa funzionalità è super buggy e salta tra una piccola immagine o una inusualmente enorme. Dammi un modo semplice per inserire un'immagine segnaposto che occupa dodici colonne ed è alta 300 px, una che è larga quattro colonne e alta 100 px, ecc.
Inoltre, la griglia delle miniature non è molto facile da lavorare con entrambi. Penso che ci dovrebbero essere dei controlli semplici che mi permettono di impostare il numero di immagini da usare in ogni riga e colonna, ma non esiste un tale sistema. Invece, si ottengono tre immagini per impostazione predefinita e si deve passare attraverso un processo goffo e goffo per copiare e incollare la propria strada verso la galleria che si desidera effettivamente.
Prezzi: fantastico
In realtà mi piace davvero la strategia dei prezzi. Mi aspettavo completamente che bloccassero il download del codice per utenti liberi simile a Gridset, ma ho scoperto che potevo davvero fare quasi tutto quello che volevo sul piano gratuito.
I piani premium in sostanza ti fanno pagare per una maggiore collaborazione e pagine illimitate, il che è sicuramente equo. Se trovi legittimamente un modo per ripulire i siti più velocemente con questo prodotto, allora $ 15 al mese è un gioco da ragazzi.
Vai a provarlo!
Sono stato abbastanza duro su Easel nel mio feedback, ma è solo perché vedo un sacco di potenziale qui e so che questo potrebbe andare da? Qualcosa di carino con cui giocare? a uno strumento? indispensabile? con un po 'di tempo e attenzione.
Nella sua forma attuale, Easel è un buon strumento di simulazione statica, ma per i prototipi reattivi dal vivo, mi sono trovato continuamente a pensare a come posso codificare qualsiasi layout Bootstrap che voglio molto più veloce. Idealmente, lo strumento dovrebbe farmi risparmiare tempo.
Detto questo, consiglio vivamente di provare a Easel per conto tuo. Fai un tentativo e lascia un commento qui sotto per farci sapere cosa ne pensi.