Как добавить или изменить свойства CSS для обмена коротким кодом с помощью Foundation 5

Question

Я пытаюсь выучить Фонд 5 и экспериментирую с Interchange.

Я использовал предоставленный краткий код по умолчанию и успешно получил свои изображения для обмена на макет.

Мне интересно, возможно ли изменить атрибуты CSS, такие как изменение полей или цветов границ (например), на изображения, которые переключаются, поэтому я предполагаю, что это может быть что-то добавленное к короткому коду обмена?

Я попытался добавить свойства CSS в таблицу стилей, а именно:

div.small-12 div.logo img {border:1px solid blue;}

div.medium-6 div.logo img {border:1px solid red;}  

Результатом всегда является последнее объявление. Может быть, это мой CSS.

В любом случае, любая обратная связь будет принята с благодарностью.

Answer 1

Ваш CSS сделает эту работу, если Foundation добавит / удалит классы к элементам в HTML - но это (в основном) работает наоборот - вы добавляете классы к элементам, и Foundation использует некоторый (сложный) CSS для их стилизации.

То, чего вы хотите, все еще может быть достигнуто с помощью "медиа-запросов", которые использует фонд:

Предполагая, что вы не изменили мультимедийные запросы Foundation по умолчанию, следующий CSS может выполнить работу для маленьких и средних экранов:

 @media only screen and (max-width: 40em) {
        img.my_class {border:1px solid blue;}
 }

/* ... will apply blue border on small screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
        img.my_class {border:1px solid red;}
}

/* ..will apply a red border for medium screens */

.. затем примените имя класса my_class к img элемент в вашем HTML

Я бы порекомендовал посмотреть на SASS (если вы еще этого не сделали) - это делает такие вещи намного проще:) есть несколько хороших видео, которые помогут, на веб-сайте Фонда.