Menu icon Foundation
Overriding Foundation 6 styles

Hello,

I'd like to know what is the best approach to create my own styles (or override the Foudnation ones) and be able in the future to update my current version Foundation 6.1.2 to Foudnation 6.2 or 7 without wiping the additions I made.

Long time since I don't work with Foundation, last time I edited the app.scss file and I was able to override the default styles.

Any idea? Thanks!

foundation 6stylescssoverride

Hello,

I'd like to know what is the best approach to create my own styles (or override the Foudnation ones) and be able in the future to update my current version Foundation 6.1.2 to Foudnation 6.2 or 7 without wiping the additions I made.

Long time since I don't work with Foundation, last time I edited the app.scss file and I was able to override the default styles.

Any idea? Thanks!

Jason Demitri almost 4 years ago

Do the same as you previously done.

Either create a new .scss or use the app.scss

include foundation as you usually would

@import "foundation";

Then when you upgrade only foundation as a dependency the foundation stylesheets would change but not you app.scss eg components/grid.scss or bower_components/foundation-sites/foundation.scss

To override components you can either use the settings.scss file or write your own code

@import "foundation"

.grid-frame{
border:2px solid red;
}

You can also use the mixins that each component has to build upon them into your own components

Heres an example that makes a shinny blue button :)

@import "foundation";
@import "compass";

.my-special-button{
@include button();
background-color: #1e5799; // Old browsers
@include filter-gradient(#1e5799, #7db9e8, vertical); // IE6-9
@include background-image(linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%));
}

Hope this helps

For more information read the docs on the specific component you wish to use

Ale almost 4 years ago

Hi Jason!

I will go for the option that creates a custom.scss and import it on app.scss
Very helpful, thank you!