Come sovrascrivere \ modificare gli stili CSS di base di Zurb Foundation?

È la prima volta che utilizzo Zurb Foundation per un progetto web. Tuttavia, non sono sicuro se sovrascrivere i loro stili con il mio su un foglio di stile separato o modificare direttamente foundation.css.Come sovrascrivere modificare gli stili CSS di base di Zurb Foundation?

Per esempio questo è il loro css nav (all'interno foundation.css):

.nav-bar { 
    background: #4D4D4D; 
    height: 40px; 
    margin-left: 0; 
    margin-top: 20px; 
    padding: 0; 
}

Se voglio cambiare il background e margin-top, posso modificare direttamente .nav-bar da foundation.css o creare il mio foglio di stile (mettere un style.css sotto foundation.css) e ignorare in questo modo:

.nav-bar { 
    background: #999; 
    margin-top: 0; 
}

è questa buona pratica? In caso contrario, quale sarebbe il modo migliore per farlo?

fonte

2012-12-10 catandmouse

È consigliabile sostituire il foglio di stile con un file .css personalizzato come descritto. In questo modo, se viene rilasciato un aggiornamento, , ad esempio una correzione di bug, è sufficiente sostituire il file foundation.css.

Se si modifica direttamente il file foundation.css e si desidera aggiornare il framework, è necessario effettuare manualmente gli aggiornamenti manualmente.

fonte

2012-12-10 14:23:54

Sono d'accordo con questo. È anche particolarmente vero se si scarica la versione css personalizzata (non la versione Sass/Compass) in quanto consente di utilizzare diverse modifiche di fondotinta quando si aggiungono/rimuovono funzioni o si modificano i colori di base utilizzati. – JAMESSTONEco

Si consiglia di leggere la documentazione sul sito Web di Zurb Foundation. La seconda best practice consiste nell'aprire 2 cartelle all'interno del download: css e js. All'interno di questo cartelle troverete:

app.css e app.js

Questi sono i file ZURB pre-fatto per voi, in modo da poter iniziare ignorando i loro stili!

Non è consigliabile toccare foundation.js o foundation.css. Non sarai in grado di effettuare l'aggiornamento per le opzioni future o potresti frenare qualcosa che non vuoi frenare. Felice codifica!

fonte

2013-03-04 20:05:12

Oppure se stai usando sass, ** app.scss ** – visyoual

In realtà, è sufficiente utilizzare il file foundation.css. Se si crea un'installazione personalizzata CSS di base, anziché utilizzare l'installazione CSS predefinita, le personalizzazioni che si indicano risiedono in questo file. Se Zurb stava per cambiare questo file per risolvere bug e aggiornamenti, questo file dovrebbe essere lo stesso per tutte le installazioni, no?

La documentazione di Zurb dice "foundation.css, è un file CSS che puoi usare nelle tue pagine se non hai bisogno di scegliere l'effettivo CSS di base sottostante."

fonte

2014-01-30 00:51:25 Malcolm

In realtà il modo migliore per sostituire gli stili su Foundation (o su qualsiasi framework principale) è utilizzare la loro versione SASS e/o Compass. (o MENO per coloro che sono sfortunati da provare a stile Bootstrap)

È molto più semplice passare attraverso il file _settings.scss per cambiare colori, altezze e punti di interruzione piuttosto che provare a scorrere migliaia di righe di codice css per essere sicuri hai scavalcato tutto il necessario.

Sì, è un po 'una curva di apprendimento per impostare tutto, ma a lungo termine ti farà risparmiare ore.

fonte

2014-03-11 15:39:42 RioBrewster

Come sovrascrivere \ modificare gli stili CSS di base di Zurb Foundation?

risposta

Problemi correlati