Oggi esamineremo un nuovo progetto da Enavu Network chiamato 52 Framework.
Sostiene di essere il primo framework costruito specificamente per HTML5 e CSS3. Di seguito vedremo alcune delle funzionalità di base e scaveremo nel codice per vedere cosa possiamo trovare.
Per quanto riguarda i quadri
I quadri sono un argomento interessante. Alcuni sviluppatori giurano su di loro e arrivano addirittura a dire che nessuna pagina web dovrebbe mai essere avviata senza una, altri sviluppatori li vedono come complicazioni inutili che aggiungono un sacco di peso superfluo a quello che altrimenti sarebbe codice abbastanza semplice.
Personalmente sono da qualche parte nel mezzo. Sono assolutamente d'accordo sul fatto che molte strutture, se inalterate, contengono un sacco di pelucchi che potrebbero essere cestinati. Tuttavia, trovo anche che siano abbastanza utili e che fanno risparmiare tempo.
La chiave è la personalizzazione. Ogni framework che troverai online è stato creato da qualcuno con un flusso di lavoro diverso dal tuo e persino da un diverso modo di pensare ai siti web e alla loro struttura. Questo è uno dei motivi principali per cui le strutture sono così cariche: così possono soddisfare le esigenze di tutti. Ogni piccolo file e pezzo di codice incluso nel download non è pensato per ogni persona, ma serve semplicemente come punto di partenza per la tua struttura personale.
Quando prendi in prestito l'auto di qualcun altro, non salti e guidi. Regoli il sedile del conducente e gli specchietti per adattarli alle tue specifiche. Allo stesso modo, non aspettarti di prendere un framework prefabbricato e portarlo avanti. Il primo passo dovrebbe essere quello di passare e filtrare tutto ciò che non ti servirà mai. Il secondo passo dovrebbe essere quello di aggiungere elementi mancanti che ti serviranno sempre. E il terzo passo dovrebbe essere quello di modificare le cose che si desidera, ma è necessario modificare leggermente per il proprio uso.
Mentre ci avviciniamo al framework sottostante, pensiamo a ciascuna parte e a come la personalizzeresti per adattarla alle tue esigenze specifiche.
Il 52 Framework
Il 52 Framework è una struttura nuova e molto in fase di costruzione, costruita specificatamente per l'utilizzo di HTML5 e CSS3 in un modo cross-browser e conforme agli standard.
Troppo presto?
HTML5 e CSS3 sono ancora nuove tecnologie, non è un po 'troppo presto per iniziare a creare framework per loro? Assolutamente no. Il supporto per entrambi questi nuovi standard sta aumentando rapidamente e viene alimentato da un numero enorme di sviluppatori che semplicemente non vedono l'ora di implementarli.
Indipendentemente dal fatto che sia il momento di iniziare a utilizzare HTML5 e CSS3 è un altro dibattito interamente, l'idea è che è il momento perfetto per iniziare a costruire sistemi per facilitarne l'uso nel prossimo futuro. Non ci sarà mai un momento in cui gli standard web cesseranno di evolversi e quindi creeranno il clima perfetto per la creazione di strutture. Invece di restare indietro, strumenti come questi dovrebbero stare al passo con le nuove tecnologie e evolvere con loro. In questo modo, mentre gli sviluppatori decidono che è in effetti il momento di iniziare a implementare HTML5 e CSS3, gli strumenti saranno già disponibili per farlo.
Il download
Come potete vedere, il framework è abbastanza piccolo nelle dimensioni del file, anche con i PSD inclusi, che possono ovviamente essere rimossi per sito.
Il download è composto da tre file CSS, due file HTML, un file JS, un JPG e due PSD. Daremo un'occhiata al ruolo che ciascuno di questi svolge nella spiegazione di seguito.
Il file demo
Una volta scaricato il framework, apri index.html. Questo è il cuore dell'intero framework e ciò su cui voglio passare la maggior parte del nostro tempo a discutere.
Come puoi vedere, il framework ti aiuta impostando un numero di elementi più comuni. I tag di intestazione (h1, h2 e h3) sono abbinati alla tipografia di base della pagina, gli elementi del modulo sono pronti per essere utilizzati e hanno un design personalizzato per i pulsanti personalizzati, esiste un metodo per la visualizzazione del codice e anche una serie di stili aggiuntivi in atto per elementi diversi come testo forte, grassetto, corsivo, inserito, testo grande, ecc.
Il codice
Per vedere meglio cosa c'è nel file demo, guarda sotto il cofano per vedere il codice. Analizzeremo questo pezzo per pezzo qui sotto.
DOCTYPE
La prima cosa che vedrai nel file .html è la nuova, bellissima e semplice HTML5 DocType.
Questa è una dichiarazione indispensabile che indica ai browser come interpretare il tuo codice. È bello e succinto e lo preferisco di gran lunga a versioni precedenti, più complicate.
JavaScript
La prossima cosa notabile che vedrai è un link a un file JavaScript esterno.
Non preoccuparti, non è necessario comprendere una singola riga di JavaScript per utilizzare questo framework. Il JS incluso usa semplicemente un paio di linee di codice per creare supporto per i nuovi elementi nei browser più vecchi. È un trucco accurato che ti consente di utilizzare gran parte della bontà di HTML5 senza preoccuparti di chi ti stai lasciando alle spalle.
Semantica
La prossima cosa che dovresti notare su questo documento è come viene costruito l'HTML. Usa il nuovo markup semantico che dovresti già imparare a seguire. Ecco una versione estremamente semplificata e ridotta della struttura.
Come puoi vedere, qui vengono utilizzati una serie di nuovi elementi HTML5. La pagina è suddivisa in aree di intestazione, nav, a parte, sezione, articolo, codice e piè di pagina. Usando il framework, questi elementi forniranno la struttura di base per tutto ciò che crei. Nota che molti dei pezzi che normalmente crei per avere il supporto nativo in HTML5.
L'utilizzo del framework 52 ti costringerà a creare le tue pagine usando questi nuovi elementi e sarà quindi un ottimo modo per entrare in HTML5 quando sarà il momento.
Reset e sistema di griglia
Ci sono tre file CSS inclusi nel framework: general, grid e reset.Il file di reset è piuttosto semplice ed è essenzialmente una versione modificata del popolare reset Eric Meyer CSS. Questa versione è stata creata da Richard Clark.
La griglia CSS è lì perché, come ogni buon framework, questo usa le griglie pesantemente.
Non c'è assolutamente nulla di rivoluzionario qui, è fondamentalmente un sistema a 16 colonne a 960 griglie esattamente come se foste abituati ad usare altri framework. Le colonne disponibili variano in larghezza da 40 px fino a 940 px e ciascuna contiene un margine sinistro e destro di 10 px.
CSS generale
Il CSS primario contiene un numero di stili utili per iniziare. Tutto nell'HTML menzionato sopra ha stili specifici in atto insieme a una serie di altri elementi di base come le classi di clearing e le virgolette.
Una caratteristica chiara qui è che è possibile impostare il colore di selezione di una pagina web per ignorare il browser predefinito. Ciò significa che quando selezioni una riga di testo, l'evidenziazione sarà il colore che definisci.
Negli stili fieldset troverai alcuni stili per creare quegli angoli arrotondati CSS3 sempre più popolari.
Infine, nel CSS incorporato contenuto nel file HTML, vedrai un po 'più di CSS3 applicato per creare ombre.
E c'è dell'altro
Come ho detto sopra, il framework 52 è sicuramente ancora nelle fasi iniziali e continuerà a crescere e migliorare. Ad esempio, la versione beta più recente ha aggiunto il supporto per elementi canvas e video.
Mi piacerebbe vedere il CSS per gli angoli arrotondati e le ombre estratte da elementi specifici in classi generali o elementi di esempio più evidenti in modo da non dover andare a cercarli nel codice se si desidera utilizzarli come antipasto per i tuoi stili
Oltre a questo, penso che il framework sia partito alla grande e posso davvero vedermi costruirci sopra per creare qualcosa che sia perfetto per il mio uso personale.
Cosa cambieresti?
Lascia un commento qui sotto e dicci cosa pensi del framework 52. Cosa ti piace di questo? Cosa odi? Gli sviluppatori sono alla ricerca di suggerimenti per le funzionalità da aggiungere, quindi assicurati di elencare quelli che ti vengono in mente!