Menu icon Foundation
Any customized Sass Download ?

Hello there.
Im coming from Twitter bootstrap, but the fact that they don't Support any sass portations made me try foundation. Now, i saw that you can Download a customized Version, but this One will only give you a CSS file. Also if i Download the sass version via the Command line i'll only get one file, containing the entire foundation build.
Is there any Way to Customize that, to get less modules, make it more lightweight or at least to get all the Single sass Files - so that i can exclude the ones i don't need?

Thank you in advance

Custom DownloadSass

Hello there.
Im coming from Twitter bootstrap, but the fact that they don't Support any sass portations made me try foundation. Now, i saw that you can Download a customized Version, but this One will only give you a CSS file. Also if i Download the sass version via the Command line i'll only get one file, containing the entire foundation build.
Is there any Way to Customize that, to get less modules, make it more lightweight or at least to get all the Single sass Files - so that i can exclude the ones i don't need?

Thank you in advance

Rafi Benkual over 5 years ago

I think most people Fork foundation onto their GitHub branch. They strip it down to the components they need and start projects from there.

Anyone else have input on this?

Yucel about 4 years ago

I always comment out the parts I don't use on the settings file. Only convenience would be if there was a way to customize your cli installs. Especially custom grids and columns widths.

Brian Hewitt almost 3 years ago

I'd love to see an option like this, although there are obviously lots of dependency issues involved.

I was attempting to just use the flex grid via Sass. I cloned the repo, stripped the @imports down to nothing and was gradually working my way through partials and dependencies, but found that it was taking so long to work through that -- and still getting lots of things I didn't want -- that it wasn't worth it. For example, lots of typography and color variables that I'd prefer to be optional.

Unfortunately, I'm finding the same thing with the customized CSS download: when I select just the flex grid to download, for example, I still get a reset I don't want, among other things. (I have a modified reset that I use across multiple internal projects for consistency).

I do recognize that the main point of using a Framework is to have lots of basics determined for you out of the box, so these might be inappropriate hopes/expectations. But I really like the work that's been done on modularizing Foundation 6, and I quite like the idea of utilizing the atomic bits that I need (and that a developer who comes after may be familiar with) -- without requiring lots of overwriting and potential inefficiencies and bloat from stuff I don't need.

Rafi Benkual almost 3 years ago

Not sure about the resets but you can comment out any unused CSS in the app.scss file. 

 

This removes the components and their output classes from being compiled.

You can do this for JS as well in the config.yml file

Rafi Benkual almost 3 years ago

After re-reading your points - I'm wondering what you do need from Foundation? What parts did you want rather than not want. From there we can suggest or see if there is better way.

Zackery Gianotti almost 3 years ago

Hello, All!

As Rafi has shown, it is very possible to reduce Foundation down to just the components you want. But, if I am reading the post correctly, it seems the components themselves are what is missing. If that is the case, I recommend that the user updates their Bower, NPM (or whatever service they are using for the package management), Foundation CLI, Sass, Git, Grunt and Gulp and try a clean install unmodified. 

Rachel Willmer almost 3 years ago

I'd like to be able to override the style that's configured in app.scss.

It doesn't seem possible to do this without actually editing the node_modules package, which isn't ideal because I can't keep the changes in version control

Any idea how I could do this? I've included foundation6 into a project which I created using angular-cli.

Brian Hewitt almost 3 years ago

Thanks for your replies about customizing output. I'm going back in to have a look at the SASS option. I did install via NPM, so the components were all there. I think my main sticking point was that I was using @import for grabbing Foundation partials, instead of using @include for utilizing the component mixins. That obviously makes a big difference (including not pulling in the reset, which was a dependency of some partial that I was using). I suspect that'll work for me

 

Zackery Gianotti almost 3 years ago

Hi Brian

You're right about that! I am finding that many people forget there are more options in SCSS than using variables. Mixins and Includes are tremendously helpful. Possibly the largest bandwidth consumer is the app.js file once all is said and done. Don't forget to remove any JS that you aren't using. It tends to be overlooked. Removing the SCSS files reduces the app.css and the same is true for the JS files. Good luck moving forward! 

Zackery Gianotti almost 3 years ago

Hi Rachel

I'm not really understanding what you are trying to do. If there are specific overrides you are attempting, you could always create a custom class and 

@mixin

or 

@extend

the Foundation class name and do your overrides below that. As long as your custom-written CSS is last in the load order it will override the original settings. I personally create my own scss file (usually called "_custom.scss" and @import it at the bottom of the app.scss file. I use that file for very specific overrides that I want.

 

Additionally, custom made components are also in their own _COMPONENT-NAME.scss document. They all get imported after my custom file. Basically, whatever is last, is the style that will be applied. 

 

This information is kind of vague, I know. If you were to provide some examples I could write up a CodePen in an attempt to help. (Not saying I have all the answers, but it is always good to soundboard with other developers.) 

 

In any case, happy coding and cheers!