11 librerie Mixin per i progettisti Sass dovrebbero ottenere

Se utilizzi Sass nel tuo flusso di lavoro di sviluppo, conosci l'importanza dei mix. Quando vedi alcune cose che sono scritte ripetutamente e noiosamente in CSS, è qui che i mixin possono aiutarti a prevenire il lavoro ripetitivo. Un mixin contiene dichiarazioni CSS che puoi riutilizzare nel tuo sito.

Ci sono molti mix sono fatti dagli sviluppatori, per aiutarti quando lavori con Sass nel tuo sviluppo. La maggior parte copre cose che spesso si ripetono nei CSS. Dall'adattamento di più browser alla creazione di pulsanti, animazioni ed effetti di transizione, trova questo e altro nelle seguenti 11 librerie di mixin che dovresti ottenere per lo sviluppo di Sass.

1. Bourbon

Bourbon è una libreria Sass che contiene mixin, funzioni e addon che ti permettono di semplificare la creazione di fogli di stile per l'uso cross-browser. Per me, questo è il mixin di Sass più meraviglioso. Contiene quasi tutto ciò di cui hai bisogno per modellare il tuo sito web mantenendo il tuo foglio di stile leggero.

Controlla la documentazione completa per utilizzare ogni mixin e funzione disponibili.

2. Sass CSS3 Mixins

Sass CSS3 Mixins fornisce mixin che funzionano su diversi browser. Qui troverai una serie di mixin di best practice come sfondo, bordo, riquadro, colonna, carattere, trasformazione, transizione e animazione. È sufficiente per le tue esigenze di stile. Per usare, importa css3-mixins.scss e chiama il mixin nella tua classe CSS.

Scarica questo mixin qui.

3. Sassmatic

Vuoi filtrare la tua immagine con un effetto sbalorditivo in Sass? Sassmatic potrebbe essere quello che ti serve. È una libreria di filtri fotografici, che utilizza Sass e Compass, che offre alle tue immagini 14 effetti filtro tra cui lomo, raffreddamento, riscaldamento, seppia e altri. Puoi anche creare un filtro personalizzato combinando diversi filtri disponibili e modificare il valore come preferisci.

4. CssOwl

CssOwl fornisce mixaggi utili per impostare la posizione di un elemento (relativo o assoluto) e aggiungere il contenuto con lo pseudo-selettore ( :after e :before ). Aiuta anche quando vuoi creare elementi sprite: il mixin dà flessibilità per impostare la posizione dell'immagine nel tuo sprite. Oltre a Sass, la libreria di mixin CssOwl è disponibile anche per LESS e Stylus.

5. Punto di rottura Sass

Il punto di interruzione consente di effettuare query sui media tramite Sass in modo semplice. Con Breakpoint, è possibile creare variabili e assegnargli un valore che definisca la min-width o la min-width max-width delle query multimediali. Poiché la variabile che hai creato ha un nome significativo, puoi chiamarla facilmente per l'uso in Sass.

6. Scut

Scut contiene un insieme di mixins riutilizzabili di Sass, segnaposti, funzioni e variabili che consentono di implementare facilmente modelli di codice stile comuni. Fornisce il codice best-practice per creare materiale web come layout di pagina e in stile tipografico. È possibile ridurre la ripetizione durante la scrittura del codice riutilizzando il codice più spesso. Quindi, aiutandoti a diventare più organizzato nel processo.

7. Pulsanti

Buttons è una libreria che ti aiuta a costruire pulsanti con stili bellissimi. Otterrai stili di pulsanti predefiniti come Flat, Glow, Rounded, 3D, Border, Pill, Circle e dropdown. Per un utilizzo rapido, includi semplicemente button.css nel tuo codice HTML. Ma se vuoi personalizzare il tuo pulsante, segui questo tutorial.

8. Zafferano

Con Saffron, puoi aggiungere animazioni e transizioni CSS3 con facilità. Sono disponibili una dozzina di animazioni e transizioni, tra cui dissolvenza in apertura / chiusura, slide in / out, incremento in / out e effetti vari come scuotimento, oscillazione, rimbalzo e altri. Per usare Saffron basta includere il mixin nella dichiarazione Sass e chiamare il nome dell'effetto all'interno della tua classe CSS. Puoi ottenere Saffron installandolo usando Bower o Gem, o semplicemente scaricandolo manualmente da Github.

9. Digitare Impostazioni

TypeSettings è un tipo di toolkit per Sass. Imposta la dimensione del font in scala modulare usando em (anziché rems o pixel), ritmi verticali e titoli basati sul rapporto reattivo. Puoi installarlo anche con Bower, scaricare la versione o clonare il repository. Per maggiori dettagli, controlla la sua pagina.

10. Linea Sass

Sass Line è un mixin di Sass che ti aiuta a migliorare la tipografia. Usa l'unità di remi sul tuo font in modo che tu possa lavorarlo in proporzione alla griglia della linea di base. Sass Line utilizza un ritmo verticale preciso basato sulla griglia della linea di base e ti consente di impostare una scala modulare per ciascuno dei tuoi punti di interruzione per ottenere buone proporzioni su tutti gli aspetti del tuo sito web.

Vai qui per avere maggiori dettagli su come usarlo.

11. Andy.scss

Andy.scss è una raccolta di utili mixin di Sass, creati per aiutarti a sviluppare l'aspetto di un sito web con facilità pur mantenendo la luce. Sono disponibili dozzine di mixin Sass, dagli sfondi alle animazioni. Quasi tutte le proprietà CSS di uso comune sono trattate qui. Scaricalo da Github.

Altri messaggi su Sass:

• Iniziare con Sass
• Scavando nel Sass
• Come compilare Sass con il testo sublime
• Utilizzando Bootstrap 3 con Sass
• Come costruire una VCard online con Sass & Compass
• Preprocessori CSS Confronto: Sass vs. DI MENO
• Stili di stile sintatticamente fantastici: utilizzo di Compass in Sass
• Come convertire CSS in Sass e SCSS

20+ font gratuiti gratuiti per i progettisti

Un buon font può aggiungere molto al design in termini di profondità e creatività . Pertanto, i progettisti sono costantemente alla ricerca di caratteri freschi da aggiungere al proprio set di strumenti. In questa collezione ho selezionato i migliori font freschi e creativi del 2017 che puoi scaricare gratuitamente e usarli per rendere i tuoi progetti più accattivanti.Da

(Consigli tecnici e di design)

10+ plugin gratuiti di Photoshop per i web designer

L'uso delle estensioni di Photoshop aumenta notevolmente la sua capacità di aiutarti a progettare, ottimizzare il tuo flusso di lavoro e renderti più produttivo. Puoi utilizzare un plug-in Photoshop per velocizzare attività ripetitive o noiose come:genera lunghe ombreesportare i livelli di Photoshopconvertire PSD in CSS3convertire il testo Photoshop in SVGcostruire specifiche di progettazione in Photoshopconvertire il design skeuomorphic in design piattoCi sono molte altre estensioni di Photoshop in giro e in questo elenco ci sono 12 fantastici elementi che ti aiutano a gestire livelli, col

(Consigli tecnici e di design)