Inizia il tuo progetto Web con HTML KickStart

Recentemente, abbiamo dato un'occhiata a un quadro molto solido da parte dei bravi ragazzi su Twitter, chiamato Bootstrap. Questo toolkit è un coltellino svizzero di utilità e include sia una griglia di layout funzionale che abbastanza elementi pre-disegnati per ottenere un ottimo punto di partenza per qualsiasi progetto.

Oggi vedremo uno strumento molto simile da Joshua Gatcke chiamato HTML KickStart. Questo framework è semplicemente traboccante di grandi cose che ti permetteranno di costruire prototipi di pagine web alla velocità della luce. Entriamo e costruiamo una pagina con essa per vedere cosa pensiamo.

Cosa stiamo costruendo

Prima di entrare in ciò che è HTML KickStart e come utilizzarlo, ecco un'anteprima del risultato finale del tutorial di oggi:

demo: Clicca qui per il lancio.

Che cos'è HTML KickStart?

Secondo 99Lime.com (la homepage del progetto), HTML KickStart è "un set ultra-snello di file HTML5, CSS e jQuery (javascript), layout ed elementi progettati per darti un vantaggio e risparmiare 10 ore di ore sul tuo prossimo progetto web.?

Secondo questa affermazione, questo progetto potrebbe teoricamente salvarci uno o più giorni interi di lavoro. Non è certamente una piccola promessa! Come si fa a fare una cosa del genere? Fornendo un enorme set di funzionalità. Non ti preoccupare di chiedere cosa c'è in HTML KickStart ?? Invece chiedi, cosa c'è non in HTML KickStart ?? La risposta è, naturalmente, "non molto".

Per iniziare: Nav Menu

Per vedere come funziona tutto questo, elaboreremo un progetto rapido. Se vuoi seguire, scarica il progetto e inizia con la pagina HTML di esempio, assicurati di rimuovere tutti gli elementi segnaposto in modo da avere una nuova scheda vuota.

La prima cosa che faremo è aggiungere una navigazione topside. Se oscilliamo dalla pagina di elementi KickStart HTML, troveremo tre opzioni di menu incorporate tra cui scegliere.

Vogliamo l'opzione Menu orizzontale, quindi facciamo clic su? Orizzontale? scheda e trovare alcuni esempi di codice che possiamo utilizzare per i nostri scopi.

Il sistema qui è davvero semplice, basta creare una lista non ordinata con il? Menu? classe e ogni elemento della lista diventerà una voce di menu. La classe? Corrente? viene aggiunto alla pagina corrente e sotto-elenchi possono essere utilizzati per creare menu a discesa.

<ul> <li>Casa</li> <li>Di</li> <li>Servizi <ul> <li>Web design</li> <li>Sviluppo web <ul> <li>E-Commerce</li> <li>Portafoglio personale</li> <li>editoriale</li> </ul> </li> <li>Consulenza UX</li> </ul> </li> <li>Contatto</li> </ul>

Con solo questo pezzettino di HTML e zero lavori CSS, il nostro menu sembra fantastico ed è perfettamente funzionante. Come per il CSS, la magia JavaScript è già stata curata per noi.

Si noti che esiste già un'immagine di sfondo applicata al nostro corpo. Questa è l'immagine di griglia di default che viene fornita con il framework, vedremo come cambiarlo più tardi.

Messaggio di benvenuto

Successivamente vogliamo aggiungere un bel titolo alla nostra pagina per accogliere tutti i visitatori. Questo farà uso degli stili tipografici pre-costruiti.

<h1>Benvenuti in una demo di Design Shack</h1> <p>Questa è una demo di HTMLKickStart, uno strumento di prototipazione rapida di 99Lime.com.</p>

I tag h1 e p conterranno già alcuni stili predefiniti, ma a questo punto non c'è nulla che governa il nostro layout, quindi sarà necessario aiutarlo con alcuni CSS personalizzati.

Per iniziare, vorremmo centrare quel testo nella finestra. Anche il paragrafo e l'intestazione hanno un enorme margine tra di loro, quindi dovremo renderlo più stretto. Vai nel? Style.css? file e inizia una nuova sezione con i tuoi stili. Quindi inserisci questo codice:

.headline {text-align: center; } .headline h1 {margin-bottom: 0; } .headline p {margin-top: 0; }

Con ciò, il nostro titolo sembra fantastico. È perfettamente centrato ha un'altezza verticale notevolmente ridotta.

Usando la griglia

Non ne avevamo ancora bisogno, ma HTML KickStart è dotato di una griglia di layout precostruita. Se hai mai usato qualcosa come 960.gs prima, non ci saranno sorprese qui. È la tua griglia di base a 12 colonne che utilizza classi numerate (es: col_5).

Come puoi vedere, per ottenere l'intera larghezza, devi aggiungere il totale dei tuoi numeri di classe di colonne fino a 12. Quindi se vuoi dividere la pagina a metà, creerai due div, ognuno dei quali ha la classe ? col_6? (6 + 6 = 12). Puoi farlo con qualsiasi combinazione che aggiunge fino a 12: col_7 + col_5, col_2 + col_10, ecc.

Per testare questo, faremo quello che faccio sempre per testare un sistema a griglia, codificare un layout di base a tre colonne. Il CSS per questo è già sul posto, quindi estrarre un layout a tre colonne è facile come creare tre div, ciascuno con il? Col_4? classe.

In ogni divisione trarremo tre elementi: un titolo (h3), un paragrafo e un'immagine. Le immagini segnaposto vengono acquisite tramite il servizio placehold.it.

<h3>Colonna uno</h3> <p>Lorem ipsum dolor sit amet? </p> <img src="//lesptitesaffairesdemayl.be/img/images_1/jumpstart-your-web-project-with-html-kickstart_9.jpg"> <h3>Un po 'di pulizia</h3> <p>Osservando l'esempio fino a questo punto, penso che il contenuto stia spingendo un po 'verso il limite per i miei gusti. Per risolvere questo problema, ho avvolto tutto dopo il menu in un? Col_12? div. La differenza è sottile, ma si sente molto meglio da una prospettiva in bianco. </p> <img src="//lesptitesaffairesdemayl.be/img/images_1/jumpstart-your-web-project-with-html-kickstart_10.jpg"> <h3>Cambiando lo sfondo</h3> <p>Mentre modifichiamo le cose, entriamo e scambiamo quella grafica di sfondo. Lo troverai nel file style.css sotto la sezione layout.</p> <textarea wrap="soft" readonly=""> /*--------------------------------- DISPOSIZIONE -------------- --------------------- * / body {margin: 0; padding: 0; color: # 000; background: #efefef url (css / img / grid.png) ripeti il ​​centro in alto; font: normale 0.9em / 150% 'Arimo', "Trebuchet MS", arial, verdana, sans-serif; text-shadow: 0px 0px 1px trasparente; / * correzione pixel pixel di google * /}

Tutto quello che devi fare è sostituire? Grid.png? immagine con il tuo pattern di sfondo. Ho preso questo e l'ho lasciato cadere solo per dare un po 'di contrasto alla nostra pagina.

Presentazioni e pulsanti

Abbiamo appena raschiato la superficie dei grandi elementi disponibili in questo framework. Facciamo uscire una nuova sezione rapida che utilizza alcune funzionalità in più.

<h1>Ecco un'altra sezione</h1> <p>Questa volta utilizzeremo una presentazione e un pulsante.</p> <ul width="600" height="350"> <li><img src="//lesptitesaffairesdemayl.be/img/images_1/jumpstart-your-web-project-with-html-kickstart_12.jpg"> <p>Ho scelto di usare il semplice blu per questo pulsante, ma è altrettanto facile utilizzarne uno. Rilascia il codice dagli esempi sul sito e sei a posto. </p> <p>Ecco una panoramica di come appare questa sezione. Ancora una volta, senza un singolo bit di CSS o JavaScript in più, siamo stati in grado di realizzare alcune imprese impressionanti!</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/jumpstart-your-web-project-with-html-kickstart_13.jpg"> <h2>footer</h2> <img src="//lesptitesaffairesdemayl.be/img/images_1/jumpstart-your-web-project-with-html-kickstart_14.jpg"> <p>Incluso nei file di esempio è un esempio di un piè di pagina. Questo è importante perché ti mostra come uscire dalla griglia e stabilire un'area colorata a tutta larghezza, qualcosa con cui ho lottato nei miei tentativi prima di notare il piè di pagina. </p> <textarea wrap="soft" readonly=""> Questa pagina è stata creata con HTML KickStart per Design Shack. Superiore

Qui usa un div brutto, non semantico per cancellare i galleggianti, ma questa è una pratica abbastanza comune e in realtà non è la fine del mondo, quindi non lasciarti coinvolgere troppo.

Per modellare il div del footer, sono stati applicati alcuni padding e colori e il piccolo link alla parte superiore della pagina è stato leggermente rialzato. Questa transizione è animata da un altro JavaScript incorporato di fantasia.

#footer {text-align: center; padding: 20px; margin: 0; sfondo: #efefef; border-top: 1px solid #ccc; color: # 999; font-size: 0.8em; text-shadow: 0px 1px 1px #fff; } # link-top {float: right; color: # 666; text-decoration: none; display: blocco in linea; imbottitura: 5px 10px; background: # e5e5e5; line-height: 100%; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }

Prodotto finale

Potremmo andare avanti per giorni con tutte le cose che sono in questo toolkit. Troverai anche tabelle, stili, gallerie di immagini, pangrattato, schede, regole orizzontali e persino frammenti di codice pre-stile.

Con quello che abbiamo passato, ottieni l'idea di base su come tutto funziona. La documentazione è molto completa, quindi tutto ciò che devi fare è trovare l'elemento che desideri inserire, quindi incollare il codice nel tuo codice HTML e modificarlo secondo necessità. Ecco un altro sguardo alla pagina che abbiamo appena creato:

demo: Clicca qui per il lancio.

Per chi è questo?

Ora che abbiamo visto Come per usare HTML KickStart, è importante discutere perché lo useresti. Forse ancora più rilevante è chi dovrebbe pensare di dare una possibilità.

Come la maggior parte dei framework e degli schemi di riscaldamento pienamente integrati, HTML KickStart ti offre un punto di partenza davvero solido per i tuoi progetti di sviluppo, non solo da un punto di vista HTML, ma anche per CSS e anche JavaScript. Dovresti pensare di dargli un'occhiata se al momento non hai un sistema che faciliti l'avvio di nuovi progetti.

? La vera forza di questi tipi di toolkit è la prototipazione rapida?

Tieni presente che c'è molto in questo toolkit, troppo per il gusto di molti sviluppatori. Puoi scegliere e scegliere quello che vuoi e tralasciare il resto, ma considera anche che la vera forza di questi tipi di toolkit è la prototipazione rapida. In un prodotto finito, potresti dedicare del tempo a elaborare manualmente uno schema di layout e tutti questi elementi dello stile, ma nelle fasi iniziali del concetto, perché non aggiornare i wireframe non funzionanti a qualcosa di simile a quello che abbiamo costruito oggi? È molto più interattivo di uno schizzo piatto e in realtà non ci vuole molto più tempo per uscire.

Va bene?

A dire il vero, questo non è l'unico prodotto del suo genere sul mercato. Ci sono un milione di diversi quadri gratuiti là fuori, ognuno con il proprio grado di stile personalizzato. Come ho già detto, la cosa più vicina che ho visto in HTML KickStart è Twitter Bootstrap. In effetti, i due progetti sono quasi identici a colpo d'occhio.

Dopo aver provato entrambi, c'è decisamente molto che mi piace di più Bootstrap. Per i principianti, il layout è un po 'più stretto e i documenti passano attraverso funzionalità avanzate come le colonne di compensazione. Mi piacciono anche gli stili tipografici di Bootstrap e apprezzo molto l'integrazione di LESS.

Detto questo, ci sono alcune cose che mi piacciono dell'HTML KickStart che non troverai in Bootstrap. Ad esempio, la funzione di presentazione è un bonus enorme e qualcosa che utilizzerei davvero un bel po '. Inoltre, tutto il codice JavaScript in HTML KickStart funziona? mentre dovevo fare molti giochini per far funzionare le cose in Bootstrap.

In definitiva, ti consiglio di dare ad entrambi un rapido test drive per vedere quale ti piace di più. Ancora meglio, usa entrambi come fonte di ispirazione per sviluppare il tuo quadro personale personalizzato su misura per le tue esigenze.

Conclusione

HTML KickStart è un progetto fantastico e apprezzo davvero tutto il lavoro manuale che è stato messo dentro. Quando i membri della comunità di sviluppo distribuiscono liberamente progetti di questo tipo, sono sempre stupito dalla loro generosità e disponibilità ad aiutare gli altri.

A questo punto dovresti avere una solida comprensione di cosa sia KickStart HTML, cosa fa, come usarlo e se è giusto per te. Lascia un commento qui sotto e facci sapere cosa ne pensi. Come si confronta questo progetto con altri toolkit simili che hai usato?