Menu icon Foundation

My Posts






My Comments

Alex Scott commented on Peter W's post over 4 years

Is this on the latest version of Rails using Ruby 2.1?

I'm pretty sure it's something to do with the sprockets gem, or there is another gem that you need to enable if you are using this.

If you are using RVM, then you may have installed with the wrong permissions. You must completely remove RVM, using 'sudo rvm implode' and then re-install using sudo, not su/root user.

Hope this helps.

Alex Scott commented on Vinyl's post over 4 years

You know a really easy way is to set the css id of the off-canvas to 'min-height: 100vh; height: 100vh;' This is the responsive unit compatible with most modern browsers. Obviously with the 'vh' standing for viewport height. There is also vw, vmin and vmax.

You can get some really cool resizing image effects using these units, requiring no javascript coding at all. All you need to add is some CSS code and maybe media queries as well.

Alex Scott commented on Rafi Benkual's post over 4 years

I'm looking into it, I've forked a copy of Foundation and hopefully I'm going to be able to modify the off-canvas code to turn this into a plugin.

@matt price I'm going to create a readme file for it, but it's merely some simple javascript to add/remove a class of 'toggled' on some elements. In the CSS, the toggled and non-toggled states just have different margins and widths, with some CSS animations thrown in for good measure.

Alex Scott commented on Khalid Alghamdi's post over 4 years

In that case Khalid
CSS
.no-bottom-border {
border-bottom-width: 0px;
}

and assign your h3 and h5 tags the class of 'no-bottom-border'.

If this doesn't work, then it would be advisable to get a live page up with the code, so that we can use inspect element feature of browser to see whats causing the border, but I think the above should fix it.

Alex Scott commented on Khalid Alghamdi's post over 4 years

At a guess, without seeing a working example, I'd do the following

.no-top-border {
  border-top-width: 0px;
}

Then I would add this class to your panel. As for the lower-most 'border', that isn't a border, it is the horizontal rule you have in your html code.

<h6 >Other</h6>
  <hr/>
  <ul class="lesson-box-Item">
      ...
  </ul>
</div>

If you setup the HTML like this

<h6 >Other</h6>
  <ul class="lesson-box-Item">
      ...
  </ul>
</div>

then the lower-most 'border' will be gone.

PS, I nearly always have helper classes in my CSS for removing horizontal and vertical borders and various pads and margins.

Alex Scott commented on Mindaugas R.'s post over 4 years

I use the 'vh' and 'vw' units for doing 100% sizes. You can set a content div height to 100vh, which in effect is 100%. There is also the 'vmin' and 'vmax' units, which resizes to a percentage of whichever dimension is smallest or biggest respectively.

.full-height {
  min-height: 100vh;
}
.full-width {
  min-width: 100vw;
}

Always use min-height and not height for doing content areas because if the viewport is resized then it is easily possible that content will overflow and not be seen.

Alex Scott commented on Rasmus S's post over 4 years

Although 5.5 has been released, that doesn't necessarily mean the gem is ready, it is probably still being tested. If you require 5.5 you could always manually insert it into the asset pipeline, I have done this before. In fact, you can even mix different foundation versions within your app if you really need to doing it that way.

Alex Scott commented on Alex Scott's post over 4 years

Yes PhilW thanks for that, it was a typo on the link.

Sankhabanerjee, I'm not using the Zurb implementation with top bar, it's a completely custom design. It's worth checking out if you haven't already.

Alex Scott commented on Chelsea Adams's post over 4 years

Hey nice one Rafi. I was just going to ask if they had tried this.

Alex Scott commented on Mikhail Svirkin's post over 4 years

No need for me here, dims said it!

Posts Followed


  • 3
    Replies
  • SASS "Recommended Install" errors

    By Peter W

    Sass

    I tried foundation a few month ago and finally gave up on the recommended install for the sass version. Foundation is a neat way to prototype so I decided to try and give it a whirl again. After three frustrating hours followoing the steps of the recom... (continued)

    Last Reply by jessica ndaye over 4 years ago









Following

Followers

My Posts

My Comments

You commented on Peter W's post over 4 years

Is this on the latest version of Rails using Ruby 2.1?

I'm pretty sure it's something to do with the sprockets gem, or there is another gem that you need to enable if you are using this.

If you are using RVM, then you may have installed with the wrong permissions. You must completely remove RVM, using 'sudo rvm implode' and then re-install using sudo, not su/root user.

Hope this helps.

You commented on Vinyl's post over 4 years

You know a really easy way is to set the css id of the off-canvas to 'min-height: 100vh; height: 100vh;' This is the responsive unit compatible with most modern browsers. Obviously with the 'vh' standing for viewport height. There is also vw, vmin and vmax.

You can get some really cool resizing image effects using these units, requiring no javascript coding at all. All you need to add is some CSS code and maybe media queries as well.

You commented on Rafi Benkual's post over 4 years

I'm looking into it, I've forked a copy of Foundation and hopefully I'm going to be able to modify the off-canvas code to turn this into a plugin.

@matt price I'm going to create a readme file for it, but it's merely some simple javascript to add/remove a class of 'toggled' on some elements. In the CSS, the toggled and non-toggled states just have different margins and widths, with some CSS animations thrown in for good measure.

You commented on Khalid Alghamdi's post over 4 years

In that case Khalid
CSS
.no-bottom-border {
border-bottom-width: 0px;
}

and assign your h3 and h5 tags the class of 'no-bottom-border'.

If this doesn't work, then it would be advisable to get a live page up with the code, so that we can use inspect element feature of browser to see whats causing the border, but I think the above should fix it.

You commented on Khalid Alghamdi's post over 4 years

At a guess, without seeing a working example, I'd do the following

.no-top-border {
  border-top-width: 0px;
}

Then I would add this class to your panel. As for the lower-most 'border', that isn't a border, it is the horizontal rule you have in your html code.

<h6 >Other</h6>
  <hr/>
  <ul class="lesson-box-Item">
      ...
  </ul>
</div>

If you setup the HTML like this

<h6 >Other</h6>
  <ul class="lesson-box-Item">
      ...
  </ul>
</div>

then the lower-most 'border' will be gone.

PS, I nearly always have helper classes in my CSS for removing horizontal and vertical borders and various pads and margins.

You commented on Mindaugas R.'s post over 4 years

I use the 'vh' and 'vw' units for doing 100% sizes. You can set a content div height to 100vh, which in effect is 100%. There is also the 'vmin' and 'vmax' units, which resizes to a percentage of whichever dimension is smallest or biggest respectively.

.full-height {
  min-height: 100vh;
}
.full-width {
  min-width: 100vw;
}

Always use min-height and not height for doing content areas because if the viewport is resized then it is easily possible that content will overflow and not be seen.

You commented on Rasmus S's post over 4 years

Although 5.5 has been released, that doesn't necessarily mean the gem is ready, it is probably still being tested. If you require 5.5 you could always manually insert it into the asset pipeline, I have done this before. In fact, you can even mix different foundation versions within your app if you really need to doing it that way.

You commented on Alex Scott's post over 4 years

Yes PhilW thanks for that, it was a typo on the link.

Sankhabanerjee, I'm not using the Zurb implementation with top bar, it's a completely custom design. It's worth checking out if you haven't already.

You commented on Chelsea Adams's post over 4 years

Hey nice one Rafi. I was just going to ask if they had tried this.

You commented on Mikhail Svirkin's post over 4 years

No need for me here, dims said it!

Posts Followed

Following

Followers

  • No Content