zurb-foundation | 易学教程

integrating jquery masonry into a zurb foundation grid

阅读更多关于 integrating jquery masonry into a zurb foundation grid

问题 I'm having issues integrating masonry with a Foundation grid layout. Essentially with identical width images with varying height, the masonry works as expected but at certain breakpoints the grid only will have a two column layout as opposed to the usual four. However if you keep minimizing the browser width, the four columns return so it can't be that there isn't the room to display them. var $container = $('#work_grid'); $container.imagesLoaded( function(){ $('#work_grid').masonry({

Creating inline date_select dropdowns using simple_form and zurb foundation

阅读更多关于 Creating inline date_select dropdowns using simple_form and zurb foundation

I'm using Simple_Form with Zurb Foundation in my rails application. One of more views has a form with the following date_select The form fields are showing up stacked rather than inline. I've checked everything and can't figure out how to get these to show-up correctly. What am I missing? You can see the repo at https://github.com/stanrails/momtomom in the event.html.erb view. The code for the section is below: <div class="row"> <div class="small-5 columns"> <%= f.date_select :eventDate %> </div> </div> One of the workaround is to have something manually like this: form.custom .dropdown.date{

How to use Zurb Foundation reveal with open, opened, close, closed callback functions?

阅读更多关于 How to use Zurb Foundation reveal with open, opened, close, closed callback functions?

问题 On zurb foundation's website at http://foundation.zurb.com/docs/reveal.php they listed some Options including open: callback function that triggers 'before' the modal opens. opened: callback function that triggers 'after' the modal is opened. close: callback function that triggers 'before' the modal prepares to close. closed: callback function that triggers 'after' the modal is closed. But I have no idea how to use them with my modal. Itried $('#myModal').closed(function() {}); $('#myModal')

zurb foundation center content in the grid

阅读更多关于 zurb foundation center content in the grid

I'm trying to center horizontally an image into a zurb column but it seems impossible. I tried everything, searched everywhere, but I cant get it to work. Here is my code: <div class="row"> <div class="twelve columns"><br /> <img src="img_06.jpeg" alt="slide image"> </div> </div> currently landscape images are alright on the 12 column grid, but when a portrait image comes along it is on the left side of the grid. If i give it a 25% padding it goest to the center, but I'm using php to pull all the images from a folder and generate the code on the fly, so i can't have 25% padding on all the

How to make react.js play nice together with zurb reveal modal form

阅读更多关于 How to make react.js play nice together with zurb reveal modal form

问题 I am trying to integrate zurb reveal with form into react component. So far next code properly displays modal form: ModalForm = React.createClass({ handleSubmit: function(attrs) { this.props.onSubmit(attrs); return false; }, render: function(){ return( <div> <a href="#" data-reveal-id="formModal" className="button">Add new</a> <div id="formModal" className="reveal-modal" data-reveal> <h4>Add something new</h4> <Form onSubmit={this.handleSubmit} /> <a className="close-reveal-modal">×</a> </div

Azure Websites and Sass

阅读更多关于 Azure Websites and Sass

I have been trying to find if there is a way to support sass with a windows azure website? Can someone point me to some documentation or let me now if this is even possible. I am specifically looking to support Zurb Foundation responsive framework which is built on sass(scss). I already do this by using the complied css files with an override css file. I would like to use the semantic styling of sass if possible. Thanks Yes. But there are a few hoops because of Sass/SCSS. By default, Foundation uses Compass for its SCSS compilation. However, Sass and Compass are both written in Ruby, which

Using Zurb Foundation Interchange with AngularJS

阅读更多关于 Using Zurb Foundation Interchange with AngularJS

I'm working on an AngularJS project that uses Zurb Foundation as its CSS framework. I'm trying to figure out how to using Foundation's data interchange within the context of an AngularJS view. Is this even possible, I can't seem to get it to work. This is what I currently have: index.html <!DOCTYPE html> <html ng-app='app' xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="foundation/normalize.css" /> <link rel="stylesheet" href="foundation/foundation.min.css

Making Zurb's Foundation 3 work with IE7

阅读更多关于 Making Zurb's Foundation 3 work with IE7

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 about the htc file. But still I cannot get the grid to show in IE7 as it does in IE8. Where am I going

Zurb Foundation Reveal Modal - preventing close on background click

阅读更多关于 Zurb Foundation Reveal Modal - preventing close on background click

When I am opening my Reveal Modal , I would like to prevent it from closing on background click (which is a default behavior). I am using Zurb Foundation 5.0.2 . Any help would be appreciated. If you set the closeOnBackgroundClick option to false then your modal won't close when you click in the background. <div class="reveal-modal" data-options="closeOnBackgroundClick:false"> Yehhhhh Finally Found It: Put below code on your foundation reveal model. Than it not close by clicking on background or by pressing esc key. data-options="close_on_background_click:false;close_on_esc:false;" Ex: <div id

Creating a Foundation-style Block Grid in Bootstrap 3?

阅读更多关于 Creating a Foundation-style Block Grid in Bootstrap 3?

In Zurb Foundation 3+, they have a CSS construct of a "block grid" which is an unordered list where you can specify the number of items in a row. Here's their docs on it. There's no way I can see to do this in Bootstrap 3; there's only columns. I'd like to have the ability to have a repeated element (such as a LI) display easily as a responsive grid, where I can specify how many across by breakpoint, as in Foundation. I figure I can roll my own, but wanted to see if anyone had suggestions or had come across this before. I too wish this was feature in BS3. You'll have to create your own