Menu icon Foundation

This post has been closed. No new replies can be added.

Astrid Paris over 4 years ago

Thanks!

Rafi Benkual over 4 years ago

Yes, after all the imports.

Example:

//   "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";

// center

@mixin centerer {
  position: relative;
  top: 50%;
  transform:translateY(85%);
}


// blog 

.movie {
  background-color: #e67e22;
}
.health {
  background-color: #2ecc71;
}
.pirate {
  background-color: #2c3e50;
}
.sass {
  background-color: #e74c3c;
}
.code {
  background-color: #8e44ad;
}

Astrid Paris over 4 years ago

Thanks! :)

Where do custom styles written in app.scss go? (After the @import directive?)

Rafi Benkual over 4 years ago

Jeremy is right! This is how we recommend you use it.

Jeremy Englert over 4 years ago

Part of the beauty of Foundation is that it is very flexible in this regard, however, here are my thoughts.

The _settings.scss file is where you will override any Foundation specific variables. You can also set your own variables here, but I wouldn't write full-blown styles in this file.

app.scss (or whatever you decide to name your stylesheet) is where you will put all of your custom styles.

Essentially, settings.scss for variables. app.scss for styles.