2012-01-23 5 views
8

Hola, estoy trabajando en una nueva aplicación de rieles y recién comencé a usar Foundation.Cómo anular las propiedades de css de Zurb Foundation usando rails 3.1?

lo hice la instalación utilizando

carriles g fundación: instalar

todo está funcionando como pensábamos (quiero decir con esto puedo ver el css en mi código fuente, y también lo visual efecto de la misma; p)

apenas no entienden cómo reemplazar los valores predeterminados de propiedades de la Fundación Zurb ...

vi o nline que supongo que debo editar algunos archivos.css o.css pero aquí no parece haber ningún archivo como ese en mi carpeta de aplicaciones ...

Hice la instalación editando el archivo gemfile y luego un paquete de instalación.

aplausos

Respuesta

5

Opción 1: desde que se instaló a través de bundler (suponiendo que utilizó algo así como gem 'zurb-foundation'), no tendrán ningún archivo que se pueden editar directamente. Puede sobrescribir y modificar el estilo de la forma habitual editando app/assets/stylesheets/application.css o agregando nuevos archivos dentro del directorio. Lo recomendaría sobre la modificación de Zurb para que pueda seguir recibiendo los beneficios de poder actualizar a versiones más recientes de Zurb en el futuro sin tener que lidiar con un desastre.

Opción 2: Si usted siente que necesita más control sobre la personalización y que no está preocupado por las dificultades anteriores, se puede clonar/descarga foundation-rails y copiar los archivos en vendor/assets a su propio directorio rieles de la mismo nombre. Elimine zurb-foundation de su Gemfile, rebundle, y debería poder modificar los activos directamente en su propio proyecto.

Opción 3: Eche un vistazo a foundation-sass y pruebe Compass. No lo he investigado mucho, pero debería tener cierta cantidad de personalización a través de mixins.

+0

Thx, la opción 1 es exactamente lo que esperaba hacer. Por casualidad, ¿sabría cómo anular todos los divs (quiero agregar un borde en cada uno de ellos para que pueda entender la cuadrícula y anidar mejor). Porque el overidding div.class funciona pero no div –

+2

¿Has intentado agregar '! Important'? Por ejemplo, 'div {border: 1px solid # 000! Important; } ' –

+1

foundation_and_overrides.scss se incluye en el HTML después de application.css. Encontré que la otra respuesta sobre agregar mi CSS en foundation_and_overrides.scss funcionaba mejor, sin requerir el uso excesivo de! Important. – LeBleu

6

y sí funciona si lo hace las sustituciones en el app/assets/stylesheets/application.css

pero es mejor si lo haces en el app/assets/stylesheets/foundation_and_overrides.scss,

también en la parte superior del archivo, hay un montón de líneas comentado, con esas líneas también puedes modificar algunos atributos!

Cuestiones relacionadas