//
// Feel free to submit pull requests to foundation-docs like you would Foundation itself!
+// $foundation-palette: (
+// primary: #cc7691,
+// secondary: #777,
+// success: #3adb76,
+// warning: #ffae00,
+// alert: #ec5840,
+// );
+
@import 'node_modules/foundation-sites/scss/foundation';
@import 'node_modules/motion-ui/src/motion-ui';
@include motion-ui-transitions;
@import 'node_modules/foundation-docs/scss/foundation-docs';
+
+// .docs-nav.menu {
+// background-color: #fefaff;
+//
+// a:hover {
+// background: rgba($primary-color, 0.1);
+// }
+// }
+//
+// .docs-nav-title {
+// color: #9974a1;
+// }
+//
+// .docs-newsletter {
+// background-color: darken($primary-color, 15%);
+//
+// .button {
+// color: $primary-color;
+// background: white;
+// font-weight: bold;
+//
+// &:hover {
+// background: #f9f9f9;
+// }
+// }
+// }
+//
+// .docs-emails .zurb-footer-top {
+// background-color: darken($primary-color, 25%);
+// }
--- /dev/null
+---
+title: Using Sass
+description: Foundation for Emails is written in Sass, which allows us to make the codebase customizable and flexible.
+---
+
+<div class="primary callout">
+ <p>Not familiar with Sass? The [official tutorial](http://sass-lang.com/guide) on sass-lang.com is a great place to start.</p>
+</div>
+
+## Compatibility
+
+<img src="assets/img/logos/sass-logo.svg" alt="Sass logo" class="float-right" style="width: 150px; height: 150px; margin-left: 1rem;">
+
+**Foundation for Sites can be compiled with Ruby Sass and libsass.** We tend to stick to the latest versions of both compilers when possible. Our documentation, as well as the ZURB Email Stack, are compiled with [node-sass](https://github.com/sass/node-sass), a Node port of libsass. We recommend these versions of either compiler:
+
+- Ruby Sass **3.4+**
+- node-sass **3.4.2+** (libsass **3.3.2**)
+
+---
+
+## Loading the Framework
+
+If you're using the [ZURB Email Stack](zurb-stack.html) to create emails, Sass has already been set up for you. However, it's also easy to incorporate the Foundation for Emails Sass into your own email workflow.
+
+To get started, first install the framework files using Bower or npm.
+
+```bash
+npm install foundation-emails --save
+bower install foundation-emails --save
+```
+
+Next, add the framework files as an import path in Sass. How you do this depends on your build process, but the path is the same regardless: `[packages_folder]/foundation-emails/scss`
+
+Here's an example using grunt-contrib-sass:
+
+```js
+grunt.initConfig({
+ sass: {
+ dist: {
+ options: {
+ loadPath: ['node_modules/foundation-sites/scss']
+ }
+ }
+ }
+});
+```
+
+If you're using Compass, open your project's `config.rb` and add the import path there:
+
+```ruby
+add_import_path "node_modules/foundation-sites/scss"
+```
+
+Finally, add an `@import` statement to the top of your main Sass file.
+
+```scss
+@import 'foundation';
+```
+
+You're also going to want a settings file for your project, which will allow you to modify the default styles of Foundation for Emails. **[Download the latest settings file here](https://raw.githubusercontent.com/zurb/foundation-emails/master/scss/settings/_settings.scss)**, add it to your project as `_settings.scss`, then import it *before* Foundation itself.
+
+```scss
+@import 'settings';
+@import 'foundation';
+```
+
+---
+
+## The Settings File
+
+All Foundation projects include a **settings file**, named `_settings.scss`. If you're using the ZURB Stack, you can find the settings file under `src/assets/scss/`. If you're installing the framework standalone using Bower or npm, there's a settings file included in those packages, which you can copy into your own Sass folder to work with.
+
+Every component includes a set of variables that modify core structural or visual styles. If there's something you can't customize with a variable, you can just write your own CSS to add it.
+
+<div class="callout warning">
+ <p>Once you've set up a new project, your settings file can't be automatically updated when new versions change, add, or remove variables. Keep tabs on new <a href="https://github.com/zurb/foundation-emails/releases">Foundation releases</a> so you know when things change.</p>
+</div>
+
+Here's an example set of settings variables. These change the default styling of [buttons](button.html):
+
+```scss
+// Text color of buttons.
+$button-color: $white !default;
+
+// Text color of buttons with a light background.
+$button-color-alt: $medium-gray !default;
+
+// Font weight of buttons.
+$button-font-weight: bold !default;
+
+// Background color of buttons.
+$button-background: $primary-color !default;
+
+// Border around buttons.
+$button-border: 2px solid $button-background !default;
+```
<li class="docs-nav-title">Guides</li>
<li><a href="getting-started.html">Getting Started</a></li>
<li><a href="installing.html">Installing</a></li>
- <li><a href="sass.html">Sass</a></li>
- <li><a href="inky.html">Inky</a></li>
+ <li><a href="sass.html">Using Sass</a></li>
+ <li><a href="inky.html">Using Inky</a></li>
<li><a href="zurb-stack.html">ZURB Stack</a></li>
<li><a href="compatibility.html">Compatibility</a></li>
<li><a href="migration.html">Migrate from Ink</a></li>
<div class="row property">
<div class="medium-4 columns">
<div class="property-info">
- <h3>Foundation for Sites</h3>
- <p>Foundation
is a responsive front-end framework made by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
+ <h3>Foundation for Emails</h3>
+ <p>Foundation
for Emails is a framework for responsive HTML emails created by <a href="http://zurb.com">ZURB</a>, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.
</p>
</div>
</div>
<div class="learn-links">
<h4 class="hide-for-small">Want more?</h4>
<ul>
+ <li><a href="http://foundation.zurb.com/sites">Foundation for Sites</a></li>
<li><a href="http://foundation.zurb.com/apps">Foundation for Apps</a></li>
- <li><a href="http://zurb.com/ink/">Ink Responsive Emails</a></li>
<li><a href="http://zurb.com/notable">Notable Design Apps</a></li>
<li><a href="http://zurb.com/university/courses">Training</a></li>
<li><a href="http://zurb.com/library">Design Resources</a></li>
projects / thirdparty / foundation / foundation-emails.git / commitdiff
