Menu icon Foundation

Developer | Boston, MA

I work full-time for Oxfam America in Boston. I design and develop websites on the side for authors and other creative enterprises.

My Posts


  • 3
    Replies
  • Different _settings.scss files?

    By Michael Borum

    scss

    I've created a handful of sites using Foundation 5, all of which came out great, and I continue to enjoy building sites with this framework and learning new ways to use it. However, I've had a few hiccups with the upgrade to Foundation 6. The main thing I... (continued)

    Last Reply by Michael Borum almost 4 years ago


My Comments

Michael Borum commented on Michael Borum's post almost 4 years

I believe I've resolved this.

Although I HAD run the command to uninstall the Foundation gem, it had not actually been removed, so when I ran the "foundation new" command from the CLI it was still using the old Ruby method (Foundation 5x), not NPM. I had to manually delete Foundation from the gems folder and then when I ran "foundation new" at the command prompt I got the new Foundation 6 dialogue sequence. Don't know why. (I'm on Mac OS X El Capitan, btw.)

Everything is running smoothly now.

Thanks!
Michael

Michael Borum commented on Michael Borum's post almost 4 years

Oh, right--I should have attached them anyway to show you what I mean. I'll paste in the first several lines so you can see the differences...

_settings.scss from CLI:

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

//

// Table of Contents
// Foundation Settings

// a. Base
// b. Grid
// c. Global
// d. Media Query Ranges
// e. Typography
// 01. Accordion
// 02. Alert Boxes
// 03. Block Grid
// 04. Breadcrumbs
// 05. Buttons
// 06. Button Groups
// 07. Clearing
// 08. Dropdown
// 09. Dropdown Buttons
// 10. Flex Video
// 11. Forms
// 12. Icon Bar
// 13. Inline Lists
// 14. Joyride
// 15. Keystrokes
// 16. Labels
// 17. Magellan
// 18. Off-canvas
// 19. Orbit
// 20. Pagination
// 21. Panels
// 22. Pricing Tables
// 23. Progress Bar
// 24. Range Slider
// 25. Reveal
// 26. Side Nav
// 27. Split Buttons
// 28. Sub Nav
// 29. Switch
// 30. Tables
// 31. Tabs
// 32. Thumbnails
// 33. Tooltips
// 34. Top Bar
// 36. Visibility Classes

// a. Base
// - - - - - - - - - - - - - - - - - - - - - - - - -

// This is the default html and body font-size for the base rem value.
// $rem-base: 16px;

// Allows the use of rem-calc() or lower-bound() in your settings
@import 'foundation/functions';

// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.

// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be different and not have it affect the grid breakpoints,
// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
// $base-font-size: 100%;

// The $base-font-size is 100% while $base-line-height is 150%
// $base-line-height: 150%;

// We use this to control whether or not CSS classes come through in the gem files.
$include-html-classes: true;
// $include-print-styles: true;
$include-html-global-classes: $include-html-classes;

// b. Grid
// - - - - - - - - - - - - - - - - - - - - - - - - -

// $include-html-grid-classes: $include-html-classes;
// $include-xl-html-grid-classes: false;

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

_settings.scss from Yeti:

 //  Foundation for Sites Settings
//  -----------------------------
//
//  Table of Contents:
//
//   1. Abide
//   2. Accordion
//   3. Badge
//   4. Breadcrumbs
//   5. Breakpoints
//   6. Button
//   7. Button Group
//   8. Callout
//   9. Close Button
//  10. Dropdown
//  11. Flex Video
//  12. Forms
//  13. Global
//  14. The Grid
//  15. Label
//  16. Media Object
//  17. Menu
//  18. Off-canvas
//  19. Orbit
//  20. Pagination
//  21. Progress Bar
//  22. Reveal
//  23. Slider
//  24. Switch
//  25. Table
//  26. Tabs
//  27. Thumbnail
//  28. Tooltip
//  29. Top Bar
//  30. Base Typography
//  31. Typography Helpers

// Abide
// -----

// $abide-inputs: true;
// $abide-labels: true;
// $input-background-invalid: $alert-color;
// $form-label-color-invalid: $alert-color;
// $input-error-color: $alert-color;
// $input-error-font-size: rem-calc(12);
// $input-error-font-weight: $global-weight-bold;

// Accordion
// ---------

// $accordion-background: $white;
// $accordion-plusminus: true;
// $accordion-item-color: foreground($accordion-background, $primary-color);
// $accordion-item-background-hover: $light-gray;
// $accordion-item-padding: 1.25rem 1rem;
// $accordion-content-background: $white;
// $accordion-content-border: 1px solid $light-gray;
// $accordion-content-color: foreground($accordion-background, $primary-color);
// $accordion-content-padding: 1rem;

// Badge
// -----

// $badge-background: $primary-color;
// $badge-color: foreground($badge-background);
// $badge-padding: 0.3em;
// $badge-minwidth: 2.1em;
// $badge-font-size: 0.6rem;

// Breadcrumbs
// -----------

// $breadcrumbs-margin: 0 0 $global-margin 0;
// $breadcrumbs-item-font-size: rem-calc(11);
// $breadcrumbs-item-color: $primary-color;
// $breadcrumbs-item-color-current: $black;
// $breadcrumbs-item-color-disabled: $medium-gray;
// $breadcrumbs-item-margin: 0.75rem;
// $breadcrumbs-item-uppercase: true;
// $breadcrumbs-item-slash: true;

// Breakpoints
// -----------

// $breakpoints: (
//   small: 0,
//   medium: 512px,
//   large: 1024px,
//   xlarge: 1200px,
//   xxlarge: 1440px,
// );
// $breakpoint-classes: (small medium large);

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Michael Borum's post almost 4 years

I believe I've resolved this.

Although I HAD run the command to uninstall the Foundation gem, it had not actually been removed, so when I ran the "foundation new" command from the CLI it was still using the old Ruby method (Foundation 5x), not NPM. I had to manually delete Foundation from the gems folder and then when I ran "foundation new" at the command prompt I got the new Foundation 6 dialogue sequence. Don't know why. (I'm on Mac OS X El Capitan, btw.)

Everything is running smoothly now.

Thanks!
Michael

You commented on Michael Borum's post almost 4 years

Oh, right--I should have attached them anyway to show you what I mean. I'll paste in the first several lines so you can see the differences...

_settings.scss from CLI:

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

//

// Table of Contents
// Foundation Settings

// a. Base
// b. Grid
// c. Global
// d. Media Query Ranges
// e. Typography
// 01. Accordion
// 02. Alert Boxes
// 03. Block Grid
// 04. Breadcrumbs
// 05. Buttons
// 06. Button Groups
// 07. Clearing
// 08. Dropdown
// 09. Dropdown Buttons
// 10. Flex Video
// 11. Forms
// 12. Icon Bar
// 13. Inline Lists
// 14. Joyride
// 15. Keystrokes
// 16. Labels
// 17. Magellan
// 18. Off-canvas
// 19. Orbit
// 20. Pagination
// 21. Panels
// 22. Pricing Tables
// 23. Progress Bar
// 24. Range Slider
// 25. Reveal
// 26. Side Nav
// 27. Split Buttons
// 28. Sub Nav
// 29. Switch
// 30. Tables
// 31. Tabs
// 32. Thumbnails
// 33. Tooltips
// 34. Top Bar
// 36. Visibility Classes

// a. Base
// - - - - - - - - - - - - - - - - - - - - - - - - -

// This is the default html and body font-size for the base rem value.
// $rem-base: 16px;

// Allows the use of rem-calc() or lower-bound() in your settings
@import 'foundation/functions';

// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.

// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be different and not have it affect the grid breakpoints,
// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
// $base-font-size: 100%;

// The $base-font-size is 100% while $base-line-height is 150%
// $base-line-height: 150%;

// We use this to control whether or not CSS classes come through in the gem files.
$include-html-classes: true;
// $include-print-styles: true;
$include-html-global-classes: $include-html-classes;

// b. Grid
// - - - - - - - - - - - - - - - - - - - - - - - - -

// $include-html-grid-classes: $include-html-classes;
// $include-xl-html-grid-classes: false;

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

_settings.scss from Yeti:

 //  Foundation for Sites Settings
//  -----------------------------
//
//  Table of Contents:
//
//   1. Abide
//   2. Accordion
//   3. Badge
//   4. Breadcrumbs
//   5. Breakpoints
//   6. Button
//   7. Button Group
//   8. Callout
//   9. Close Button
//  10. Dropdown
//  11. Flex Video
//  12. Forms
//  13. Global
//  14. The Grid
//  15. Label
//  16. Media Object
//  17. Menu
//  18. Off-canvas
//  19. Orbit
//  20. Pagination
//  21. Progress Bar
//  22. Reveal
//  23. Slider
//  24. Switch
//  25. Table
//  26. Tabs
//  27. Thumbnail
//  28. Tooltip
//  29. Top Bar
//  30. Base Typography
//  31. Typography Helpers

// Abide
// -----

// $abide-inputs: true;
// $abide-labels: true;
// $input-background-invalid: $alert-color;
// $form-label-color-invalid: $alert-color;
// $input-error-color: $alert-color;
// $input-error-font-size: rem-calc(12);
// $input-error-font-weight: $global-weight-bold;

// Accordion
// ---------

// $accordion-background: $white;
// $accordion-plusminus: true;
// $accordion-item-color: foreground($accordion-background, $primary-color);
// $accordion-item-background-hover: $light-gray;
// $accordion-item-padding: 1.25rem 1rem;
// $accordion-content-background: $white;
// $accordion-content-border: 1px solid $light-gray;
// $accordion-content-color: foreground($accordion-background, $primary-color);
// $accordion-content-padding: 1rem;

// Badge
// -----

// $badge-background: $primary-color;
// $badge-color: foreground($badge-background);
// $badge-padding: 0.3em;
// $badge-minwidth: 2.1em;
// $badge-font-size: 0.6rem;

// Breadcrumbs
// -----------

// $breadcrumbs-margin: 0 0 $global-margin 0;
// $breadcrumbs-item-font-size: rem-calc(11);
// $breadcrumbs-item-color: $primary-color;
// $breadcrumbs-item-color-current: $black;
// $breadcrumbs-item-color-disabled: $medium-gray;
// $breadcrumbs-item-margin: 0.75rem;
// $breadcrumbs-item-uppercase: true;
// $breadcrumbs-item-slash: true;

// Breakpoints
// -----------

// $breakpoints: (
//   small: 0,
//   medium: 512px,
//   large: 1024px,
//   xlarge: 1200px,
//   xxlarge: 1440px,
// );
// $breakpoint-classes: (small medium large);

Posts Followed

No Content

Following

  • No Content

Followers