Menu icon Foundation
Basic usage of SASS

I do web projects since '95. I already customized the Zurb Foundation CSS/JS files for one project or the other. There I just commented out many stuff I do not seem to need from the .css files. But I do not really understand how I should use the SASS files provided after doing "foundation new" with the CLI.

I mean when I simply alter the "app.scss" files: Will this not cause problems with further updates?

I do even not know if Zurb-Foundation is what really suits my project best. I already use a CMS for generating content into pages so I will not need to compile pages like described here: http://foundation.zurb.com/sites/docs/starter-projects.html#page-compilation

The given example templates are all cluttered with stuff I do not need: sliders, accordeons, etc. etc. but I would not want to reinvent the wheels - if I need some component it should be easy to add it to the template I am creating.

To keep it short: I do not really have a clue what would be the best way to start a fresh, clean empty template-project.

cms

I do web projects since '95. I already customized the Zurb Foundation CSS/JS files for one project or the other. There I just commented out many stuff I do not seem to need from the .css files. But I do not really understand how I should use the SASS files provided after doing "foundation new" with the CLI.

I mean when I simply alter the "app.scss" files: Will this not cause problems with further updates?

I do even not know if Zurb-Foundation is what really suits my project best. I already use a CMS for generating content into pages so I will not need to compile pages like described here: http://foundation.zurb.com/sites/docs/starter-projects.html#page-compilation

The given example templates are all cluttered with stuff I do not need: sliders, accordeons, etc. etc. but I would not want to reinvent the wheels - if I need some component it should be easy to add it to the template I am creating.

To keep it short: I do not really have a clue what would be the best way to start a fresh, clean empty template-project.

Dayo over 3 years ago

Hi Bernard,

The documentation for Foundation is a bit lacking when it come to basic and simple explanations and it seems there has been a recent influx of new users such as you and I which seems to have caught the team unprepared. Also, they are trying to roll a new version (F6) when we have all descended on them. Most of their docs are for the old version (F5) and they are not compatible.

What I can suggest is that in your case, you skip all the scss stuff and just download or link to the compiled JS/CSS and then use it as a basis to setup your site similarly to how you will use Bootstrap for instance.

You can find examples for styling here: http://foundation.zurb.com/sites/docs/

Links for the JS & CSS are here

https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.js
https://cdn.jsdelivr.net/foundation/6.1.1/foundation.min.css

Learning Sass is a separate issue from using Foundation. You only need this if you want to customise things.

There is a tool on this site for some basic customisation: http://foundation.zurb.com/sites/download.html

However, last time I checked, the version you get from it was out of date F6.0.5 instead of F6.1.1) but not sure if it has been updated since. Would be nice if the page actually told you what version you will get from it.

Anyway, it basically does the type of thing you can do with your scss at a high level.

I love the Yeti Launch tool they have but alas, it is also out of date and it doesn't seem they are fully clued up to the potential it has.

With Zencart planning to go with Foundation in the near future, there will likely be a deluge of confused newbies and I hope they get their act together soon. I actually found out about Foundation from the Zencart site.