zurb-foundation

问题 I have a tooltip through foundation 5 on a span, like so: <span data-tooltip aria-haspopup="true" class="has-tip tip-top" title="My tool tip"><i class="fi-pricetag-multiple size-21"></i></span> This works fine. However, what I would like to do is only show the tooltip when a user clicks the span (instead of hovering). Then it closes when you click the a close button. I'm able to get halfway there when I add data-tooltip-open-event-type="touch" but this adds two tooltips and it still disapears

问题 I have foundation installed and when I edit and save the app.scss file it creates a "app.css" and a "config.rb" file in the sass folder of my project. when I open that "app.css" file I get this Syntax error: File to import not found or unreadable: foundation/common/ratios. and then under that I get this: File to import not found or unreadable: foundation/common/ratios. Load paths: /Applications/MAMP/htdocs/WebApp02/sass /Library/Ruby/Gems/1.8/gems/compass-0.12.2/frameworks/blueprint

问题 I have a rails app that is using both the Ember and Foundation gems. All has been working as expected until I tried to use Foundation's Orbit slider -- http://foundation.zurb.com/docs/components/orbit.html. The Foundation gem includes all of the js files in the body tag so both files I need -- foundation.js and foundation.orbit.js -- are there. The only other instructions are to attach data-orbit to whatever element you want to slide through. Mine looks like: <ul data-orbit> <li><img src="

问题 In creating a HTML email, I am using Zurb Ink framework. I have a panel that I want to have a several horizontal lines of display inside of the panel. For instance: Panel: [assigned] 12/12/2013 12:14:00 Reboot Server [unassigned] 12/12/2013 15:00:00 Shutdown Server Where there is a button for assigned/unassigned and text following. In this code I have I created the panel and the button successfully inside the panel. However, I can not get the button to take only two columns. How can I make

问题 I have a simple problem, yet I can't figure it out by myself. In short: there are an unknown number of elements which I have to position in the page, max. 4 elements per row, yet still centered. This image gives you a hint (I've set it up for the sake of example): Detailed: On the image above I covered the different scenarios. So for example if there would be 5 elements total, the first and the last row should be used (4 + 1 circles). If there would be 10 items, then two times the first row

问题 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. 回答1: 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

问题 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

问题 tl;dr; I've implemented a way to regenerate Foundation's grid inside media queries. But it results in a Sass deprecation warning. Is there a better implementation to accomplish my goal? The goal I'd like to change the total grid width (thereby changing each column size in the grid) for different responsive break points using media queries. For example, I want a small grid for tablets (with a total width of 768px) but a large grid for large desktops (with a total width of 1200px). Twitter

问题 I am trying to hide a div on both a tablet device and a desktop. I am using zurbs foundation http://foundation.zurb.com/docs/layout.php to do so. However when I try to apply the classes hide-on-tablets & hide-on-desktops the second one overrides the first one somehow and the hide-on-tablets shows up on a tablet. I can create my own media queries and hide them on both but I figure I should take advantage of classes or what's the point of having all the code. You can view it on my site at http:

问题 I'm using Zurb Foundation for a responsive website. I'd like to get an accordion nested inside an accordion using the following HTML structure: <ul class="accordion"> <li class="active"> <div class="title">First Accordion Panel Title</div> <div class="content">First Accordion Panel Content</div> </li> <li> <div class="title">Second Accordion Panel Title</div> <div class="content">Second Accordion Panel Content</div> </li> <li> <div class="title">Parent Accordion Panel Title</div> <div class=