zurb-foundation

I'm trying to use interchange to change images based on the screen size. However, when interchange is initialised no images load. Then when I resize the browser (1024px and lower) I get an error in the console saying: Uncaught TypeError: Cannot read property 'nodeName' of undefined Which relates to line 47 of foundation.interchange.js, which is: if (/IMG/.test(el[0].nodeName)) { The code I'm trying to use is: <img data-interchange="[http://www.example.com/image.png, (default)], [http://www.exmaple.com/image-large.png, (large)]" /> This is completely standard as per Zurb's documentation. I've

have you occured that problem with zurb foundation's topbar? The input box doesnt fit the navigation. I didnt modify anything, just pasting the code from foundation's page to their example website included into foundation files. Changing the font to Open Sans doesnt help too. For starters, Foundation's styling for the .top-bar input is being overridden by the styling for the more specific input[type="text"] . However, even if you added the type attribute, the styling in the 5.0.2 release is slightly different from that of the example. To mimic the example's styling, add the following to your

I am looking to build a website in custom CSS and without frameworks just to increase my command over CSS. I want my entire site to retain its layout and look no matter what the device. Foundation does it with it's "smallgrid" and bootstrap with ".col-xs-". How do I do that without a framework? Foundation and Bootstrap both use the same way to provide you flexible grids : they fix every possible column width in percents, and use media queries to switch between mobile/tablet/desktop grids ( small , medium and large for Foundation, xs , sm , md and lg for Bootstrap). Have a look on those links

I have a header with 2 buttons : Login and Sign up Like this . When I click on one of them, a window appear : window open . For this I use the "Reveal Modal" of foundation ( Reveal Modal ). My problem : If I click on link for open a new page of my website and try to open / close the Login or Sign up popup, the window is closed but this time the shadow stay ( like this ) and I need to press F5 for this works again. I use Rails 4 and foundation 5. File _header.html.erb (View Partial) <div class="large-12 columns header"> <div class="logo"> logo </div> <div class="infos"> <ul> <li><a href="#"

I am trying to create a fixed top bar with 2 rows as described in the picture So far I have the following code but it renders in only one row: <div class="fixed contain-to-grid"> <nav class="top-bar" data-topbar> <ul class="title-area"> <li class="name"> <h1><a href="#">My Site</a></h1> </li> <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li> </ul> <section class="top-bar-section"> <!-- Left Nav Section --> <ul class="left"> <li class="active"><a class="global-nav__link">About</a></li> <li class=""><a class="global-nav__link">Resume</a></li> <li class=""><a class="global-nav__link"

I have recently updated rails and some other gems. However now I get the following error: Sass::SyntaxError at / Mixin "exports" does not accept a content block. (in /Users/mikhailja/Sites/marketing/app/assets/stylesheets/application.css.scss:341) I'm using: ruby 2.1.2 rails 4.1.8 sass 3.2.2 sass-rails 2.0.0 foundation-rails 5.4.5.0 The problem went away for a while after trying numerous gem versions but now all of a sudden its back after getting a stack level too deep error. I've tried the same version of foundation in a new app and it works perfectly. Any help to get to the bottom of this

I'm trying to create an image_tag and specify a data- attribute that does not have any value set to it. I'm trying to add data-tooltip, for use with Foundation 5 tooltips. It seems that if any value is actually set to this, Foundation uses the same tooltip text every time and ignores the title attribute of that element (so every tooltip will say whatever the first one you hovered on was... which seems buggy in and of itself on Foundation's part also) This is what I need to generate: <img src="[whatever]" title="My Tooltip" data-tooltip /> This will not work for me: <img src="[whatever]" title=

I have a very simple code with Foundation CSS <div class="row"> <div class="large-offset-1 large-6 columns">Content goes here</div> <div class="large-4 end columns">Side goes here</div> </div> I want there to be margins between the columns. Currently, there is only padding. So if I add background-color to these columns, then they stick to each other. Doesn't Foundation provide a solution for this? You could try this: <div class="row"> <div class="large-offset-1 large-6 columns padded-column"> <div class="column-content">Content goes here.</div> </div> <div class="large-4 end columns padded

In Zurb Foundation 4, is there a way to automatically switch to the smaller button style when the browser is resized smaller or on a smaller screen? For example when the screen is a standard desktop screen do this: <a href="#" class="primary button">Button 1</a> When the screen is resized smaller, do this: <a href="#" class="small primary button">Button 1</a> I have a button group of 6 buttons in a horizontal row and would like to use the small button class when the screen is resized smaller and the medium button class when the screen is "standard," is this possible? This can be accomplished