2012-01-23 5 views
8

Привет, я работал над новым рельсовым приложением, и я только начал использовать Foundation.Как переопределить свойства css Foundation css с использованием рельсов 3.1?

Я сделал установку с помощью

рельсы г основы: установка

Все работает, как espected (я имею в виду, что я могу видеть CSS в моем исходном коде, а также визуальный эффект от него; р)

Я просто не понимаю, как переопределить значения по умолчанию приличий из Zurb фонда ...

Я видел, о nline, который им должен был отредактировать некоторый файл foundation.css или app.css, но здесь, похоже, не есть какой-либо файл, подобный этому в папке приложения.

Я выполнил установку, отредактировав gemfile и установив пакет.

веселит

ответ

5

Вариант 1: Так как вы установили его через Bundler (если вы использовали что-то вроде gem 'zurb-foundation'), вы не будете иметь какие-либо файлы, которые можно редактировать непосредственно. Вы можете переопределять и стирать, как обычно, путем редактирования app/assets/stylesheets/application.css или добавления новых файлов в каталог. Я бы рекомендовал это изменить Zurb, чтобы вы могли продолжать получать преимущества от возможности обновить до более новых версий Zurb в будущем, не справляясь с беспорядком.

Вариант 2: Если вы чувствуете, что вам нужно больше контроля над настройкой и вы не беспокоитесь о вышеупомянутых подводных камнях, можно клонировать/загрузить foundation-rails и копировать файлы в vendor/assets в свой собственный каталог рельсов то же имя. Удалите zurb-foundation из вашего Gemfile, rebundle, и вы должны иметь возможность изменять активы непосредственно в своем собственном проекте.

Вариант 3: Отъезд foundation-sass и дать возможность Компас. Я не задумывался над этим, но у вас должно быть некоторое количество настроек через mixins.

+0

Thx, вариант 1 - это именно то, что я ожидал сделать. Если бы вы знали, как переопределить все div (я хочу добавить границу для каждого из них, чтобы лучше понять Grid и вложенность). Потому что div.class overidding работает, но не div –

+2

Вы пробовали добавить '! Important'? Например, 'div {border: 1px solid # 000! Important; } '. –

+1

foundation_and_overrides.scss включен в HTML после application.css. Я нашел другой ответ о добавлении моего CSS в foundation_and_overrides.scss, который работал лучше, не требуя чрезмерного использования! Important. – LeBleu

6

и да, это работает, если вы делаете ваши переопределения на app/assets/stylesheets/application.css

Но это лучше, если вы делаете это в app/assets/stylesheets/foundation_and_overrides.scss,

также в верхней части файла, есть куча строк комментариев, с этими строками вы также можете изменить некоторые атрибуты!

Смежные вопросы