Menu icon Foundation
How to customize Foundation 6 installation (components selection)

Hi,

I have followed the installation instructions (foundation.zurb.com/sites-6-docs/installation.html) to download Foundation 6. So I did as follows:

Open Command Line // Yep, I'm on Windows..
cd [all-projects-folder]
npm install --global [email protected]
foundation new // Select Foundation for Sites -> [project-name] -> Advanced: includes a static site generator, and Sass/JS compilers
cd [project-name]
foundation watch // Afterwards you can see the actual website in the browser at: http://localhost:8000

I would like to customize the installation, so for example I want to:


  1. CSS Components add/removal: remove CSS styles for Tables

  2. SASS settings change: change breakpoints so the maximal content width is 1000 px (large) as in Foundation 5

  3. JS Components add/removal: include Accordion only

1. CSS Components add/removal

By trial and error I have found I can:


  1. Go to: [my-project-folder]\src\assets\scss\app.scss

  2. remove line: @include foundation-everything;

  3. add/remove any CSS components with following lines:



@include foundation-global-styles;
@include foundation-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-accordion;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
// @include foundation-joyride;
@include foundation-label;
@include foundation-media-object;
@include foundation-menu;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;

2. SASS settings change

When I open: [my-project-folder]\src\assets\scss\_settings.scss and uncomment some lines there I get error that some SASS $variables are missing.

It probably needs to somehow import the _global.scss first?

3. JS Components add/removal

I'm totally baffled here as there is only the classis
$(document).foundation();

at [my-project-folder]\src\assets\js\app.js, but the compiled app.js is 456 KB and ALL the JS features works, so it's somehow loading ALL the JS libraries.

How can I decide to load only some of the JS libraries?

EDIT: I found out the JS components can be selectively loaded like this:


  1. Copy components from [my-project-folder]\node_modules\foundation-sites\js\ (ignore subfolder foundation, use only the components from root) to [my-project-folder]\dist\assets\js\.

  2. Check prerequisites for every component in Foundation docs (files with .util. in name) and add those to the folder as above.

  3. Load new JS files in your project:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>;
<script src="assets/js/foundation.core.js"></script>
<script src="assets/js/foundation.util.keyboard.js"></script>
<script src="assets/js/foundation.util.size-and-collision.js"></script>
<script src="assets/js/foundation.util.triggers.js"></script>
<script src="assets/js/foundation.util.mediaQuery.js"></script>
<script src="assets/js/foundation.accordion.js"></script>
<script src="assets/js/foundation.reveal.js"></script>
<script>$(document).foundation();</script>
</body>
</html>

foundation-6componentsinstallationsettings

Hi,

I have followed the installation instructions (foundation.zurb.com/sites-6-docs/installation.html) to download Foundation 6. So I did as follows:

Open Command Line // Yep, I'm on Windows..
cd [all-projects-folder]
npm install --global [email protected]
foundation new // Select Foundation for Sites -> [project-name] -> Advanced: includes a static site generator, and Sass/JS compilers
cd [project-name]
foundation watch // Afterwards you can see the actual website in the browser at: http://localhost:8000

I would like to customize the installation, so for example I want to:


  1. CSS Components add/removal: remove CSS styles for Tables

  2. SASS settings change: change breakpoints so the maximal content width is 1000 px (large) as in Foundation 5

  3. JS Components add/removal: include Accordion only

1. CSS Components add/removal

By trial and error I have found I can:


  1. Go to: [my-project-folder]\src\assets\scss\app.scss

  2. remove line: @include foundation-everything;

  3. add/remove any CSS components with following lines:



@include foundation-global-styles;
@include foundation-grid;
@include foundation-typography;
@include foundation-button;
@include foundation-forms;
@include foundation-visibility-classes;
@include foundation-float-classes;
@include foundation-accordion;
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-button-group;
@include foundation-callout;
@include foundation-close-button;
@include foundation-drilldown-menu;
@include foundation-dropdown;
@include foundation-dropdown-menu;
@include foundation-flex-video;
// @include foundation-joyride;
@include foundation-label;
@include foundation-media-object;
@include foundation-menu;
@include foundation-off-canvas;
@include foundation-orbit;
@include foundation-pagination;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-sticky;
@include foundation-reveal;
@include foundation-switch;
@include foundation-table;
@include foundation-tabs;
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-tooltip;
@include foundation-top-bar;

2. SASS settings change

When I open: [my-project-folder]\src\assets\scss\_settings.scss and uncomment some lines there I get error that some SASS $variables are missing.

It probably needs to somehow import the _global.scss first?

3. JS Components add/removal

I'm totally baffled here as there is only the classis
$(document).foundation();

at [my-project-folder]\src\assets\js\app.js, but the compiled app.js is 456 KB and ALL the JS features works, so it's somehow loading ALL the JS libraries.

How can I decide to load only some of the JS libraries?

EDIT: I found out the JS components can be selectively loaded like this:


  1. Copy components from [my-project-folder]\node_modules\foundation-sites\js\ (ignore subfolder foundation, use only the components from root) to [my-project-folder]\dist\assets\js\.

  2. Check prerequisites for every component in Foundation docs (files with .util. in name) and add those to the folder as above.

  3. Load new JS files in your project:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>;
<script src="assets/js/foundation.core.js"></script>
<script src="assets/js/foundation.util.keyboard.js"></script>
<script src="assets/js/foundation.util.size-and-collision.js"></script>
<script src="assets/js/foundation.util.triggers.js"></script>
<script src="assets/js/foundation.util.mediaQuery.js"></script>
<script src="assets/js/foundation.accordion.js"></script>
<script src="assets/js/foundation.reveal.js"></script>
<script>$(document).foundation();</script>
</body>
</html>

omar jebari over 2 years ago

Absolutely ridiculous how little information is on the ZF website regarding this. Well done for adding it in!

kenan xin over 2 years ago

About selective javascript loading , you may find this useful https://github.com/zurb/foundation-sites/blob/develop/js/entries/foundation.js

Rafi Benkual almost 4 years ago

Hi
This is all great information! Since this is a beta, some things are still being finalized.

You are right about the importing of individual Sass modules.
You are right about loading plugins individually.

In the _settings.scss, the global section should be up top. We just made that update so the 6.0.0 version will have it.