Menu icon Foundation
How to customize Foundation with Sass

To be honest, I am quite frustrated with the new release. Mainly because I don't understand you to customize Foundation with Sass. In Foundation 4 I had to edit _settings and had all the information in one huge file to edit. But know with Bower I am a bit lost. A little getting-started-guide would be great. Here are my questions:

I initialize a new foundation-project. Now I want to pull in some modules like top-bar, the grid and some other stuff. How do i do this? Have I got to delete

@import "foundation";
            

         

in app.scss? And paste this code into it?

// Make sure the charset is set appropriately
@charset "UTF-8";

// Behold, here are all the Foundation components.
@import
  "foundation/components/accordion",
  "foundation/components/alert-boxes",
  "foundation/components/block-grid",
  "foundation/components/breadcrumbs",
  "foundation/components/button-groups",
  "foundation/components/buttons",
  "foundation/components/clearing",
  "foundation/components/dropdown",
  "foundation/components/dropdown-buttons",
  "foundation/components/flex-video",
  "foundation/components/forms",
  "foundation/components/grid",
  "foundation/components/inline-lists",
  "foundation/components/joyride",
  "foundation/components/keystrokes",
  "foundation/components/labels",
  "foundation/components/magellan",
  "foundation/components/orbit",
  "foundation/components/pagination",
  "foundation/components/panels",
  "foundation/components/pricing-tables",
  "foundation/components/progress-bars",
  "foundation/components/reveal",
  "foundation/components/side-nav",
  "foundation/components/split-buttons",
  "foundation/components/sub-nav",
  "foundation/components/switch",
  "foundation/components/tables",
  "foundation/components/tabs",
  "foundation/components/thumbs",
  "foundation/components/tooltips",
  "foundation/components/offcanvas",
  "foundation/components/visibility";

            

         

And if yes, what then? Have I got to edit _settings.scss? And when yes, how...

Is there any guide to customize foundation 5 in a structured way? I am right, not touching anything in the bower_components-folder right?

Please help :)

PS: And by the way... the code pulls all components in... but why for example is top-bar listed? it is in foundation/components/offcanvas but why???

Sassscss

To be honest, I am quite frustrated with the new release. Mainly because I don't understand you to customize Foundation with Sass. In Foundation 4 I had to edit _settings and had all the information in one huge file to edit. But know with Bower I am a bit lost. A little getting-started-guide would be great. Here are my questions:

I initialize a new foundation-project. Now I want to pull in some modules like top-bar, the grid and some other stuff. How do i do this? Have I got to delete

@import "foundation";
            

         

in app.scss? And paste this code into it?

// Make sure the charset is set appropriately
@charset "UTF-8";

// Behold, here are all the Foundation components.
@import
  "foundation/components/accordion",
  "foundation/components/alert-boxes",
  "foundation/components/block-grid",
  "foundation/components/breadcrumbs",
  "foundation/components/button-groups",
  "foundation/components/buttons",
  "foundation/components/clearing",
  "foundation/components/dropdown",
  "foundation/components/dropdown-buttons",
  "foundation/components/flex-video",
  "foundation/components/forms",
  "foundation/components/grid",
  "foundation/components/inline-lists",
  "foundation/components/joyride",
  "foundation/components/keystrokes",
  "foundation/components/labels",
  "foundation/components/magellan",
  "foundation/components/orbit",
  "foundation/components/pagination",
  "foundation/components/panels",
  "foundation/components/pricing-tables",
  "foundation/components/progress-bars",
  "foundation/components/reveal",
  "foundation/components/side-nav",
  "foundation/components/split-buttons",
  "foundation/components/sub-nav",
  "foundation/components/switch",
  "foundation/components/tables",
  "foundation/components/tabs",
  "foundation/components/thumbs",
  "foundation/components/tooltips",
  "foundation/components/offcanvas",
  "foundation/components/visibility";

            

         

And if yes, what then? Have I got to edit _settings.scss? And when yes, how...

Is there any guide to customize foundation 5 in a structured way? I am right, not touching anything in the bower_components-folder right?

Please help :)

PS: And by the way... the code pulls all components in... but why for example is top-bar listed? it is in foundation/components/offcanvas but why???

Mihai Stroe almost 6 years ago

I've only started working with Foundation on v5 so I have no clue how 4 went unfortunately. Glad you found that helpful though.

Moritz »mo.« Sauer almost 6 years ago

@Mihai Thank you very much for taking your time. So, I understood everything the right way. Some suggestions to help everybodys workflow:

In foundation 4 I found it superconvenient that I just had to comment out

@import "foundation";

and could pull in the partials I needed right away because they were already in the source code. So it was very quick and nice.

Now I have to open other files or the documentation to get the snippets like for example

@import "foundation/components/typography";

and than I have to grab even more code from the typography-section of the documentation because in the settings file the variables for the headers are gone.

This is really confusing and started my confusion in the first place.

Nevertheless: THANK YOU for the framework. Maybe in the next iteration you get some of this comfortable old stuff back into the new f5 :)

Mihai Stroe almost 6 years ago

Git is where the files are copied from and since it's an install requirement then I'd say it's needed.

Francesco Pensabene almost 6 years ago

@Mihai

thankyou I will look into it.

Just a question about updates and the git repo -> inside the project folder there's a git repo is this responsible/needed to run updates via bower?

I say this because I use foundation to make templates in expressionengine and i always use a git repo so the repo inside F5 is a potential problem/complication

Thankyou!
Francesco

Mihai Stroe almost 6 years ago

@Francesco

Yes, "foundation/settings"; is in bower_components but if you'll look at it and the one in your scss folder you'll see they're the same exact file. Again, don't modify anything in bower_components because your changes will be overwritten by default files if you update Foundation at any point.

Take a look at the link I posted in the answer above, hopefully that will clarify further.

Francesco Pensabene almost 6 years ago

@Mihai

Please look here:
http://foundation.zurb.com/forum/posts/513-adding-compass-to-new-project

I asked zurb how to add compass styles to a foundation 5 project they responded in the above thread
but at hte end they said to change

@import "settings";

to

@import "foundation/_settings";

from what I have undestood this is the _settings file under bower_components so this
was the only _settings file to edit...

what do you think about it?

bye
Francesco

Francesco Pensabene almost 6 years ago

@Mihai

thank you very much!!!!

bye
Francesco

Mihai Stroe almost 6 years ago

@Francesco

It isn't a good idea to edit any files inside of the bower_components directory since they would be overwritten in case of an update, that's why there's a settings partial inside of the scss folder. That's the one you're supposed to modify.

Mihai Stroe almost 6 years ago

If you want to use _settings then you shouldn't delete it from app.scss, leave that line as it is. If you delete the line, the settings partial won't be imported anymore. For the rest you are correct, @import "foundation"; imports all of the foundation partials but if you want to import them individually then you would do as you did above. Remember to import settings before the other foundation things.

Now below all of that you can create and begin importing any custom partials which would be your custom scss/overrides.

I've answered to a similar topic which you can read about here:

http://foundation.zurb.com/forum/posts/277-custom-css-with-sass

Francesco Pensabene almost 6 years ago

In foundation 5 you create a new project with:

foundation new PROJECT_NAME

then all the files are created for you.

you can put you css styles in scss/app.scss
and run the command
compass watch
to have the sass compiled.

As I've understood you can override some default behaviours editing
bower_components/foundation/scss/foundation/_settings.scss
(uncomment and change values there)

for the rest i'm tryng to learn.... :-)