FOUNDATION DOCS -- SASS / SCSS

[ghost]

I know SASS / SCSS is a wide subject and it is not Zurb's JOB to replicate detailed instructions on how to use SASS / SASS. Maybe point users to a really good comprehensive. So far I haven't seen anything out there that really explains:

REALLY IMPORTANT

• Best practices for set up for Foundation 6.

a - Not a good idea to make changes to actual scss files like _buttons.scss and throwing everything into app.scss seems counter productive.

Seems to me making corresponding files to each _scss component would be better. That way when upgrades happen - custom settings don't disappear and its easy to adjust the corresponding files.

BUT HOW TO DO THIS. What gets imported where ?

ANYONE WITH SOME GOOD SUGGESTED REAL WORLD WORKING PRACTICES THEY WANT TO SHARE ?

b - I'm following instructions on it's use in the docs -- and there's a lot to be improved in getting newbie users to migrate into using sass / scss.

• FOR EXAMPLE - I know foundation 5 is off topic to 6 , however

Foundation 5 docs - totally confusing to a newbie.

Using Sass _settings.scss

$button-font-color: dodgerblue; Following those instructions carefully (scss set up and using -- upon saving/compiling resulted in an a variable not found error. Obviously a step is missing here.

The whole thing is very vague. Since this is an integral part of foundation 6's customization, a bit more comprehensive documentation on this is sorely needed.

[ghost]

Addendum

Excellent video

http://foundation.zurb.com/learn/video-started-with-foundation.html

More videos - for 5 http://foundation.zurb.com/learn/tutorials.html

Hope there will be updated videos for 6 DOCS on starting - should include links to videos - so they are easy to find and organized better.

The easier it is to follow - the more people will get involved. Foundation is so much cooler than Bootstrap . . . .

[JeremyEnglert]

I find it easiest to create one "main" Scss file and then import all of the smaller pieces into that file. This makes it easy to stay organized while also keeping the files broken up in easy to edit chunks.

You'll never want to modify any of the core Foundation files as they will be overwritten if you ever update the Foundation core. Instead, use the settings.scss file or overwrite Foundation core styles with your own Scss.

Here is an example of how I import the Sass files: https://github.com/JeremyEnglert/JointsWP/blob/4.0/assets/scss/style.scss

[ghost]

Thank-you! Very good information on best practices for set up.

[ghost]

Another good idea by https://github.com/jptaranto

https://github.com/jptaranto/typey/tree/master/stylesheets/typey/mixins

[ghost]

More - How do these all tie in ?

https://github.com/zurb/style-sherpa https://github.com/zurb/foundation-ssg

[ghost]

The following error error is now resolved ? Same issue ? https://github.com/zurb/foundation-sites-6/issues/289#issuecomment-157509780

Foundation 5 docs as mentioned in above post $button-font-color: dodgerblue;

Following those instructions carefully (scss set up and using -- upon saving/compiling resulted in an a variable not found error. Obviously a step is missing here.

[gakimball]

@blynnc To answer your questions:

• We don't recommend editing the framework files directly. There's generally two ways to build on Foundation:
  • Edit the core values in _settings.scss.
  • Write new CSS to add to existing components. When using a Sass project, you can create separate files for each component.
• Style Sherpa is a simple style guide generator that takes a single Markdown file and generates a pre-built style guide page for you. The documentation in place for it is not super good.
• foundation-ssg was rebranded as the ZURB Template. This is the template ZURB uses for client work, which we're now distributing to our userbase. It includes Handlebars templates, Sass/JS compilation, UnCSS, image compression, and Style Sherpa.

There's two takeaways for me here:

• Write a set of best practices about how to override Foundation. Since we're big on this being "the framework you don't use as-is", this is important from a developer education standpoint.
• Need to flesh out the documentation for the ZURB Template still—namely, it's missing an explanation of how the style guide generator works.

If you have any other ideas, suggestions, etc. on the documentation, open an issue on Foundation 6's permanent home, zurb/foundation-sites