Menu icon Foundation
foundation 5 sass turn on default grid module

Good evening,

I'm trying out foundation 5 with sass. So i I'm looking for the option to turn on a whole module like for example "grid" with all its default classes for example:

      <div class="row">
        <div class="large-4 medium-4 columns">
        </div>
        <div class="large-4 medium-4 columns">
        </div>
        <div class="large-4 medium-4 columns">
          <div class="row collapse">
            <div class="small-9 columns">
            </div>
            <div class="small-3 columns">
            </div>
          </div>
        </div>
      </div>
            

         

I already looked for it in "_settings.scss" but couldn't find the right switch. I know that i could just take everything out of the compiled .css version of foundation but i thought there might be a more elegant way to do it.

thanks!

gridSass

Good evening,

I'm trying out foundation 5 with sass. So i I'm looking for the option to turn on a whole module like for example "grid" with all its default classes for example:

      <div class="row">
        <div class="large-4 medium-4 columns">
        </div>
        <div class="large-4 medium-4 columns">
        </div>
        <div class="large-4 medium-4 columns">
          <div class="row collapse">
            <div class="small-9 columns">
            </div>
            <div class="small-3 columns">
            </div>
          </div>
        </div>
      </div>
            

         

I already looked for it in "_settings.scss" but couldn't find the right switch. I know that i could just take everything out of the compiled .css version of foundation but i thought there might be a more elegant way to do it.

thanks!

dims about 5 years ago

in on of the scss files you can add @import to import all the foundation components
for example i have an app.scss which has the following lines. The components which are not needed can be commented out by adding a '//' .

// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

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

// Behold, here are all the Foundation components.
@import
  "foundation/components/grid",
  //"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/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/range-slider",
  "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";


Rafi Benkual about 5 years ago

Bimal is right, You can selectively choose components in app.scss. Also each individual component partial will tell you what it is dependent on.