Oggi daremo un'occhiata a Boks, un fantastico piccolo strumento che ti aiuterà a individuare un layout di base del sito in un batter d'occhio.
Analizzeremo cos'è e come utilizzarlo per accelerare lo sviluppo e quali sono i limiti e gli svantaggi di cui vorrete essere a conoscenza prima di scaricare l'app.
introduzione
I sistemi a griglia sono una bestia interessante: li ami o li odi. Personalmente, posso vedere entrambi i lati dell'argomento, ma alla fine non ho troppo contro di loro, visto che li personalizzi per i tuoi scopi piuttosto che lasciare tonnellate di codice non trattato e / o non semantico.
Il vero problema con i sistemi a griglia è quanto tendono a essere complessi. Ho appena finito un tutorial su Six Revisions sull'uso del 960 Grid System ei commenti mi sembravano unanimi in quanto la maggior parte delle persone aveva solo bisogno di qualcuno che spiegasse come usare il sistema in termini chiari e facili da capire. Se ti senti confuso dai sistemi di grid, assicurati di controllare quell'articolo.
Come follow-up, volevo mostrarvi come usare una GUI per creare per creare strutture di codice CSS e HTML davvero complesse, basate sul Blueprint CSS Framework, incredibilmente rapidamente. Lo faremo con un'applicazione AIR chiamata Boks.
Planimetria
Solo per informarti, Blueprint è un framework gratuito con tantissime funzionalità. Questi includono:
- Un reset CSS che elimina le discrepanze tra i vari browser.
- Una griglia solida in grado di supportare i layout più complessi.
- Tipografia basata su principi esperti che precedono il web.
- Stili di forma per interfacce utente di grande impatto.
- Stampa gli stili per rendere qualsiasi pagina web pronta per la carta.
- Plugin per pulsanti, schede e sprite.
- Strumenti, editor e modelli per ogni fase del tuo flusso di lavoro.
Per il mio uso, Blueprint è un po 'troppo massiccio, che vedremo più avanti. Tuttavia, tonnellate di sviluppatori lo usano religiosamente e lo trovano tra i migliori framework disponibili.
Piaccia o no, questo è ciò che Boks usa per creare codice. Se gli sviluppatori di Boks stanno leggendo questo, mi piacerebbe vedere un'opzione per usare la griglia CSS da 1KB invece.
Che cosa è Boks?
Basta già introduzione, che diamine è questa cosa di Boks? Onestamente non riesco a ricordare come l'ho trovato in origine ma era una di quelle situazioni in cui scarichi qualcosa, lo butti nella cartella delle applicazioni e dimentichi che esiste. Recentemente stavo purgando il mio disco rigido di tali assurdità quando ho aperto Boks per la prima volta e ho pensato? Ehi, questo è davvero pulito !?
Come ho detto prima, Boks è un'applicazione AIR, quindi dovrebbe funzionare bene usando Mac o PC.
Quello che fa Boks è fornire un innovativo modo visivo per creare il markup strutturale di base per il tuo sito. Mi fermerò proprio lì per dire a tutti gli odiatori di WYSIWYG che sono con te. Se codificare un sito da zero è come avvicinarsi a una tela vuota, i WYSISYG mi sembrano sempre un po 'come Paint By Number.
Ciò che intendo è che sono generalmente troppo strutturati e aggiungono ogni tipo di confinamento e complicazioni inutili. Boks non è una di queste applicazioni. In realtà, non è nemmeno qualcosa che useresti per costruire un intero sito. Ti aiuta semplicemente a creare lo scheletro su cui costruisci il tuo sito.
Iniziare
Dopo aver ottenuto il download gratuito, apri Boks e dovresti vedere l'interfaccia mostrata sotto.
È qui che visualizzerete visivamente la struttura del vostro sito web. Fare questo sarà facile come fare clic e trascinare dove vuoi che le tue colonne vadano. Tuttavia, prima di fare qualsiasi altra cosa, fare clic su ? Impostazioni griglia? pulsante. Qui troverai molte opzioni di personalizzazione per come Boks costruirà la tua pagina.
Sotto le opzioni della griglia viste sopra, puoi impostare il tuo larghezza della pagina insieme con il numero di colonne e come vuoi dividere le grondaie e le colonne. Già vediamo che Boks rende l'uso di un framework di griglia davvero flessibile e molto più facile da personalizzare rispetto allo smantellamento del codice pezzo dopo pezzo.
Nell'immagine sopra puoi vedere che ho impostato tutto per funzionare essenzialmente come la versione a 12 colonne del 960 Grid System. Questo mi darà 12 colonne ognuna larga 60 pixel con una grondaia di 20 pixel. Se non sei d'accordo, semplicemente inserisci il tuo configurazione preferita qui.
Altre impostazioni
Passando alla scheda successiva nella finestra delle impostazioni, qui puoi impostare una linea di base personalizzata per la dimensione del font e anche specificare gli elementi di intestazione di cui hai bisogno.
Le schede CSS e JavaScript consentono di allegare risorse personalizzate. Questi saranno collocati nelle proprie cartelle o aggiunti al codice esistente.
Infine, se si modifica qualcosa nelle preferenze, assicurati di renderlo le impostazioni di esportazione. Ci sono un certo numero di cose importanti su cui lavorare. Innanzitutto, imposta il titolo e la lingua della pagina. Quindi assicurati di utilizzare il giusto DOCTYPE. L'impostazione predefinita è XHTML, ma come puoi vedere nella schermata qui sotto, HTML5 è supportato in modo da poter utilizzare Boks per un po 'di tempo a venire.
Consiglio vivamente spegnendo il? comprime i CSS? opzione. Sarà molto più facile ordinare e personalizzare il tuo codice se lo fai. Altrimenti tutto sarà spezzato insieme. Questo è ottimo per le dimensioni del file, ma incredibilmente fastidioso da provare a leggere.
Infine, se è la prima volta che usi Bok, potresti voler attivare l'opzione per mostrare la griglia in modo da poter vedere cosa sta succedendo. Ovviamente, quando inizi a utilizzare questo per creare siti reali, ti consigliamo di disattivare questa opzione.
Creazione del layout di pagina
Ora che abbiamo tutte le nostre impostazioni al quadrato, è il momento di creare il layout. Per fare questo, semplicemente clicca e trascina sull'anteprima della griglia creare un div
Apparirà un rettangolo che si aggancia automaticamente alla struttura della griglia che hai creato.Puoi crea il maggior numero di div che vuoi cliccando e trascinando per aggiungere altro. Per riposizionare un div, fare clic su di esso una volta e utilizzare i tasti freccia. Tieni premuto Maiusc mentre usi i tasti freccia per ridimensionare un div.
Aggiungere markup
Boks contiene molte funzionalità che ti permettono di personalizzare davvero il tuo layout proprio come faresti se stessi codificando manualmente. È possibile modificare il div, aggiungere un bordo e visualizzare in anteprima e aggiungere qualsiasi classe CSS.
Se vuoi andare così lontano, puoi persino iniziare ad accumulare contenuti HTML in un div. Come puoi vedere qui di seguito, devi semplicemente inserirlo come faresti con un editor di codice.
Non sai cosa vuoi riempire il layout a questo punto? Nessun problema, puoi lasciarlo in bianco o usare il generatore integrato di Lorem Ipsum di Bok per accumulare un testo fittizio.
Andare fuori di testa
Come puoi vedere nell'immagine sottostante, Boks ti permette di creare layout che lo sono complesso come tu hai bisogno che loro siano. Il layout sotto ha un'area di navigazione, una barra laterale, un'area di contenuto e un piè di pagina. L'area del contenuto ha più altri div nidificati all'interno e suddivisi in colonne separate.
Questo richiede letteralmente circa trenta secondi e può quindi farti risparmiare un sacco di tempo di codifica iniziale nella fase iniziale della costruzione del sito.
Nessuna altezza?
Come ho detto prima, Boks non è pensato per creare interi siti web. Le barre orizzontali che vedi nelle immagini sopra rappresentano solo la larghezza e la gerarchia risultanti dei div creati. L'altezza di ciascuno si espande in modo dinamico man mano che aggiungi il contenuto, ma qualsiasi altezza specifica deve essere gestita quando passi effettivamente alla codifica del sito.
Esportazione
Quando hai finito di dividere il layout, premi il pulsante di esportazione e scegli un percorso per i file. Il risultato sarà un file HTML insieme a CSS, JavaScript e altre risorse che hai scelto di includere.
Il prodotto finale non sembra molto a questo punto, ma considerando che ci sono voluti solo pochi secondi e risolverà molti dei tuoi mal di testa nei layout CSS, non è un'impresa da poco!
Il rovescio della medaglia
La parte sfortunata è ovviamente il enorme File CSS che risulta. Se sei abituato a usare Blueprint, questo non ti disturberà minimamente, ma potrebbe far impazzire chiunque altro.
Come ho detto prima, sarebbe bello vedere un'implementazione da 1 KB di Boks che ha spogliato tutto questo codice extra. Nel frattempo, il file CSS è molto chiaro e contiene molti commenti. Ciò semplifica l'accesso e cancella rapidamente qualsiasi codice non necessario.
Se desideri utilizzare continuamente Bok per creare i tuoi layout ma non vuoi tutto questo CSS aggiuntivo, ti consiglio di dedicare alcuni minuti a creare il tuo file CSS personalizzato che puoi riutilizzare ancora e ancora. Per fare ciò, basta guardare il file CSS predefinito ed eliminare tutto ciò che non influisce sul layout della griglia. Ciò include gli stili di testo, gli stili di campo, il codice di reset, ecc. Dopo aver fatto questo una volta, puoi sempre rilasciarlo in sostituzione del file CSS creato da Boks.
In effetti, se sei abbastanza intelligente, potresti essere in grado di fare clic con il tasto destro del mouse sull'applicazione e andare a "Mostra contenuto della confezione"? per aggirare i file predefiniti utilizzati qui e personalizzarli a proprio piacimento (solo Mac).
Conclusione
Boks è un piccolo e semplice strumento che ti aiuta a creare il markup di base per il tuo sito utilizzando una versione completamente personalizzabile del sistema di colonne del framework Blueprint. Non è pensato per creare siti web completi, ma piuttosto per risparmiare tempo sul front-end del tuo progetto che viene ripreso creando diversi div e applicando le classi appropriate.
Sfortunatamente, dato che sei praticamente bloccato nell'usare il framework Blueprint, Boks non è per tutti. Lascia un commento qui sotto e facci sapere cosa pensi di Blueprint e se userai o meno Bok nel tuo prossimo progetto.