Menu icon Foundation

My Posts


My Comments

Renan Aguiar commented on Chris Williams's post over 5 years

Alex Limenko answer is right. I'm having this problem too. I was using the foundation 5.0.x (don't remember exactly which version, but certainly was an early 5). This morning I started to update my JS files to 5.2.1.

All my JS stopped working and no warning at all. After a few hours searching for a solution I decided to update the css files as well. Now it works.

Note: I'm working with foundation gem (compass).

Renan Aguiar commented on Viet Hoang's post over 5 years

I had this problem once when building my custom css using compass (foundation gem). The problem was that I forgot to add the css part which include this:

meta.foundation-data-attribute-namespace {
  font-family: false; }

Renan Aguiar commented on Renan Aguiar's post about 6 years

Stakoov, I think I need to see a doctor.....because I don't know yet who is importing the "global" hahaha ;), but its ok. It's just because I think this kind of main settings (include-open-sans) should be in a easy location like: project > scss > _settings.scss and not project > bower_components > foundation > scss > foundation > components > _global.scss like it is there. I'm making a storm for such a tiny thing haha. I will just shut up. Thanks guys.

Renan Aguiar commented on Renan Aguiar's post about 6 years

Shawn Jones, you're right. This import is located in _global.scss, thanks. According to an overwrite, you can set it to FALSE on line 24 or use another font changing the line 281.
```SASS
line 24 : $include-open-sans: true !default;
line 281 : @import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");

But who is importing this file? The foundation.scss in bower_components > foundation > scss import a bunch of things but no _global.scss there, I'm going see later. Foundation 4 was a bit straightforward, but time will make Foundation 5 better (I hope).

Renan Aguiar commented on websitemedia's post about 6 years

The difference is based on display size and priorities. For example, suppose you want to develop a website for smartphones, tablets and pcs (large displays). You can start just adding small-x classes to your grid. Medium (tablets) and Large (pc) displays will inherit the Small (smartphone) css layout. But you can create different layouts based on different displays. Like this:

<div class="row">
  <div class="columns small-12 large-6">Content A</div>
  <div class="columns small-12 large-6">Content B</div>
</div>

This leads to 2 different layouts: Large and Small. On small displays each content will fill an entire row, they will stack. But you don't want this behavior on large displays, so you can add large-x classes that will override small-x classes. In large displays each content will stay side by side, filling only one row.

Large > Medium > Small. That is the priority chain based on display. And this priority chain is accomplished by media queries. This is one of the reasons foundation works great in IE9+. IE8 does not support IE8.

At the main css file (foundation.css), you notice that .small-x, .medium-x and .large-x classes all have the same width percentage. The difference lies on which layout will want for each display size and using these classes accordingly.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Chris Williams's post over 5 years

Alex Limenko answer is right. I'm having this problem too. I was using the foundation 5.0.x (don't remember exactly which version, but certainly was an early 5). This morning I started to update my JS files to 5.2.1.

All my JS stopped working and no warning at all. After a few hours searching for a solution I decided to update the css files as well. Now it works.

Note: I'm working with foundation gem (compass).

You commented on Viet Hoang's post over 5 years

I had this problem once when building my custom css using compass (foundation gem). The problem was that I forgot to add the css part which include this:

meta.foundation-data-attribute-namespace {
  font-family: false; }

You commented on Renan Aguiar's post about 6 years

Stakoov, I think I need to see a doctor.....because I don't know yet who is importing the "global" hahaha ;), but its ok. It's just because I think this kind of main settings (include-open-sans) should be in a easy location like: project > scss > _settings.scss and not project > bower_components > foundation > scss > foundation > components > _global.scss like it is there. I'm making a storm for such a tiny thing haha. I will just shut up. Thanks guys.

You commented on Renan Aguiar's post about 6 years

Shawn Jones, you're right. This import is located in _global.scss, thanks. According to an overwrite, you can set it to FALSE on line 24 or use another font changing the line 281.
```SASS
line 24 : $include-open-sans: true !default;
line 281 : @import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");

But who is importing this file? The foundation.scss in bower_components > foundation > scss import a bunch of things but no _global.scss there, I'm going see later. Foundation 4 was a bit straightforward, but time will make Foundation 5 better (I hope).

You commented on websitemedia's post about 6 years

The difference is based on display size and priorities. For example, suppose you want to develop a website for smartphones, tablets and pcs (large displays). You can start just adding small-x classes to your grid. Medium (tablets) and Large (pc) displays will inherit the Small (smartphone) css layout. But you can create different layouts based on different displays. Like this:

<div class="row">
  <div class="columns small-12 large-6">Content A</div>
  <div class="columns small-12 large-6">Content B</div>
</div>

This leads to 2 different layouts: Large and Small. On small displays each content will fill an entire row, they will stack. But you don't want this behavior on large displays, so you can add large-x classes that will override small-x classes. In large displays each content will stay side by side, filling only one row.

Large > Medium > Small. That is the priority chain based on display. And this priority chain is accomplished by media queries. This is one of the reasons foundation works great in IE9+. IE8 does not support IE8.

At the main css file (foundation.css), you notice that .small-x, .medium-x and .large-x classes all have the same width percentage. The difference lies on which layout will want for each display size and using these classes accordingly.

Posts Followed

Following

  • No Content

Followers

  • No Content