From: Geoff Kimball Date: Fri, 4 Mar 2016 23:37:25 +0000 (-0800) Subject: Add Using Sass page and add pink CSS that's not activated X-Git-Tag: v2.0.0-rc.3~12^2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=db2c80baaf81906a9795190bc88049f23d0c0271;p=thirdparty%2Ffoundation%2Ffoundation-emails.git Add Using Sass page and add pink CSS that's not activated --- diff --git a/docs/assets/img/logos/sass-logo.svg b/docs/assets/img/logos/sass-logo.svg new file mode 100644 index 00000000..194e860e --- /dev/null +++ b/docs/assets/img/logos/sass-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index 89c87089..2cc73436 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -7,6 +7,14 @@ // // 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'; @@ -14,3 +22,33 @@ @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%); +// } diff --git a/docs/pages/sass.md b/docs/pages/sass.md new file mode 100644 index 00000000..df7cff97 --- /dev/null +++ b/docs/pages/sass.md @@ -0,0 +1,96 @@ +--- +title: Using Sass +description: Foundation for Emails is written in Sass, which allows us to make the codebase customizable and flexible. +--- + +
+

Not familiar with Sass? The [official tutorial](http://sass-lang.com/guide) on sass-lang.com is a great place to start.

+
+ +## Compatibility + +Sass logo + +**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. + +
+

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 Foundation releases so you know when things change.

+
+ +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; +``` diff --git a/docs/partials/component-list.html b/docs/partials/component-list.html index 77be39c3..ff749ba8 100644 --- a/docs/partials/component-list.html +++ b/docs/partials/component-list.html @@ -7,8 +7,8 @@
  • Guides
  • Getting Started
  • Installing
    • -
  • Sass
    • -
  • Inky
    • +
  • Using Sass
    • +
  • Using Inky
  • ZURB Stack
  • Compatibility
  • Migrate from Ink
    • diff --git a/docs/partials/footer.html b/docs/partials/footer.html index 31614ac7..922b41e8 100644 --- a/docs/partials/footer.html +++ b/docs/partials/footer.html @@ -23,8 +23,8 @@
    -

    Foundation for Sites

    -

    Foundation is a responsive front-end framework made by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998. +

    Foundation for Emails

    +

    Foundation for Emails is a framework for responsive HTML emails created by ZURB, a product design company in Campbell, CA. This framework is the result of building web products & services since 1998.

    @@ -35,8 +35,8 @@

    Want more?