Menu icon Foundation

Coder | Los Angeles

My Posts

No Content

My Comments

reenan commented on derekshirk's post about 5 years

The only other option is 'nested', which is basically uncompressed. Right now, it looks like the only way to keep loud comments.

see https://github.com/sass/node-sass
OutputStyle
outputStyle is a String to determine how the final CSS should be rendered. Its value should be one of 'nested' or 'compressed'. ['expanded' and 'compact' are not currently supported by libsass]

reenan commented on msc-val's post over 5 years

I have a working example here: http://codepen.io/naneer/pen/hFltG

  <dl class="tabs" data-tab data-options="deep_linking: true">
   <dd class>
       <a href="#tabs-deeplink-1">Tab 1</a>
   </dd>
   <dd class>
       <a href="#tabs-deeplink-2">Tab2</a>
   </dd>
  </dl>
<div class="tabs-content">
  <div class="content" id="tabs-deeplink-1">
    <p>Lorem ipsum ...
    <a href="#tabs-deeplink-2">Go to Tab 2</a></p>
  </div>
  <div class="content" id="tabs-deeplink-2">
    <p>Aliquam ...
    <a href="#tabs-deeplink-1">Go to Tab 1</a></p>
  </div>
</div>

reenan commented on Rickmint's post over 5 years

Here's another example I put together, this time using Madmimi's Angular-Foundation directives for the tabs.

http://codepen.io/naneer/pen/bwJAi

For more info on the angular port check here: http://madmimi.github.io/angular-foundation/
Madmimi's demo for the Tab Directive is exactly what you were looking for, I just reworked it in the context of your code and added the reveal modal behavior. I went with using the vanilla foundation for the reveal modal instead of the angular port cause it was easier to do.

reenan commented on Rickmint's post over 5 years

http://codepen.io/naneer/pen/EgAau

Using tabs at the front page, deep_linking will mark the corresponding modal tab as active and display the correct panel of content.

The custom js was a quick way to clean the "active" states on the tabs, I tried to stick with using vanilla Foundation js as best as possible for this example.

reenan commented on Jeck Thompson's post over 5 years

Another reason that can give the "identical css/app.css" message. Aside from what the previous comment has mentioned.

Make sure to remove the "//" before you make changes to the existing code in the _settings.scss file. Lines with two forward slashes in front are commented out and won't be committed to the app.css file.

// Media Query Ranges
// $small-range: (0em, 40em);
$small-range: (1em, 45em);

reenan commented on Brian's post over 5 years

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.

reenan commented on Brian's post over 5 years

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.

reenan commented on Brian's post over 5 years

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.

reenan commented on Brian's post over 5 years

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.

reenan commented on Ryan's post over 5 years

You'll need to add jquery-ui in order to use those effects. You can either download it and place it somewhere in your application, like next to jquery:

<script src="bower_components/jquery/dist/jquery.min.js"></script>

Otherwise you can use a CDN like google, more info here: https://developers.google.com/speed/libraries/devguide#jquery-ui

It be something like

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

If you want to use bower:
http://learn.jquery.com/jquery-ui/environments/bower/
Should be something like:

<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>

Other than that, your javascript should work as-is.

Posts Followed

No Content

Following

    No Content

Followers

  • Anna Everson has no published posts

My Posts

No Content

My Comments

You commented on derekshirk's post about 5 years

The only other option is 'nested', which is basically uncompressed. Right now, it looks like the only way to keep loud comments.

see https://github.com/sass/node-sass
OutputStyle
outputStyle is a String to determine how the final CSS should be rendered. Its value should be one of 'nested' or 'compressed'. ['expanded' and 'compact' are not currently supported by libsass]

You commented on msc-val's post over 5 years

I have a working example here: http://codepen.io/naneer/pen/hFltG

  <dl class="tabs" data-tab data-options="deep_linking: true">
   <dd class>
       <a href="#tabs-deeplink-1">Tab 1</a>
   </dd>
   <dd class>
       <a href="#tabs-deeplink-2">Tab2</a>
   </dd>
  </dl>
<div class="tabs-content">
  <div class="content" id="tabs-deeplink-1">
    <p>Lorem ipsum ...
    <a href="#tabs-deeplink-2">Go to Tab 2</a></p>
  </div>
  <div class="content" id="tabs-deeplink-2">
    <p>Aliquam ...
    <a href="#tabs-deeplink-1">Go to Tab 1</a></p>
  </div>
</div>

You commented on Rickmint's post over 5 years

Here's another example I put together, this time using Madmimi's Angular-Foundation directives for the tabs.

http://codepen.io/naneer/pen/bwJAi

For more info on the angular port check here: http://madmimi.github.io/angular-foundation/
Madmimi's demo for the Tab Directive is exactly what you were looking for, I just reworked it in the context of your code and added the reveal modal behavior. I went with using the vanilla foundation for the reveal modal instead of the angular port cause it was easier to do.

You commented on Rickmint's post over 5 years

http://codepen.io/naneer/pen/EgAau

Using tabs at the front page, deep_linking will mark the corresponding modal tab as active and display the correct panel of content.

The custom js was a quick way to clean the "active" states on the tabs, I tried to stick with using vanilla Foundation js as best as possible for this example.

You commented on Jeck Thompson's post over 5 years

Another reason that can give the "identical css/app.css" message. Aside from what the previous comment has mentioned.

Make sure to remove the "//" before you make changes to the existing code in the _settings.scss file. Lines with two forward slashes in front are commented out and won't be committed to the app.css file.

// Media Query Ranges
// $small-range: (0em, 40em);
$small-range: (1em, 45em);

You commented on Brian's post over 5 years

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.

You commented on Brian's post over 5 years

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.

You commented on Brian's post over 5 years

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.

You commented on Brian's post over 5 years

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.

You commented on Ryan's post over 5 years

You'll need to add jquery-ui in order to use those effects. You can either download it and place it somewhere in your application, like next to jquery:

<script src="bower_components/jquery/dist/jquery.min.js"></script>

Otherwise you can use a CDN like google, more info here: https://developers.google.com/speed/libraries/devguide#jquery-ui

It be something like

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

If you want to use bower:
http://learn.jquery.com/jquery-ui/environments/bower/
Should be something like:

<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>

Other than that, your javascript should work as-is.

Posts Followed

No Content

Following

  • No Content

Followers

  • Anna Everson has no published posts