Share
Cosa starai creandoMentre Bootstrap ha acquisito un'enorme quantità di informazioni sul Web, può mettere un po 'di carico sulle prestazioni sui siti che potrebbero non essere necessari per il tuo prossimo progetto. Pure.css è il framework responsive di Yahoo; offre un'alternativa minimalista, ben documentata e flessibile.
In questo tutorial, presenterò Pure, "un insieme di moduli CSS reattivi che puoi utilizzare in ogni progetto web". Esamineremo il set di funzioni e i vantaggi dell'utilizzo di Pure e quindi illustreremo alcuni esempi di utilizzo di base.
Se hai richieste per esercitazioni future o domande e commenti su oggi, per favore pubblicali qui sotto. Puoi anche raggiungermi su Twitter @reifman direttamente.
Pure offre tutte le funzionalità comuni di cui hai bisogno in un framework di web design standard. Quindi, che tu stia creando un tema per WordPress o un tuo sito web personalizzato, potrebbe essere una buona opzione.
Per i project manager, è di solito fondamentale che i progetti dei clienti siano costruiti con strumenti standard che possano essere facilmente compresi e mantenuti e, soprattutto, che sia facile reclutare talenti con esperienza nella propria piattaforma. Bootstrap è perfetto per questo. Pure mi sembra abbastanza semplice da poter essere anche un buon punto di partenza.
Ecco un riepilogo dei vantaggi e delle funzionalità di Pure. Fornisce:
Accentsconagua
Tuttavia, il più impressionante, Pure.css è super piccolo, semplicemente 4,5 KB minified + gzip. Ecco quanto spazio occupano i diversi componenti di Pure nel tuo ambiente di produzione:
Pure è anche ben testato e funziona in IE 8+, Firefox, Chrome, Safari, iOS 6-8 e Android 4.x.
E puoi ancora usarlo con elementi di Bootstrap, aggiungendoli dove ti serve. Mostrerò un esempio di questo sotto.
Pure è costruito su Normalize.css, che standardizza le prestazioni del framework attraverso i browser. Normalizza fornisce un ripristino CSS predefinito che:
Il sito Web di Pure è costruito con il suo framework, quindi il suo codice minimalista e ben sviluppato porta a una guida semplice da navigare e facile da usare. Ecco un esempio del menu di sinistra di Pure in azione:
Puoi aggiungere Pure alla tua pagina tramite il CDN gratuito di Yahoo. Basta aggiungere quanto segue elemento nella tua pagina , prima dei fogli di stile del tuo progetto:
Per inizializzare la larghezza reattiva del tuo sito web, imposta un metatag per la vista sulla larghezza del tuo dispositivo:
Nella sua pagina Layout, Pure offre un campionamento di download per pagine di esempio diverse per esigenze applicative comuni:
Puoi sfogliare e scaricare tutti quelli che vuoi sperimentare o aggiungere alla tua applicazione. Questi includono:
La pagina Base fornisce un breve background sulla fondazione sotto il framework Pure, principalmente Normalize.css:
Normalize.css è un piccolo file CSS che offre una migliore coerenza tra browser nello stile predefinito degli elementi HTML. È una versione moderna, compatibile con HTML5, alternativa al tradizionale ripristino CSS.
Puoi anche caricare Normalize separatamente usando il CDN di Yahoo per l'uso indipendente:
E ci sono altre piccole funzionalità di base come le classi per dire a Pure di caricare le immagini in modo reattivo tramite viewport:
Ma ora, diamo un'occhiata ad alcuni dei layout di esempio Pure fornisce.
Le griglie sono un aspetto fondamentale dei layout del sito web che Pure rende abbastanza semplice. Ecco un rapido esempio di una griglia Pure a quattro colonne su un display desktop:
Ed ecco come si riduce su un viewport di dimensioni tablet a metà:
E infine una singola colonna su uno smartphone:
Le Pure Grids sono costituite da due tipi di classi: griglie e unità. Gli elementi figli delle div di griglia devono essere div unità. Il tuo contenuto va all'interno delle unità div. Le classi di unità sono nominate per rappresentare le loro larghezze. Ad esempio, pure-u-1-4 ha una larghezza del 25%.
Ecco il codice per il quarto reattivo sopra:
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Dolor Sit Amet
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
Lavoro proident
In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
Consectetur premuroso
Integer vitae lectus accumsan, egestas dui eget, urnamcorper urna. In feugiat tortor a turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.
Come puoi vedere sopra,
Puoi saperne di più su Pure Grids qui.
Le forme
Pure ha il supporto per l'allineamento dei campi di input all'interno dei moduli e per lo styling di campi specializzati, come ad esempio:
- Forme in linea
- Forme impilate
- Forme a due colonne
- Forme a più colonne (sopra riportati)
- Ingressi raggruppati
- Input richiesti
- Ingressi disabilitati
- Input di sola lettura
- Ingressi arrotondati
- Caselle di controllo e radio
Puoi vedere tutto questo qui descritto. Esploriamo un modulo a due colonne, a cui Pure si riferisce come un modulo allineato:
Usando il
puro-form-allineatoclasse conpuro-control-group (s), Pure garantisce che ogni set di campi sia posizionato correttamente come mostrato sopra.form>È un modo abbastanza semplice per costruire una forma altamente utilizzabile e ben strutturata.
tabelle
Pure rende abbastanza semplici anche la costruzione e la formattazione delle tabelle. Ecco un esempio di una tabella a strisce orizzontali:
Puoi vedere la tabella sopra codificata semplicemente aggiungendo
puro-table-disparirighe di classe alternate tramite il codice per modificare lo striping:
# Rendere Modello Anno 1 Honda Accordo 2009 2 Toyota Camry 2012 3 Hyundai Elantra 2010 4 Guado Messa a fuoco 2008 5 Nissan Sentra 2011 6 BMW M3 2009 7 Honda civico 2010 8 anatra Anima 2010 Ci sono un certo numero di altri esempi di tabelle mostrati qui.
menu
Anche i menu in Pure sono facilmente facilitati, tra cui:
- Menu verticale
- Menu orizzontale
- Articoli selezionati e disabilitati
- menu a discesa
- Menu verticale con sottomenu
- Menu orizzontale scorrevole
- Menu verticale scorrevole
- Menu verticale reattivo
- Menu a scorrimento orizzontale reattivo
- Menu da orizzontale a verticale reattivo
Vedi tutti i menu qui illustrati. Ecco come codificare un menu a discesa:
Fondamentalmente, è solo un
puro-menu-orizzontale'Spuro-menu-listepure-menu-item pure-menu-has-children pure-menu-allow-hovere poi un elenco di voci di menu secondarie:
- Casa
- Contatto
- cinguettio
- Blog di Tumblr
Pure fornisce JavaScript di esempio per implementare ulteriori funzioni di accessibilità all'interno dei menu.
Andare avanti
Il sito Web di Pure offre alcune guide eccellenti per la costruzione del framework:
- Utilizzo di strumenti con Pure come Bower e Grunt
- Personalizzare Pure e usare le slice del codebase da sole
- Estendere funzionalità e classi pure
E puoi esplorare combinando pezzi di Pure con Bootstrap e JavaScript. Se desideri iniziare con il minimo ingombro e lo stile minimalista di Pure, puoi comunque sfruttare varie funzionalità di Bootstrap, caricando solo ciò di cui hai bisogno.
Ecco un esempio di una finestra di dialogo modale Bootstrap in cima a Pure, che puoi vedere nella pagina di estensione di Pure:
In chiusura
Bootstrap sta diventando l'IBM dei framework web. È reattivo, è uno standard e non puoi essere licenziato per averlo scelto (in un recente contratto, abbiamo dovuto licenziare uno sviluppatore di temi per non implementare correttamente Bootstrap). Ma se vuoi qualcosa di più piccolo, più veloce e più semplice, dai un'occhiata a Pure.css.
Se ci provi, fammi sapere della tua esperienza nei commenti qui sotto. Puoi anche raggiungermi su Twitter direttamente @reifman. E puoi anche sfogliare la mia pagina di istruttori + istruttore Envato per leggere i miei altri tutorial.
Link correlati
- Il blog puro
- Pure su GitHub
- Pure: cosa, perché, e come? (Envato Tuts +)
- Confronta con Bootstrap
