zurb-foundation

Use Zurb Foundation 4 / Twitter Bootstrap 3 For Non Mobile First Projects

由 五迷三道 提交于 2019-12-03 18:51:38
问题 Has anyone used Foundation 4 or Bootstrap 3 beta? As you know, both are re-written to make it mobile first. I'm very excited with the mobile first approach, but in real life, sometimes circumstances don't let us do what we believe is the right way. So I just want to ask, has anyone used F4 or BS3 for non mobile first (or even non responsive) projects? I haven't really dived into the codes and the documentation is quite lacking. What I mean is, is there some hidden caveats in F4/BS3 that if I

RefineryCMS 2.1.0 and Zurb 4 Top menu with dropdown navigation

由 我的梦境 提交于 2019-12-03 17:30:27
I'm trying to use Zurb foundation to style an app built with the latest version of refinery. I began by following this guide http://blog.flatironschool.com/post/54511602806/build-a-blog-based-site-with-refinerycms but the latest version of refinery uses "menu-presenter" to layout the menu. I have got this far: module ApplicationHelper def zurb_menu menu_items = Refinery::Menu.new(Refinery::Page.in_menu) presenter = Refinery::Pages::MenuPresenter.new(menu_items, self) presenter.css = "top-bar-section" presenter.dom_id = nil presenter.menu_tag = :section presenter.list_tag = "ul class='left'"

Making Zurb's Foundation 3 work with IE7

由 喜欢而已 提交于 2019-12-03 17:15:26
问题 A solution has been proposed for making Zurb's Foundation 3 Framework work with IE7. Not necessarily complicated support, but certainly grid support. Solution is presented as: http://www.stormconsultancy.co.uk/blog/development/code-snippets/making-zurb-foundation-3-work-on-ie7/ I've tried to replicate this here: http://sausag.es/foundation/grid.html I've added a link to the htc file in my foundation.min.css The reference is relative to the HTML, not the CSS. I've added a line in htaccess

Full height columns on Foundation

由 依然范特西╮ 提交于 2019-12-03 16:49:52
I'm using Foundation 5 Framework and need to create 3 same height columns. Second columns includes 2 panels, I need to stretch all columns to full height (in the second columns there will be just second panel stretched to full height). Any idea? I don't want to use block grid for this. My code: <div class="row"> <div class="small-12 medium-4 columns"> <div class="panel"> <!-- here comes the content---> </div> </div> <div class="small-12 medium-4 columns"> <div class="panel"> <!-- here comes the content---> </div> <div class="panel"> <!-- here comes the content---> </div> </div> <div class=

foundation 5 reveal modal not working

由 此生再无相见时 提交于 2019-12-03 16:45:58
Good day to all, I'm using foundation 5 for my mini project. I want to use the reveal/modal feature of the framework. But it seems it does not work. index.html <!DOCTYPE html> <html> <head> <title>Job Posting</title> <link rel="stylesheet" type="text/css" href="../css/normalize.css"> <link rel="stylesheet" type="text/css" href="../css/foundation.min.css"> <script type="text/javascript" src="../js/vendor/custom.modernizr.js"></script> </head> <body> <a href="#" class="button" data-reveal-id="myNormal">click</a> <div class="reveal-modal" id="myNormal"> Modal <a class="close-reveal-modal">x</a> <

Zurb Foundation: Semi transparent top bar possible?

由 青春壹個敷衍的年華 提交于 2019-12-03 16:33:44
Is there any way to have a semi-transparent top bar with Zurb Foundation? I have defined all the relevant variables, from what I can tell, in my _settings.scss file: $topbar-bg-color $topbar-bg $topbar-dropdown-bg $topbar-dropdown-link-bg $topbar-dropdown-label-bg And have tried all number of variations (of rgba's with alpha values from 0-0.5) and have always ended up with either a fully transparent bar or a semi-transparent bar with the dropdowns/buttons stacking their background on top and thus appearing darker/more opaque. Is there any way to have a topbar that is semi-transparent

How to preload images for Foundation's Orbit image slider?

由 落花浮王杯 提交于 2019-12-03 14:19:47
Using Zurb's Foundation 4.1.5 (latest version), the Orbit image slider works great. Unfortunately it looks really for the first couple of seconds where all the images appear as a giant bulleted list. Then the JavaScript kicks in and it all is beautiful. How do I avoid the initial ugliness? Can I preload the images? Can I have everything with display: none or visibility: hidden until it's ready? Per Foundation documentation We've cleaned up how Orbit initializes by adding a wrapper feature that stops the ugly flash of unstyled content. Here's the markup needed: To add the preloader, simply

emberjs and foundation4

由 て烟熏妆下的殇ゞ 提交于 2019-12-03 13:50:59
问题 i am trying to use emberjs and foundation 4 which is now using the zepto framework, though as soon as i added the emberjs includes into my application.js the foundation code stops working. is there something wrong with the order of the includes? //= require jquery //= require jquery-ui //= require jquery_ujs //= require events //= require foundation //= require rails.validations //= require rails //= require gmaps4rails/gmaps4rails.base //= require gmaps4rails/gmaps4rails.googlemaps //=

Dynamic Alert Box with Foundation

由 核能气质少年 提交于 2019-12-03 13:28:18
How should I go about adding a new alert box dynamically to a page with foundation? It looks like I would have to insert the html markup for the box and then reinitialize foundation for the whole page... that can't be right, can it? Is there some easy method for adding an alert box dynamically? I would expect an api such as: $("#myElement").foundation('alert', "foo 123"); Example: $.post("/some/url", {some:'data'}) .fail(function(){ $("#myElement").foundation('alert', 'Process failed!'); }); No API but you can do something like this: $.post("/some/url", {some:'data'}) .fail(function(){ var

Font Awesome Image Overlay

由 筅森魡賤 提交于 2019-12-03 13:08:19
问题 I'm currently creating a image gallery (using Zurb Foundation as Framework) and would like to show the zoom icon on image hover (like this example here: http://codepen.io/Twikito/pen/Jeaub). But I would like the icon to be a font (Font Awesome) icon and not just one but 3 individual clickable icons.. Would that be possible? 回答1: I've put a quick JSfiddle together using font-awesome. The CSS is hacked together but demonstrates what's possible. It should give you a starting point to experiment
订阅 zurb-foundation