Menu icon Foundation
Docs say to change _settings.scss but should it be _grid.scss instead?

Your document on this page http://foundation.zurb.com/docs/components/grid.html says to change the grid size via the _settings.scss file. But I have it working when I change the actual _grid.scss file. The settings file has everything commented out.

Which brings me to my next point. When should one use the settings file at all? As well, is there a way to pick from the app folder that is what components that are to be included per project. how is that done exactly in sass?

Thanks for the help.

Customize with Sass
Customizing the grid is easy with the Sass variables provided in the _settings.scss file.

SCSS

$row-width: rem-calc(1000);
$column-gutter: rem-calc(30);
$total-columns: 12 ;
            

         

Sassgrid

Your document on this page http://foundation.zurb.com/docs/components/grid.html says to change the grid size via the _settings.scss file. But I have it working when I change the actual _grid.scss file. The settings file has everything commented out.

Which brings me to my next point. When should one use the settings file at all? As well, is there a way to pick from the app folder that is what components that are to be included per project. how is that done exactly in sass?

Thanks for the help.

Customize with Sass
Customizing the grid is easy with the Sass variables provided in the _settings.scss file.

SCSS

$row-width: rem-calc(1000);
$column-gutter: rem-calc(30);
$total-columns: 12 ;
            

         
Karl Ward over 5 years ago

The _settings.scss file basically includes all settings from all the separate component files. They are commented out by default, because Foundation is using default settings applied directly in each component file. It is recommended that make changes by uncommenting and applying settings directly in the _settings.scss file, because this will be your Foundation configuration. Not only will it be much easier for you to manage all settings in a single file, but if you are going to upgrade Foundation, you can normally just keep your custom _settings.scss file ...

Settings that you uncomment and apply in _settings.scss, will overwrite defaults set separately in the component files, which preferably should remain untouched.

In your foundation.scss file, you can basically remove (or uncomment) the elements you are not using. Keep in mind, this is only for the Foundation CSS, and will not automatically remove elements from the Foundation JS.

@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/top-bar",
  "foundation/components/type",
  "foundation/components/offcanvas",
  "foundation/components/visibility";

Christian Matthias over 5 years ago

Ok which settings file should I use... Apparently there are many of them. Should it be the one in the app folder or the one on the root scss folder... I believe the one in the app folder I changed and it didn't do anything. As well, I found the foundation file scss in the bower folder.... is this the one I alter for foundation.scss?

Wait i might be wrong... i think i tried editing the root scss folder settings... should it all be from the app directory...

Christian Matthias over 5 years ago

Ok I looked... everything that is altered needs to be in that app folder... that was the confusion for me. As well, the app.scss doesn't have the file listings like you have above. they are in the scss folder app.scss file but not the one where you need to make changes.

her is the code I added if it is to be changed. I don't know why you need the global but that is what the FAQ said to do.

@import "normalize";
@import "settings";
@import "foundation";

// Or selectively include 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/top-bar",
//   "foundation/components/type",
//   "foundation/components/offcanvas",
//     "foundation/components/visibility",

//   "foundation/components/global";  // Uncomment if you are choosing which components to include in your project