Menu icon Foundation

Designer | Campbell, CA

Partner at ZURB. One of the creators of Foundation. Nerd.

My Posts

No Content

My Comments

Jonathan Smiley commented on Lex Gabrees's post about 5 years

That's correct - visibility classes are one way to do this. A more optimized albeit slightly more complex way is to use Interchange and load partials with the correct content for the correct device / screen size.

Jonathan Smiley commented on Baskar Gnanavelu's post about 5 years

This is a fairly complex layout – looks like you would needs tabs to run across the top, containing a set of tabs to handle the left-hand nav, and then a third levels of tabs for the Start, Upcoming, Cancellation section.

Jonathan Smiley commented on Marc Pirard's post about 5 years

By default on small screens Clearing eliminates most controls in lieu of supporting a swipe to move between images. If you inspect it on small screens you'll see we're hiding the controls – you could re-enable those with some custom CSS and they would work fine.

Jonathan Smiley commented on Vishal Reddy's post about 5 years

This isn't something we support with the slider element right now, but feel free to file an issue for a feature request on Github (github.com/foundation/zurb/issues) and we'll investigate. Right now this would require quite a bit of custom JS.

Jonathan Smiley commented on Paul Phillips's post about 5 years

Your CSS should be applied by the browser frame regardless - is it possible you're loading in a new partial / view which no longer includes the CSS link in the <head>?

Jonathan Smiley commented on Monk's post over 5 years

Sorry Eric, can you elaborate a little? Do you mean you want the active accordion to always be hidden on small, so there is no active accordion element on small at all?

Jonathan Smiley commented on Designer's post over 5 years

Yes – future versions of Foundation will be better suited to this kind of app-like functionality. In various, secretive ways. Stay tuned.

Jonathan Smiley commented on Designer's post over 5 years

The Foundation grid is based on percentage sizes, so what's happening in your code is that your sidebar is 300px wide and your content column is still 75% wide. As soon as 75% of your row is no longer available (with a 300px sidebar that would be once the row is < 1200px wide, 75% would require 900px) it'll drop down due to lack of space.

Foundation does not by default support a fixed width sidebar like that, so you will need to do something custom. Most solutions for this sort of thing are pretty hacky – if you're not worried about older browser Flexbox applied to two custom elements in a row would make this very simple, otherwise you could either absolutely position the left column and then have a 12-colujmn content block with a 300px left padding applied to occupy the space. There are a few solutions, feel free to reply back if you need more direction.

Jonathan Smiley commented on Noah Breen's post over 5 years

According to the official W3C spec, an img tag must have a SRC attribute in order to be valid: however it works perfectly well without one, and in fact the Interchange JS will evaluate and then populate the SRC attribute itself.

As far as I know there is no SEO hit from omitting the SRC attribute initially – it's much more important to have alt text for your interchange element, for example. There are a lot of things the W3C validator throws issues for, it's....exceedingly strict. Neither the browser nor Google will punish you for most of these issues.

Jonathan Smiley commented on Rafael Soufraz's post over 5 years

Hey Rafael,
Foundation does not have, built-in, a construct like jQuery Mobile which manages page-to-page transitions by hash from a single file. We're working on some projects that would make this easy to do in Foundation, but right now you would need to use another framework in tandem with Foundation to enable this. I don't know very well what might conflict between Foundation and a heavy-handed framework like jQ mobile but I suspect you would need to do some work to have them play nice. Best answer I can give you right now us: we're working on it.

Posts Followed

  • 4
    Replies
  • Neutralize the Foundation Grid

    By Dave

    grid

    Dear Santa, New to Foundation and happy to hear about the new version. I'm working on a project that has a members control panel. The panel has a drag-sort image manager page, that the Foundation grid is playing havoc with. The only solution I could... (continued)

    Last Reply by Dave over 5 years ago


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Lex Gabrees's post about 5 years

That's correct - visibility classes are one way to do this. A more optimized albeit slightly more complex way is to use Interchange and load partials with the correct content for the correct device / screen size.

You commented on Baskar Gnanavelu's post about 5 years

This is a fairly complex layout – looks like you would needs tabs to run across the top, containing a set of tabs to handle the left-hand nav, and then a third levels of tabs for the Start, Upcoming, Cancellation section.

You commented on Marc Pirard's post about 5 years

By default on small screens Clearing eliminates most controls in lieu of supporting a swipe to move between images. If you inspect it on small screens you'll see we're hiding the controls – you could re-enable those with some custom CSS and they would work fine.

You commented on Vishal Reddy's post about 5 years

This isn't something we support with the slider element right now, but feel free to file an issue for a feature request on Github (github.com/foundation/zurb/issues) and we'll investigate. Right now this would require quite a bit of custom JS.

You commented on Paul Phillips's post about 5 years

Your CSS should be applied by the browser frame regardless - is it possible you're loading in a new partial / view which no longer includes the CSS link in the <head>?

You commented on Monk's post over 5 years

Sorry Eric, can you elaborate a little? Do you mean you want the active accordion to always be hidden on small, so there is no active accordion element on small at all?

You commented on Designer's post over 5 years

Yes – future versions of Foundation will be better suited to this kind of app-like functionality. In various, secretive ways. Stay tuned.

You commented on Designer's post over 5 years

The Foundation grid is based on percentage sizes, so what's happening in your code is that your sidebar is 300px wide and your content column is still 75% wide. As soon as 75% of your row is no longer available (with a 300px sidebar that would be once the row is < 1200px wide, 75% would require 900px) it'll drop down due to lack of space.

Foundation does not by default support a fixed width sidebar like that, so you will need to do something custom. Most solutions for this sort of thing are pretty hacky – if you're not worried about older browser Flexbox applied to two custom elements in a row would make this very simple, otherwise you could either absolutely position the left column and then have a 12-colujmn content block with a 300px left padding applied to occupy the space. There are a few solutions, feel free to reply back if you need more direction.

You commented on Noah Breen's post over 5 years

According to the official W3C spec, an img tag must have a SRC attribute in order to be valid: however it works perfectly well without one, and in fact the Interchange JS will evaluate and then populate the SRC attribute itself.

As far as I know there is no SEO hit from omitting the SRC attribute initially – it's much more important to have alt text for your interchange element, for example. There are a lot of things the W3C validator throws issues for, it's....exceedingly strict. Neither the browser nor Google will punish you for most of these issues.

You commented on Rafael Soufraz's post over 5 years

Hey Rafael,
Foundation does not have, built-in, a construct like jQuery Mobile which manages page-to-page transitions by hash from a single file. We're working on some projects that would make this easy to do in Foundation, but right now you would need to use another framework in tandem with Foundation to enable this. I don't know very well what might conflict between Foundation and a heavy-handed framework like jQ mobile but I suspect you would need to do some work to have them play nice. Best answer I can give you right now us: we're working on it.

Posts Followed


Following

  • No Content

Followers

  • No Content