Best practices for customizing a Foundation 6 website?

Hey Martijn, I am glad to see some treehouse community members using Foundation for sites. I can't say that I am an expert in this, but I have been using foundation since version 4, and I have built three website so far on Foundation for Sites 6 and many others on the older versions. I'll let you in on my workflow.

My approach to frameworks like Foundation is to use as much or as little as I need from it, and Foundation does a great job at that. It's extremely modular where you can select which sass components you would like to include in the app.scss file and then select which javascript modules you need in the gulp file.

The _settings.scss file works like the core theme file for the website, you can set the colors, general typography, spacing and some of the stylistic choices for the site. The first thing I do when building a website is setup the _settings.scss file to my brand style guide for the project. It doesn't give you full control over every style for each component, because some of the decisions are already made in terms on the core build and structure of the components.

The second step is to create you own components folder inside you scss directory. This should include all the custom components you build and the overrides for the components that come with Foundation. Depending on the size of the project I have the structure of my css changes. But the most common approach is to separate the core structure form the theme of each element.

So my _nav-component.scss would include the size properties and position for my nav, when the _nav-theme.scss includes the typography, colors and interaction states like hover and active styles. This might seem a bit tedious at first, but if it's a big project it's much better to separate the two. Depending on how big the project is, you might even want to separate the interaction states to a another file as well. This keeps you components reusable, so you can use them in other projects.

And on a similar note you would build your javascript side.

As far as your example about buttons. Buttons or any other component in Foundation can be used programmatically in you sass with mixins and extends.

.my-button{
    @include button-style($background, $background-hover, $color);
}

or for the orbit component like this

 .my-orbit--wrapper {
    @include orbit-wrapper;
    .my-orbit--container{
        @include orbit-container;
    }
    .my-orbit--slide{
        @include orbit-slide;
    }
    .my-orbit--caption{
        @include orbit-caption;
    }
}

If you look through the documentation you would be able to find mixins to include in you custom css and build whatever you like using all the components in Foundation under the sass reference for each component.

I hope this helps