Come avviare il tuo codice HTML
Uno degli obiettivi principali di tutti gli sviluppatori è lo sviluppo più rapido, in particolare il bootstrap rapido. Ci sono dozzine di quadri messi a disposizione negli ultimi due anni che mirano ad avere i nostri prototipi in pochi minuti.
Sfortunatamente molti di questi framework si datano rapidamente, poiché i requisiti del progetto si evolvono e devono essere aggiornati o sostituiti.
Se stai cercando un framework recente che risolva i problemi che le soluzioni precedenti stanno incontrando, pur massimizzando il tuo flusso di lavoro, non puoi sbagliare molto Kickstart HTML.
La griglia
La griglia è uno degli aspetti più importanti di qualsiasi framework, specialmente perché una griglia flessibile determina quanto può essere reattivo un sito.
HTML Kickstart ci offre l'opzione di una griglia flessibile o di una griglia standard (non flessibile), sebbene non sia chiaro quando utilizzerai quest'ultimo dato il crescente predominio dei dispositivi mobili.
Per creare una griglia flessibile con due colonne di uguale dimensione, utilizzeremmo:
Content HereContent HereCome puoi vedere, tutto ciò che abbiamo fatto è aggiungere alcune classi semplici a tre div. Se preferisci la griglia non flessibile, tutto ciò che devi fare è rimuovere il nome della classe flex dal div esterno.
(Si noti che la griglia flessibile si estenderà fino alla larghezza dell'intero schermo, mentre la griglia non flessibile ha una larghezza massima di 1024 px.)
Oltre alle classi basate sopra, ci sono un certo numero di classi helper che possiamo usare, ad esempio:
- mostra-desktop e hide-desktop con queste classi puoi decidere se vuoi che la griglia sia visibile su un computer desktop.
- show-tablet e hide-tablet lo stesso concetto si applica qui, ma per i dispositivi tablet.
- show-phone e hide-phone ancora una volta, queste classi dettano visibilità, questa volta per gli smartphone.
Ad esempio, se volessimo nascondere la nostra griglia a due colonne sugli smartphone, useremmo un codice come questo:
Navigazione
HTML Kickstart ci offre tre opzioni di menu: verticale a sinistra, verticale a destra e orizzontale.
La versione che vorrete più spesso è il menu orizzontale. Per codificarlo, abbiamo solo bisogno di liste non ordinate:
Se vuoi un menu verticale a sinistra, aggiungi solo verticale alla finestra di apertura, e se vuoi un menu verticale , aggiungi verticale a destra , in questo modo:
È davvero semplice codificare i menu reattivi con HTML Kickstart.
Stili predefiniti
HTML Kickstart ti offre alcuni fantastici stili di base. Ovviamente vorrete perfezionarli per il vostro progetto, ma per la prototipazione rapida sono più che sufficienti.
Quando si parla di tipografia, l'HTML utilizza KickStart Steve Matteson 'S Arimo carattere per impostazione predefinita. È possibile visualizzare l'intera gamma di impostazioni del tipo Qui.
Gli stili di pulsanti sono sempre al centro di molta attenzione in qualsiasi framework e HTML Kickstart viene fornito con pulsanti di tutte le forme e dimensioni. Non è nemmeno necessario utilizzare classi per questo, basta creare un tag pulsante e gli stili verranno applicati automaticamente.
Se preferisci che gli stili dei pulsanti siano applicati a un tag di ancoraggio, devi solo aggiungere la classe del pulsante ad esso:
Esistono anche diversi stili che possiamo applicare:
Infine, abbiamo anche la possibilità di creare una barra dei pulsanti, con una sintassi simile al menu orizzontale:
immagini
HTML Kickstart aiuta a migliorare UX generando pop-up per gallerie e immagini per te. È una soluzione molto migliore dell'apertura di una nuova finestra.
Per creare una galleria pop-up completamente funzionale basata su JavaScript, tutto ciò di cui abbiamo bisogno è il seguente codice:
È semplice da implementare e non è necessaria una singola riga di JavaScript.
Le immagini hanno anche alcune grandi classi di supporto, come la didascalia. Questa classe applicata a un'immagine mostra il titolo dell'immagine come didascalia:
Abbiamo anche le classi align-right e align-left che possiamo usare per far fluttuare le immagini a sinistra ea destra. (HTML Kickstart aggiungerà un piccolo margine in modo che le immagini non siano contro il testo.)
E naturalmente, HTML Kickstart ci fornisce anche semplici slideshow. Utilizza BXSlider cursore per gestire questo.
Il codice per un semplice slider sarà simile a questo:
A Content Slider
This slider handles HTML content as well as images.
Il dispositivo di scorrimento è abilitato al tocco per i dispositivi mobili e, ancora una volta, non è necessaria una singola riga di JavaScript.
Forme
L'ultima cosa che voglio presentarti sono le forme. Le forme sono vitali per qualsiasi struttura, perché sono una delle cose più difficili da modellare su una pagina web.
HTML Kickstart mantiene la sua semplicità quando si tratta di moduli, e una forma verticale può essere creata semplicemente come:
Come puoi vedere, ho praticamente dovuto usare nessuna classe per questo modulo. Tutto quello che ho fatto è aggiungere la classe verticale in alto in modo che gli elementi del modulo non siano trattati come inline.
Una delle mie parti preferite di HTML Kickstart sono le semplici notifiche di errore usate con i moduli:
Conclusione
Ci sono tonnellate di opzioni che vengono fornite con HTML Kickstart, in realtà abbiamo solo graffiato la superficie; c'è un enorme set di icone, suggerimenti e persino schede.
La vera forza di HTML Kickstart è la semplicità del suo codice. La mancanza di div e classi estranee lo rende un ottimo risparmio di tempo, meno codice significa meno errori. Se stai cercando di iniziare a codificare il tuo codice HTML da zero, o se stai cercando un framework semplice per prototipare rapidamente un progetto, Kickstart HTML è una grande opzione.
Hai usato HTML Kickstart? Preferisci un quadro diverso? Fateci sapere nei commenti.