it.hideout-lastation.com
Paradiso Per Designer E Sviluppatori


Geomicons - Un set di icone SVG con codice mano unico

Le icone Web stanno rapidamente diventando la norma per il web design moderno. Sono enormi risorse per i web designer in quanto queste icone possono essere personalizzate tramite CSS e ridimensionate senza alcuna perdita di qualità.

Ma alcuni pacchetti di icone possono sembrare gonfiati e troppo grandi per i siti più piccoli. Ecco dove Geomicons brilla davvero.

Si tratta di un icon pack personalizzato con codifica a mano in esecuzione su SVG . Puoi incorporare le icone tramite gli script JS o come file SVG diretti nella tua pagina. In ogni caso, sono vettori bellissimi e super facili da restyling.

La pagina principale di Geomicons presenta una demo completa di tutte le icone. Sono piuttosto semplici e seguono il tradizionale stile di design piatto a un colore che tutti conosciamo.

Ma le loro informazioni di installazione sono certamente carenti nella pagina demo. Se vuoi sapere come impostarlo devi visitare il repository GitHub per istruzioni.

Per impostazione predefinita, questa libreria presuppone che tu stia lavorando con CSS / JS per avere queste icone incorporate direttamente negli elementi di pagina. Tuttavia, quando scarichi le icone da GitHub ottieni tutti i file SVG grezzi che puoi aggiungere direttamente in HTML.

L'unico problema è che gli SVG grezzi richiedono più modifiche per cambiare i colori, mentre la rotta JS / CSS ti dà il controllo sui colori tramite il codice.

Basta aggiungere lo script geomicons.min.js nell'intestazione e passare l'attributo icona dati in elementi HTML. Queste icone verranno incorporate automaticamente che potrai quindi manipolare usando le classi CSS.

Un'altra cosa che mi piace davvero di Geomicons è il supporto per Node. Ecco uno snippet di esempio dal repository GitHub:

 var geomicons = require ('geomicons-open'); var pathData = geomicons.paths.heart; // Restituisce il valore dell'attributo d del percorso var svgString = geomicons.toString ('heart'); // Restituisce una stringa SVG 

Se non hai familiarità con Node, probabilmente non avrai mai bisogno di usare nessuno dei frammenti del Nodo. Lo stesso vale per la versione React.js di queste icone.

Avere ancora il supporto per i principali framework è un grosso problema. È più evidente che i Geomicons sono pensati per supportare qualsiasi tipo di sito web concentrandosi innanzitutto sulle prestazioni.

Per dare a queste icone una corsa di prova, puoi copiare una copia tramite npm o scaricarla direttamente tramite GitHub.

C'è anche un iconset di contorno chiamato Geomicons Wired che potresti voler testare.

Ad ogni modo, questo è un set di icone geniale per i web designer minimalisti . Una scelta perfetta per ottimizzare il tuo sito con bellissime icone riducendo al contempo i tempi di caricamento totali della pagina.

Immagini responsive semplificate con ResponsifyJS

Immagini responsive semplificate con ResponsifyJS

Il web moderno dovrebbe essere al 100% reattivo e le nuove biblioteche stanno rendendo questo sempre più possibile.Con plug-in gratuiti, come ResponsifyJS, è ancora più semplice far funzionare i tuoi siti web su tutti i dispositivi. Questo plugin jQuery gratuito prende un contenitore di immagini e riorganizza dinamicamente in base alle diverse dimensioni dello schermo.Po

(Consigli tecnici e di design)

Google lancia importanti aggiornamenti di integrazione AMP

Google lancia importanti aggiornamenti di integrazione AMP

Nel 2015, Google ha cercato di affrontare il problema di velocità che molti siti Web hanno quando vengono visualizzati tramite dispositivo mobile. A tal fine, Google ha sviluppato la piattaforma AMP (Accelerated Mobile Pages), un'iniziativa open source che consente agli editori di offrire una versione del loro sito che è rimossa dagli script e dalle estensioni di terze parti, offrendo agli utenti di dispositivi mobili un'esperienza più rapida.Me

(Consigli tecnici e di design)