zurb-foundation

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? 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 with. <a href="#" title="" class="image"> <img src="http://www.lyricis.fr/wp-content/uploads/2010/04

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({ itemSelector: '.work_item', isAnimated: true, }); HTML <div class="row"> <div class="twelve columns"> <div id=

The problem Foundation 5 was released last week, that's great, but the new version requires to use bower for using F5 with SASS and the official documentation seems to be a bit incomplete and immature. I'm trying to create a project using the steps proposed by the docs: [sudo] npm install -g bower and then gem install foundation No problems here. The problem is when creating a Compass project: foundation new MY_PROJECT cd MY_PROJECT compass compile After Compass compilation, I get the following error: directory stylesheets/ error scss/app.scss (Line 1: File to import not found or unreadable:

Seems to be CSS related because initializing the map in a simple HTML page works just fine. I have added suggested CSS to fix known issues (below), but can't seem to get rid of this. #map { *, *:before, *:after { -moz-box-sizing: content-box!important; -webkit-box-sizing: content-box!important; box-sizing: content-box!important; } img { max-width: none; height: auto; } label { width: auto; display: inline; } } Nathan For anyone else looking for a temp solution for this bug: CSS .map *, .map *:before, .map *:after { -webkit-transform: none !important; } SASS .map { *, *:before, *:after {

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').trigger('reveal:closed')( {}); $('#myModal').reveal.closed(function() {}); $('#myModal').reveal()

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 Bootstrap has a similar implementation, but Foundation does not. What I'm doing I've implemented a simple

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> </div> ); } }); The Form component is pretty standard: Form = React.createClass({ handleSubmit: