Come sai, non è il momento della nascita di Internet e le persone hanno quasi dimenticato i siti Web, con testo in un solo paragrafo e alcuni collegamenti ipertestuali. Se vuoi andare avanti con gli attuali standard web, devi rendere il tuo sito web piacevole piuttosto che francamente visualizzabile. Indipendentemente dal linguaggio di codifica come HTML or PHP utilizzato per costruire l'interfaccia utente, CSS sarà il tuo strumento per rendere elegante la pagina web. Quando confrontiamo una pagina web con un corpo umano, l'HTML funziona come le tue ossa mentre il CSS è qualcosa vicino alla pelle e ai muscoli, fatto per dare forma e struttura.
Proprio come tutte le altre cose nel mondo del design e dello sviluppo, anche CSS ha acquisito aggiornamenti minori e maggiori che lo rendono adatto a raggiungere CSS3, che è la coppia migliore quando HTML5 accompagna il viaggio. Tuttavia, la stella del gioco è la tendenza o il modello CSS che scegli di utilizzare! Come sai, ci sono vari framework CSS disponibili per te con diversi aspetti e funzionalità come bootstrap, ZURB ecc. Quello che vi presentiamo oggi è CSS puro, un CSS Framework basato semplicemente su coolgrid di Yahoo!, il principale gigante di Internet. Fortunatamente, puoi utilizzare questo framework senza pagare un solo centesimo.
CSS puro
Potresti aver utilizzato altri framework come Zurb Foundation per creare pagine Web e siti Web attraenti. L'uso del framework CSS è molto utile perché puoi ottenere modelli per vari elementi nella pagina come divisioni, moduli, menu ecc. Questa è la stessa funzione di CSS puro di Yahoo! Invece di scaricare e aggiungere file alla cartella "CSS", Pure CSS può funzionare come Google Fonts, dove devi aggiungere una singola riga di codice per l'integrazione del framework in HTML. Poiché il framework è più recente, è completamente reattivo. Inoltre, Pure CSS è uno dei framework più semplici che puoi trovare nel web. Puoi utilizzare il framework per alimentare il tuo sito Web o scaricare moduli specifici per sezioni di stile come moduli, menu, ecc. Ci sono sei moduli individuali disponibili gratuitamente. I moduli di Pure CSS sono i seguenti, che sembrano essere di dimensioni leggere (meno di 2 Kb) quando vengono estratti.
- Base: Elementi della pagina Web di base come titoli, paragrafi, tipografia
- Pulsanti: Vari pulsanti con effetti come attivo, al passaggio del mouse ecc.
- tabelle: Tavoli base disponibili con bordo ecc.
- Menù: Orizzontale, verticale, a discesa.
- griglie: Griglie reattive.
- Le forme: Input raggruppato, multicolonna ecc.
GUARDA ANCHE: Bookmarklet di motivi sottili: anteprima dei motivi di sfondo sul tuo sito web.
Perché usare Pure CSS?
- Codice meno inutilizzato: È molto normale che tu possa vedere un gran numero di codice non utilizzato quando usi altri framework CSS. D'altra parte, nel caso di Pure CSS, non dovrai mai affrontare questo problema perché puoi utilizzare la versione specifica del framework e utilizzarla per lo styling di sezioni specifiche della pagina web. Ovviamente, meno codice sembra anche fantastico!
- Tutto dentro: Almeno in alcuni altri framework, utilizzano plug-in e codici JavaScript di terze parti per migliorare l'impatto visivo. Tuttavia, Pure CSS non utilizza alcun tipo di plug-in JS ad eccezione del caso di quello utilizzato nell'effetto a discesa. Meno codice di terze parti può fornire caricamenti di pagina più rapidi e precisione nel codice.
- Modelli: Se non sei un esperto per progettare il tuo layout per il tuo sito web, Pure CSS può aiutarti in quella sezione. Il sito Web contiene una serie di esempi di layout, siti Web corrispondenti con intenzioni diverse come marketing, landing page ecc.
- Costruttore di pelle: Nel caso in cui i modelli e gli stili possano soddisfare il designer creativo che è in te, puoi utilizzare lo skin builder di Pure CSS per creare la tua skin. Come puoi intuire, lo skin builder non considera la tua esperienza a livello di codifica.
GUARDA ANCHE: Caratteri delle icone: pro e contro del Font Awesome Generator.
Utilizzo di CSS puro
Come specificato in precedenza Pure CSS, ha molte caratteristiche favorevoli rispetto ad altri framework. Ricordando quanto detto prima, puoi utilizzare Pure CSS attraverso lo stesso metodo di Google Fonts. Devi aggiungere una singola riga di collegamento al file esterno per portare stile alla tua pagina web. Questa funzione è molto utile quando devi creare pagine web con un singolo file e quando non hai abbastanza spazio per mettere tutti i file css (Immagino che questo non accadrà mai). Come Yahoo! gira la ruota del progetto il progetto, non si vuole tendere su errori di caricamento o guasti tecnici.
Se desideri utilizzare i modelli CSS completi di Pure CSS, puoi aggiungere il seguente codice alla pagina Web principale. Puoi anche fare clic sul collegamento al file CSS e scaricare il file CSS per utilizzarlo.
[html]
[/ Html]
Nel caso, se desideri semplicemente utilizzare versioni CSS specifiche come menu, moduli, ecc., sono disponibili codici speciali insieme a file CSS dedicati. L'elenco degli URL è il seguente:
Anche l'utilizzo dello skin builder di Pure CSS è un compito più semplice perché è possibile controllare le proprietà degli elementi utilizzando i pulsanti di controllo intuitivi della pagina skin builder. Tuttavia, ti consigliamo di scaricare i file CSS per comprendere i nomi degli elementi. Come abbiamo detto, mettere questi file di meno di 2 Kb non consumerà il tuo spazio su disco.
Il sito Web di Pure CSS è impostato in modo tale che anche un principiante possa inserire elementi basati su Pure CSS nei propri siti Web. Puoi vedere una semplice barra laterale sul lato sinistro, che elenca sezioni come moduli, pulsanti, ecc. In ogni pagina, sono disponibili anteprime insieme al codice HTML per portare quell'effetto nel tuo sito web. Quindi, è molto facile inserire tali elementi nella tua pagina web. Di seguito sono mostrati l'anteprima e il codice di un singolo modulo di accesso.
Conclusione
Analizzando tutte le funzionalità di Pure CSS, questo è uno dei contributi ottimali di Yahoo! per progettare il mondo. Yahoo! L'interfaccia utente, comunemente nota come YUI, supporta tutte le stringhe collegate a Pure CSS, rendendo il framework il migliore quando c'è un confronto. Oltre a utilizzare elementi preimpostati, puoi anche personalizzare Pure CSS. Devi portare te stesso al sito Web Pure CSS per utilizzare e imparare di più sul framework semplicemente compatto. Facci sapere la tua opinione su questo framework dopo aver verificato gli esempi e averlo utilizzato sul tuo progetto.
Rakesh Kumar
Grazie per aver pubblicato questa meravigliosa recensione di pure css. Dal momento che sto cercando di sviluppare i miei temi wordpress per la comunità, penso che questo nuovo css di yahoo.com possa aiutarmi molto.
Hari
Lo trovo davvero molto utile. Esploreremo ciascuno di loro più tardi.
Cassie
Oh. Questo è davvero interessante. Grazie per aver condiviso queste informazioni.
Raimondo Sam
Consiglieresti Pure su Bootstrap o Foundation a questo punto? Ho trovato Bootstrap un po' meno documentato in modo ottimale come utente per la prima volta.
Sajesh
Ciao Abhijith N Arjunan, devo dirti che hai fatto un ottimo lavoro e grazie per aver illuminato le mie conoscenze e abilità.
Santosh
Ottimo articolo Abhijit. Ho usato PureCSS per creare un tema per un nuovo sistema di gestione dei contenuti chiamato PyroCMS. Dai un'occhiata a [PyroPure]).
È stato molto divertente sviluppare il tema. Penso che fosse molto più leggero di altri framework là fuori. Anche lo stile è molto personalizzabile.
Erwin
Wow .. Questo è qualcosa che è interessante da imparare, so di non avere talento nella programmazione e nel design, ma è stato interessante da fare. Il PureCSS probabilmente è qualcosa di cui ho bisogno, molto.
Adam
Ciao, ho usato la purezza (PureCss) di Yahoo su 3 progetti ed è davvero un fantastico framework leggero per così dire, rispetto a Bootstrap o alla fondazione, il suo obiettivo è che la sua luce e riporti il design allo sviluppatore e si basi sul kit dell'interfaccia utente da 300 kb che non usi comunque il 70% degli elementi, e se togli parti da Bootstrap ha ancora bisogno di Java, è ancora nella sezione 200kb. Per non parlare di tutti i siti Web che sembrano Bootstrappy, motivo per cui non userò mai Bootstrap per costruire un sito Web o una fondazione Zurb, sono tutti pesanti e devi usare la loro griglia a 12 colonne che è diventata davvero noiosa. Vedo siti Web che sembrano tutti belli e interessanti, tuttavia sembrano così squadrati e ben fondati Bootstrap, Yahoo PureCss è un fantastico kit di interfaccia utente leggero, facile da usare, modifica e, soprattutto, funziona molto velocemente con WordPress come tema! L'ho usato per 4 progetti WordPress con YUI PureCss e il cliente è rimasto stupito dopo il passaggio da Bootstrap, il primo avviso è stata la velocità del sito, il secondo il bellissimo design FLAT di default.