Menu icon Foundation
Sass and normalize.css

Hello,

I'm using Foundation 5.3.0 (Foundation for Sites) and I'm using Sass with Compass. I recently read an article about using normalize.css for browser resets and also for HTML 5 support. However, after I created my Foundation 5.3.0 Sass project an index.html file was generated and I do not see any mention of normalize.css with the of the index.html file. But I do see the normalize.css file listed within bower_componets -> foundation -> css.

Do I need to manually add normalize.css in the or is normalize.css not need if you are working with Sass in Foundation 5.3.0?

Also, should we use the index.html that is generated with a new Sass project in Foundation 5.3.0 or should I be using different markup?

Sasscss

Hello,

I'm using Foundation 5.3.0 (Foundation for Sites) and I'm using Sass with Compass. I recently read an article about using normalize.css for browser resets and also for HTML 5 support. However, after I created my Foundation 5.3.0 Sass project an index.html file was generated and I do not see any mention of normalize.css with the of the index.html file. But I do see the normalize.css file listed within bower_componets -> foundation -> css.

Do I need to manually add normalize.css in the or is normalize.css not need if you are working with Sass in Foundation 5.3.0?

Also, should we use the index.html that is generated with a new Sass project in Foundation 5.3.0 or should I be using different markup?

Wing-Hou Chan about 5 years ago

Hey Brian!

You will need to manually link normalize.css into your document. For example:

<link rel="stylesheet" type="text/css" href="/css/normalize.css" />

Alternatively you can turn normalize.css into a SCSS partial by renaming the file to _normalize.scss then @import it into your site stylesheet.

reenan about 5 years ago

Had the same question too, they should add on to the documentation unless I missed it, I could have, as I thought normalize was already added based on:

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/foundation.css">

  <!-- If you are using the gem version, you need this only -->
  <link rel="stylesheet" href="css/app.css">

The above is true, but you'll need to @import normalize like the above comment.

Just to add, I found out that you don't have to go as far as renaming it scss, as it already exist in foundation's bower_components. In app.scss, just adding at the top of the file, @import "normalize";, should work.

Wing-Hou Chan about 5 years ago

Hey Reenan!

I agree with the fact that the documentation does not give you explicit notification that you should add normalize.css into your site. I'll see what I can do about that.

As to your statement about not renaming normalize.css into _normalize.scss, I would disagree. Although I haven't tested to see if your method works or not, I would not recommend deviating from standard practice. Also I don't believe it will work (but as I said, I haven't tested it out).

First of all you cannot @import a CSS file into a Sass file. That is why we need to rename the normalize.css to normalize.scss.

The leading underscore (normalize.scss -> _normalize.scss) is necessary to tell the Sass compiler that the Sass file is a partial so should be treated differently from a file that is not a partial.

reenan about 5 years ago

Oh yeah what I meant was, there actually is a normalize.scss already in bower_components\foundation\scss\foundation.

So you wouldn't have to rename the normalize.css file, since the .scss version of it already exist. Sorry for the confusion. Check on your side, I happened to stumble upon it myself.

You are right when it comes to renaming .css files, I would agree that that is what you would have to do in order to import .css files.

Wing-Hou Chan about 5 years ago

Oh okay! Thanks for the update. You will be able to @import a Sass file into a Sass file. However you will need to leading underscore to tell the Sass compiler to treat it as a partial.

Brian about 5 years ago

Thank you both for the info!!!!

Now just so I understand, we're is the normalize.scss file and how and we're do I import that at? Do I import the normalize.scss file into the _settings.scss file since that file gets converted to the app.css file? Sorry, but still learning the inner workings of sass.

reenan about 5 years ago

In my app.scss, I have this:
HTML
@import "normalize";
@import "settings";
@import "foundation";

I added @import "normalize"; to the top of the app.scss file.
That's all I had to do.

Compass should add the normalize content in to app.css, when you're running compass watch.

So combining what Wing-Hou is saying:

App.css file gets created because app.scss doesn't have an underscore. Likewise, your _settings.scss file is treated as a partial, because of the underscore, so it does not create a separate settings.css file for it.

Normalize.scss is in bower_components\foundation\scss\foundation. In this location, normalize.css will not get created.

If you were to move normalize.scss out of that location and into .\scss, then you would have to put an underscore "_" in front of the name or else it would create a separate normalize.css file.

I hope this helps.

So just add @import "normalize"; in app.scss, and it should be okay.

Brian about 5 years ago

@reenan arbitration,

Thank you for that info!

Now for an odd question, what exactly does the normalize.css do? I know that's a dumb question but I don't see a difference adding that to compared to not having it. Is it truly needed for the responsive design or to just clear browser settings to default?

Also, I added HTML 5 Header, Nav, Article, Section, and Aside and everything seems fine without the normalize.css. I thought normalize.css was suppose to add properties for support of HTML 5.

Brian about 5 years ago

Also, I don't have an app.scss file. I make my changes to the _system.scss file which then compass creates / updates my app.css file. Is that ok?

reenan about 5 years ago

That's a question better suited to those at Zurb. For me, it was a curiosity stemming from the docs when I first started learning foundation -hacking at the css.

"Why do i need normalize.css in the css version? Why don't I need to add normalize.css when using the gem version?"

I never really looked in to it as much since everything was fine after I started using libsass, I assumed somewhere normalize.css was included. So when I heard that it wasn't being included from the get-go, I wanted to look in to it further.

But, alas, maybe this answer could shed some light for us, I guess we weren't the first to ask this question. https://github.com/zurb/foundation/issues/3187

It looks like normalization has been implemented through the Foundation core, and Normalize.css isn't necessary - just included as optional, but I really don't know from my end. Maybe it'll help to support ie 8/ie 9 (the browsers not compatible with Foundation)? I really don't have a way to test.


As for the app.scss, I guess we must have different set ups, but hey, if it's working no reason to fix it right?
The docs for Sass has improved, maybe give it another go: http://foundation.zurb.com/docs/sass.html

All in all, I find Foundation to be a very powerful framework and I'm glad to use it. So much respect for everyone behind it.

Wing-Hou Chan about 5 years ago

Hey Brian!

Normalize is written to remove quirks in browsers so that all webpages render elements consistently.

It is optional however it is recommended to use it so your site render correctly across all browsers.

Unfortunately Normalize will not help Foundation support in IE8/9 :(

There are various other stylesheets similar to Normalize such as Eric Meyer's CSS reset. They all do the same thing but differently and I don't think there is any significant advantage from choosing one from another.

As for Normalize adding support for HTML5 elements. It depends. If you use a browser such as Chrome or FireFox, they will get updates automatically so you will have HTML5 support from them browsers. However for older browsers which don't support HTML5, Normalize helps by adding a block level rule to HTML5 elements.

Brian about 5 years ago

@reenan arbitrario,

Ok, I imported the normalize.scss file into the app.scss file using compass watch and it modified my app.css file.

I have a general questions though. What is the difference between the app.scss and settings.scss? When I makes changes to the settings.scss file it changes my app.css so why can't I add the import to settings.scss instead of app.scss?

Rafi Benkual about 5 years ago

app.scss is where the imports are called into your project. _settings.scss is where your changes should be made. You could write sass into the settings file or create a separate scss file and link it up.

Wing-Hou Chan about 5 years ago

Looking at Reenan's code for @import, I would suggest this change for better efficiency:

@import
  "normalize",
  "settings",
  "foundation";