csszurb-foundationinterchange

How to add or modify css properties to interchange short code using Foundation 5


I am trying to learn Foundation 5 and am experimenting with Interchange.

I used the default short code provided and have successfully gotten my images to swap per layout.

I am wondering if it is possible to change the CSS attributes such as modify margins or border colors (for example) to the images that are being switched, so I guess it might be something added to the interchange short code?

I tried adding CSS properties to stylesheet, i.e:

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

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

The result is always last declaration. Maybe it's my CSS.

At any rate any feedback would be greatly appreciated.


Solution

  • Your CSS would do the job if Foundation added/removed classes to elements in HTML - but it (mostly) works the other way round - you add the classes to elements, and Foundation uses some (complex) CSS to style them.

    What you want can be still achieved tho - using the 'media queries' that foundation uses:

    Assuming you haven't altered the default Foundation media queries, the following CSS may do the job for small & medium screens:

     @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 */
    

    .. then apply the class name my_class to the img element in your HTML

    I would recommend looking at SASS (if you haven't already) - it makes doing these type of things much more simple :) theres a few good videos that will help, on the Foundation website