Menu icon Foundation
A few things I don't understand yet

I can't understand a few things yet, and I hope someone can help me.

First, I have downloaded the sass source code from github, because I don't like to use bower or this kind os stuff, I just edit the sass code when I need it, or when I need a module I just uncomment it in the foundation.scss file and done, but when I try, for example, to edit the _settings file to change the row width (because I don't like 1000px width rows), nothing happens, and I don't understand what' the purpose of that settings file then.

Second, I don't know yet, how to use xlarge media queries, I see I can activate it from _settings file using $include-xl-html-grid-classes: true, but again, it doesn't work.

I'm getting crazy with someone that I supposed would be easy, but it's just driving me crazy.

rowxlarge grid

I can't understand a few things yet, and I hope someone can help me.

First, I have downloaded the sass source code from github, because I don't like to use bower or this kind os stuff, I just edit the sass code when I need it, or when I need a module I just uncomment it in the foundation.scss file and done, but when I try, for example, to edit the _settings file to change the row width (because I don't like 1000px width rows), nothing happens, and I don't understand what' the purpose of that settings file then.

Second, I don't know yet, how to use xlarge media queries, I see I can activate it from _settings file using $include-xl-html-grid-classes: true, but again, it doesn't work.

I'm getting crazy with someone that I supposed would be easy, but it's just driving me crazy.

Tim Hartwick over 4 years ago

Hi Andres,

Just to better gauge your setup, are you using anything like Grunt or Compass to actually compile your changes into the production CSS file?

I know you mentioned that you're not a fan of bower or node, but these are really helpful for making sure all of Foundation's dependencies are properly loaded and the correct version. I'd recommend another read-through on our Getting Started page here: http://foundation.zurb.com/docs/sass.html

I personally recommend the Libsass & Grunt option. It's super fast. Here's a great article about Grunt from Chris Coyier that really helped me understand Grunt.

It can be a little confusing to learn at first, but it's really worth learning!

Hope this helps!

Andres Orozco over 4 years ago

Hello Tim, thanks for your answer.

I'm just using Sass gem in Ruby to compile Sass to Css, but yes, I'm planning to switch to grunt to do this and some other stuff in my projects.

Rafi Benkual over 4 years ago

Andres - are you importing settings and foundation? It sounds like none of your settings are taking effect.

Should look like

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

in app.scss

The CLI we built with Bower, Grunt etc basically scaffolds all this for you so it works out of the box. These tools are part of a modern workflow.

Andres Orozco over 4 years ago

Rafi, the CLI works great, but it installs too many unseful files, and I have to change many things I don't want. This is supposed to be easy to deploy, but sometimes it's frustrating.

I'm sorry, but I'm a very organized person, and I just don't understand why there are so many files, and sometimes repeated. I created a project using the CLI, and when I checked the structure, I found a few things I don't understand, like:

  • _settings file is located in scss folder, and also in scss folder into foundation folder into bower_components, it's a mess. Which one i'm supposed to edit?

  • Where am I supposed to place my personal css? in the app.scss file? As I said, I'm a very organized person, and I don't like to mix my personal code with a framework or plugin code (personal preference), and the app.scss is also a bit confusing, allowing me to import each sass component as I need it, but also, the components are already imported in foundation.scss file, so, If I don't want a componen to be imported, I have to comment it in that foundation.scss file, and that's my point, why is there the option to import those components in app.scss, that's just like trying to do the same thing from two different place.

I don't know, I love foundation's grid, and plugins, but have you guys thought about changing foundation SCSS structure to make it clearer and easier to understand for a basic user?

Thank you.

james murphy over 4 years ago

Tim - you mention an article in your post about using grunt and libsass but forgot to post the actual link. can you post it? I would love to read it.

Tim Hartwick over 4 years ago

Sorry about that! Here's the article: http://24ways.org/2013/grunt-is-not-weird-and-hard/

Rafi Benkual over 4 years ago

@andres

_settings file is located in scss folder, and also in scss folder into foundation folder into bower_components, it's a mess. Which one i'm supposed to edit?

Everything in the bower_components folder is meant to be updated by the CLI when you run bower update (if there is a new release of Foundation you want to get).

You do NOT want to edit those files. There is a _settings file in there so that if new variables were added, you can see the differences there and manually add as needed.

Where am I supposed to place my personal css? in the app.scss file? 

Yes, for basic projects adding your overrides in app.scss works well. Now in more complex projects, we'd recommend creating a SCSS partials folder that you'd import for each unique component or mixins.

Something like:

Website
  - index.html
  - fonts folder
  - JS folder
  - SCSS folder
    - _settings.scss
    - app.scss
    - components folder
      - footer
      - hero
      - nav
    - mixins folder
  - stylesheets folder

Then in app.scss a sensible import structure

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

// mixins first
@import
    "panel-styles",
    "images",
    "centered-lists";

// components
@import
    "footer"',
    "hero",
    "nav";

By default, if you have @import "settings"; @import "foundation"; uncommented, all of Foundation and settings is being used.

Tutorial on selective imports - http://zurb.com/university/lessons/puncture-bloated-sass-files

Andres Orozco over 4 years ago

Rafi, I have one problem, I'm now using the foundation cli to install the framework and I'm also using grunt to do all the tasks, and I'm trying to compile sass using grunt sass plugin. This would be my example project structure after using foundation's cli to install the framework:

 PROJECT
     - bower_components
         - foundation
               - css
               - js
               - scss
     - node_modules
     - scss
           _settings.scss
           app.scss
     - stylesheets
       index.html
       Gruntfile.js
       package.json

I'm trying to compile the app.scss file that is into my scss folder, to stylesheets folder, anyways, I have an error, it says it can't find "foundation/functions" into _settings.scss.

I'm getting more and more confused.

Andres Orozco over 4 years ago

Sorry Rafi, I fixed it. I found out that it was not working because I didn't create a libsass project and I was using grunt-contrib-sass instead of node-sass.

Thanks.