css - tutorial - que es foundation framework

¿Cómo sobrescribir/editar los estilos CSS básicos de Zurb Foundation?

Question

Es la primera vez que uso la Fundación Zurb para un proyecto web. Sin embargo, no estoy seguro de si puedo anular sus estilos con los míos en una hoja de estilos separada o directamente edito foundation.css .

Por ejemplo, este es su nav css (dentro de foundation.css ):

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

Si quiero cambiar el background y el margin-top , ¿puedo editar directamente .nav-bar desde foundation.css o crear mi propia hoja de estilo (poner un style.css debajo de foundation.css ) y anularlo así:

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

¿Es esta una buena práctica? Si no, ¿cuál sería la mejor manera de hacerlo?

Answer 1

En realidad, la mejor manera de anular los estilos en Foundation (o en cualquier marco principal) es usar su versión SASS y / o Compass. (o MENOS para aquellos desafortunados que intentan diseñar Bootstrap)

Es mucho más fácil ir a través del archivo _settings.scss para cambiar los colores, las alturas y los puntos de interrupción que intentar recorrer cientos de líneas de código css para asegurarse de que ha anulado todo lo que necesita.

Sí, es un poco una curva de aprendizaje para configurarlo todo, pero le ahorrará horas en el largo plazo.

Answer 2

En realidad, puedes usar el archivo foundation.css. Si crea una instalación personalizada de CSS de Fundación, en lugar de utilizar la instalación CSS predeterminada, las personalizaciones que indique residen en este archivo. Si Zurb iba a cambiar este archivo para corregir errores y actualizaciones, este archivo debería ser el mismo en todas las instalaciones, ¿no es así?

La documentación de Zurb dice que "foundation.css, es un archivo CSS que puedes usar en tus páginas si no necesitas separar el CSS subyacente real".

Answer 3

La mejor práctica es anular su hoja de estilo mediante un archivo .css personalizado como el que describió. De esta forma, si se lanza una actualización, por ejemplo, una corrección de error , entonces simplemente reemplaza el archivo foundation.css.

Si edita el archivo foundation.css directamente y desea actualizar el marco, entonces deberá realizar las actualizaciones manualmente.

Answer 4

La mejor práctica es leer la documentación en el sitio web de la Fundación Zurb. La segunda mejor práctica es abrir 2 carpetas dentro de su descarga: css y js . Dentro de estas carpetas encontrarás:

app.css y app.js

Estos son los archivos que Zurb pre-hizo para ti, ¡así que puedes comenzar a anular sus estilos!

No se recomienda tocar foundation.js o foundation.css. No podrá actualizar para futuras opciones o puede frenar algo que no desea frenar. Feliz Codificación!