Foundation 5 and learning Sass

gaekwad · 2014-03-31 08:29:45

Hi, folks.
I’m building a site with Foundation and I’ve reached a point that I can no longer use the pre-compiled CSS without overriding styles inline in the majority of cases, which is not sustainable. I’ve installed grunt and lib sass to my OS X development environment, and I have created my new local development copy of the Foundation files to study, use, override and make perfectly-fitting CSS out of.

The thing is, though: I don’t know what I’m doing. I understand the workflow, I think:

take the Zurb-released source files
apply overrides/changes in my own files
use grunt to combine the two into CSS
use the CSS on my site

I am competent at CSS3 and command lines, but Sass is new to me and I’m not picking it up very easily. I’m a bodger, not a designer, and this is new territory for me. I switched from Bootstrap to Foundation last year and although I don’t regret it, the barrier to entry is higher than I was expecting.

I would be grateful for recommended tried-and-tested reading/resources for getting accustomed to how Sass works, or perhaps a pointer for a ‘better’ workflow that allows me to use the smarts that the Zurb community have, while putting my own tweaks into the final CSS for my design.

Thank you in advance.

Last edited by gaekwad (2014-03-31 08:30:09)

totoff · 2014-03-31 11:29:21

Hi gaekwad,

not sure I understand completely what the problem is, but your workflow for customizing Foundation 5 should be:

before doing anything other, adjust the sass variables you find in _settings.scss
write individual styles into your own .scss file. make sure you import foundation.scss, normalize.scss and _settings.scss to this file (sometimes it’s hard to override Foundation scss. Try to be specific with IDs and classes)
you may also import other libraries to this file such as Compass for example

And that’s pretty much everything that you need to do. The best resource I know for Sass are the Sass Docs: http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Does that make sense to you?

gaekwad · 2014-03-31 12:02:15

Hey Christoph – thank you for your reply, that makes sense.

I think my main issue at this stage is understanding how all the components plug together and how to best use the structure already in place to streamline modifications and new things – I don’t want to have to rearrange everything every time a point release of Foundation comes out. I previously used frameworks and boilerplates in plain CSS, then either hacked changes inline (inefficient) or added extra CSS to new sheets (also inefficient). I’d like to understand how it all works so I can plan my development more effectively.

I’ll take a look at the link you posted – thanks again.

colak · 2014-03-31 12:34:15

Hi Pete

I’d recommend www.lynda.com/Foundation-tutorials/Foundation-Incorporating-Sass-Compass/133332-2.html as it explains in plain language all you need to know.

gaekwad · 2014-03-31 12:36:16

Thanks, Yiannis -that looks great, I’ll check it out.

philwareham · 2014-03-31 13:08:11

gaekwad wrote #279974:

I don’t want to have to rearrange everything every time a point release of Foundation comes out. I previously used frameworks and boilerplates in plain CSS, then either hacked changes inline (inefficient) or added extra CSS to new sheets (also inefficient).

Since you will only be editing the _settings.scss file plus any new rules you put in app.scss, updating Foundation will not destroy any of your CSS.

Note that some of Foundation’s CSS has high specificity (though nowhere near as bad as Bootstrap), so some of your overrides will have to be quite long to make sure they cascade properly. Just look at this little beauty…

div.switch.tiny input:first-of-type:checked ~ span:last-child

Don’t use any inline CSS.

philwareham · 2014-03-31 13:15:06

Also, in app.scss, only include the components you’ll actually be using, so here…

@import "settings";
@import "foundation";

// Or selectively include components
// @import
//   "foundation/components/accordion",
//   "foundation/components/alert-boxes",
//   "foundation/components/block-grid",
//   "foundation/components/breadcrumbs",
//   "foundation/components/button-groups",
//   "foundation/components/buttons",
//   "foundation/components/clearing",
//   "foundation/components/dropdown",
//   "foundation/components/dropdown-buttons",
//   "foundation/components/flex-video",
//   "foundation/components/forms",
//   "foundation/components/grid",
//   "foundation/components/inline-lists",
//   "foundation/components/joyride",
//   "foundation/components/keystrokes",
//   "foundation/components/labels",
//   "foundation/components/magellan",
//   "foundation/components/orbit",
//   "foundation/components/pagination",
//   "foundation/components/panels",
//   "foundation/components/pricing-tables",
//   "foundation/components/progress-bars",
//   "foundation/components/reveal",
//   "foundation/components/side-nav",
//   "foundation/components/split-buttons",
//   "foundation/components/sub-nav",
//   "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";

…comment out the import "foundation" rule and then uncomment the components you actually need.

gaekwad · 2014-03-31 13:15:25

philwareham wrote #279980:

Don’t use any inline CSS.

That’s exactly why I’m here. I’m done with that.

I’m totally fine with verbose stuff and specificity – it’s just getting to grips with it that’s taking much longer than I was expecting. I’ve got Yiannis’ video tutorial cued up for this afternoon, so I’ll see how that goes.

philwareham · 2014-03-31 13:16:45

I will eventually write that textpattern-zurb-foundation repo that I promised a while back!

gaekwad · 2014-03-31 13:17:56

philwareham wrote #279984:

I will eventually write that textpattern-zurb-foundation repo that I promised a while back!

That’s not what I was angling for, but great!

Gocom · 2014-03-31 19:44:32

I would highly recommend that you don’t edit the frameworks source files, but extend it with overrides where needed. For instance you shouldn’t edit the settings file that comes with the framework, instead create your own copy of it and import that in your main scss file. That way you don’t have to worry about updates overwriting your stuff.

…similarly how you compile Textpattern’s default theme with extra modules.

philwareham · 2014-03-31 20:38:48

If you’ve installed Foundation properly then there’s a copy of the _settings.scss file in the scss directory that you are free to edit how you like, it’s independent if the source code and designed for exactly that purpose. It’s not overwritten by an update.

Don’t edit the copy in the bower_components folder though, that one IS part of the source code.

Textpattern CMS

Textpattern CMS support forum

#1 2014-03-31 08:29:45