Gli sviluppatori Web stanno costantemente sfornando strumenti gratuiti che sono incredibilmente utili nel ridurre la quantità di piccoli, fastidiosi compiti che devi affrontare quando costruisci un sito web o un mockup.
Oggi esamineremo tre nuovi strumenti che passerete attraverso il layout, le immagini segnaposto e gli stili di testo sul vostro prossimo sito.
Griddle.It
Il primo strumento che esamineremo ci aiuta a specificare rapidamente un layout di pagina basato su una griglia. So cosa stai pensando, odio i quadri di griglia giusto? Tonnellate di lanci, nomi di classi non semantiche, complessità non necessaria; tutti rendono i framework CSS odiati da molti sviluppatori.
Fortunatamente, Griddle.It non è affatto un framework CSS! È semplicemente una grafica di sfondo personalizzabile che ti aiuta ad allineare i tuoi contenuti inserendo colonne e larghezze di pixel.
Come usarlo
Le istruzioni per l'uso di Griddle. Si trovano proprio sul sito web e non potrebbero essere più semplici, ma solo per farti un'idea di come funziona lo strumento, inizieremo il progetto di oggi e svilupperemo ulteriormente con i prossimi strumenti .
Tutto ciò che devi fare per implementare Griddle. Si imposta lo sfondo del corpo del tuo file CSS in un URL personalizzato che crea la griglia per te. La struttura dell'URL è la seguente:
Supponiamo che il tuo sito web sia largo 1.200 pixel con 12 colonne ciascuna con una grondaia di 20 pixel. Basta rilasciare il seguente codice CSS nel tuo documento:
Vedi come il? 1200-12-20? definisce i termini per i quali stavamo girando? Ora, se volessi cambiarlo in qualcosa di un po 'più tipico, diciamo di 960 pixel di larghezza con 12 colonne e una grondaia di 30 pixel, lo snippet sarebbe:
Questo applica automaticamente la seguente immagine allo sfondo della tua pagina web. È piuttosto difficile da vedere nella piccola anteprima qui sotto, quindi fai clic qui per vedere un esempio reale. Prova a combinare i numeri nell'URL per vedere come aggiornano l'immagine.
Ci sono alcune funzionalità di base come cambiare i colori e aggiungere linee orizzontali, ma per i nostri scopi questo andrà benissimo. Da qui possiamo iniziare a ritagliare un layout di base della pagina web.
Aggiunta di contenuti in base alla griglia
Per iniziare, lanciamo un div nel nostro documento che conterrà tre colonne di testo. Per ora, includeremo solo un paragrafo segnaposto e quindi inseriremo un po 'di CSS per spingerlo a posto.
Ora, dato che la nostra griglia è larga 960 pixel con grondaie da 30 pixel, sappiamo che vorremmo impostare la larghezza del nostro div a 960px con un margine di? Auto? centrarlo Allo stesso modo, guardando la nostra immagine della griglia, possiamo vedere che per dividere la pagina in tre colonne pari, vorremmo andare con una larghezza di 300 px per i paragrafi.
Ho anche fatto alcune altre cose importanti come impostare il mio float per i prossimi paragrafi e lanciare alcuni margini. Si noti che il margine destro è uguale al gutter della colonna.
Questo codice ci dà il risultato qui sotto. Come puoi vedere, il nostro testo è in linea con la nostra griglia di sfondo. L'impostazione giustificata ha creato alcune brutte lacune nel testo, ma stiamo solo facendo uscire un rapido modello per vivere con quello.
Questa struttura è abbastanza buona e funziona bene con la nostra griglia, ma guarda cosa succede quando aggiungiamo altri due paragrafi. Il margine sul nostro ultimo paragrafo sta rovinando il nostro layout.
Questo può essere facilmente risolto usando lo pseudo-selettore last-child, ma da quello che posso dire, il supporto di IE su questo è zilch, quindi essenzialmente ho fatto la stessa cosa con una classe che possiamo riutilizzare in seguito.
Con quello abbiamo un bel layout a tre colonne. Potremmo averlo fatto senza l'immagine di sfondo? Certamente! Ma Griddle. Ci ha aiutato a visualizzare il nostro layout in modo da poter saltare la matematica coinvolta con la divisione di tre colonne in uno spazio ampio 960px con grondaie uniformi.
È importante notare che il nostro CSS qui è super minimal rispetto a quello che ottieni usando un sistema di grid standard come 960.gs.
Lorempixum
Il nostro sito Web in chiaro è piuttosto noioso! A questo punto, però, non abbiamo davvero alcuna immagine per renderla più piccante, quindi cosa possiamo fare per arricchire il layout?
Inserisci Lorempixum, un piccolo servizio davvero interessante che è concettualmente quasi identico a Griddle.It. Si utilizza un URL personalizzabile per inserire un'immagine, questa volta anche se l'immagine sarà un segnaposto di contenuto, non una griglia di sfondo utilizzata per il layout.
Utilizzando l'app Web mostrata sopra, è possibile generare un'immagine della dimensione giusta. Puoi anche inserire l'URL qui sotto. Il primo numero è la larghezza e il secondo è l'altezza.
Ci sono diversi modi per renderlo più specifico. È possibile scegliere tra il colore o il bianco e il nero oppure specificare la categoria da un pool di undici opzioni. Ad esempio, ecco l'URL di un'immagine casuale della città larga 510 px e alta 310 px e l'immagine risultante.
Mettiamolo per usare sulla nostra piccola pagina web. Per i principianti, aggiungeremo una grande immagine di intestazione larga 960 px di 350 px di altezza.La larghezza è ovviamente quella del nostro sito ma l'altezza è qualcosa che ho appena preso a caso. Ecco l'HTML:
Il risultato è una presenza tipografica notevolmente migliorata sulla nostra pagina. Nota che non abbiamo usato una frazione di ciò che è incluso negli stili Type-a-file, assicurati di dare un'occhiata a tutto ciò che il foglio di stile ha da offrire. Dopo aver terminato, potresti anche voler eseguire un servizio di pulizia CSS come Unused CSS per cancellare tutte le proprietà nel download Type-a-file che non hai utilizzato.
Conclusione
Tieni presente che questo tutorial non presenta un flusso di lavoro da seguire mentre crei i tuoi siti. L'intenzione è semplicemente quella di renderti consapevole di alcuni fantastici strumenti gratuiti che puoi utilizzare per accelerare la creazione di mockup o wireframe del sito web che possono essere successivamente espansi in siti completi.
Con Griddle. Puoi saltare complicati framework CSS e creare velocemente una griglia personalizzata basata sul tuo CSS. Il Lorempixum poi salta dentro e ti aiuta a colmare le lacune di immagine finché non ricevi finalmente le fotografie che il tuo cliente ha promesso di farti due settimane fa. Infine, Type-a-file offre una serie di utili stili di testo preimpostati che puoi implementare rapidamente per rendere la pixel perfetta sulla tua pagina.
Lascia un commento qui sotto e facci sapere di altri fantastici strumenti web che hai trovato e che rendono il tuo lavoro un po 'più semplice.