I'm new to JS and I'm trying to find a solution to creating a responsive custom grid layout on the Zurb Foundation 4 framework.
Custom Layout
There will be a set size for bigger blocks and the smaller ones will fill in around it but in this type of pattern as more divs are added.
But in a mobile layout, they will all become the same size and stack.
I've been messing around with mason.js and jQuery masonry but I haven't had any luck. Would either of these work for my problem or is there something else I should look into?
You can do a layout like that with just nested rows and using other grid classes like "small-", "large-", push, pull etc
I know you mentioned a JavaScript solution, but I thought I would offer up a crude Html/CSS option.
<div class="row">
<div class="large-2 columns">
<div class="row">
<div class="large-12 columns"></div>
</div>
<div class="row">
<div class="large-12 columns"></div>
</div>
</div>
<div class="large-5 columns"></div>
<div class="large-5 columns"></div>
</div>
<div class="row">
<div class="large-4 columns"></div>
<div class="large-8 columns">
<div class="row">
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
</div>
<div class="row">
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
</div>
</div>
</div>
Here is an extremely rough jsFiddle example
Obviously some playing around with the column count and possibly customize margins would be in-order. I did remove the media queries since the result window was playing tricks on me.
Hope this helps either way.
I wrote a plugin that does just this. check out www.masonjs.com that should do exactly what you're looking for! Cheers!
Related
Let’s say that I have a carousel on my index page.
Inside the template for index, it loads a particular channel, “Foo”
<div "slider">
<ul class="slides">
{exp:low_reorder:entries set="foo" dynamic="no"}
<li class="foo_{entry_id}">
<div class="container">
<div class="row-fluid">
<div class="span12">
{foo_html}
<style type="text/css">{foo_css}</style>
</div>
</div>
</div>
</li>
{/exp:low_reorder:entries}
</ul>
</div>
That channel, naturally, has a list of content items
I want the list of content items displayed to exclude one of the items in the channel if the referrer is not bing.
Can anyone show me the way that they would go about accomplishing that? I'm not getting any traction on the ellislab forum.
I whipped up a plugin for you, which you can find here
You can wrap the item in a conditional using that plugin to check if it should be output.
Can I use handlebars to create template or module structure like this
<div id="container">
<div id="left">
//include module A src
</div>
<div id="right">
//include module B src
</div>
</div>
If it cannot, what is a good template engine that can couple with nodejs do achieve the above? I come from java web framework, and this can be achieve very easy but it is not so apparent here.
Check partial section of handlebarsjs docs.
So first you register the partials:
Handlebars.registerPartial('moduleA', fs.readFileSync('moduleA.html'));
Handlebars.registerPartial('moduleB', fs.readFileSync('moduleB.html'));
Then in the html you do this:
<div id="container">
<div id="left">
{{> moduleA}}
</div>
<div id="right">
{{> moduleB}}
</div>
</div>
I have probably a simple question for someone with bootstrap experience. On this page: http://limitedwave.com/watsonmetals/site/, in the first section just under the nav bar I have 4 'zones'. One house a logo, directly under it some text in a box, to the right of both a large navigation grid, and under that an 'extra row' below the grid only.
I'm not laying this out properly on the bootstrap grid and I'd like to. I have the content in divs that are more or less stacked and floated with css and heavy margin manipulation to make it look as it does. Am i wrong in assuming bootstrap can layout these divs more like a table via its grid? Perhaps this might also help with the fact that as soon as I resize my browser to the next smaller size from full width mac pro size, the logo and text shift right.
<section id="intro" data-speed="2" data-type="background">
<div class="container">
<div class="row-fluid">
<div id="welcome-screen" class="span16 text-left">
<div id="lrail">
<div id="logocontainer">
<img id="logo" src="img/logo-watson.png" alt="Watson Metals, LLC." width="130" />
</div>
<div id="welcome-box" class="span3 text-right">
Watson Metals manufactures quality metal building panels, for roof, siding, accessories for all building applications. We offer a pole barn package, steel siding or metal roofing for your personal specifications and needs.<br><br>
With an array of metal panel profiles such as Tuff-Rib, R-Panel, and our standing seam profile, we can provide material for almost any application. Our standing seam profile is available in either 12” or 16” widths and can be conveniently produced on your jobsite using our portable roll-former.
</div>
</div>
<div class="span12 text-center">
<div id="main-interface-container">
<ul id="interface-list">
<li><a class="link1" href="link1.php">Roofing Panels</a></li>
<li><a class="link2" href="link2.php">Post Frame Buildings</a></li>
<li><a class="link3" href="link3.php">Other Products</a></li>
<li><a class="link4" href="link4.php">Custom Trim</a></li>
<li><a class="link5" href="link5.php">Warranties and Information</a></li>
<li><a class="link6" href="link6.php">Frequently Asked Questions</a></li>
<li><a class="link7" href="link7.php">Energy Star</a></li>
<li><a class="link8" href="link8.php">About Our Company</a></li>
<li><a class="link9" href="link9.php">Contact Us</a></li>
<li><img id="home-locations" src="img/watson-locations.png" alt="Locations" /></li>
</ul>
</div>
</div>
<div class="span8 text-center"><span class="copyright">Copyright © 2013 Watson Metals LLC., All Rights Reserved.</span></div>
</div>
</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</section>
http://twitter.github.io/bootstrap/scaffolding.html#gridSystem
Bootstrap's documentation is pretty solid.
The standard container->row->span# should work just fine for that grid. It should also take care of the responsiveUi issues you were having with the smaller screen.
I would like to get bootstrap to show something like the attached image, meaning a div wrapper with blue background-color some padding and 3 images inside (I use this horrible colors just for the sake of clarity).
It should be pretty straight forward but, honestly, I couldn't get it. If I try something like :
<div class="span9">
<div class="row">
<div class="span9" style="background-color:blue;">
<img class="span3" src="..."></img>
<img class="span3" src="..."></img>
<img class="span3" src="..."></img>
</div>
</div>
</div>
Inside my container class, the tird image does not fit in the wrapper and goes below the other two, as it appears in this image:
Anyone would give me a hand, please?
Try this:
<div class="span9" style="background-color:blue;">
<div class="row">
<div class="span3">
<img class="span3" src="..." />
</div>
<div class="span3">
<img class="span3" src="..." />
</div>
<div class="span3">
<img class="span3" src="..." />
</div>
</div>
</div>
Possible solution is clearing floats? Quite a bit has been written lately on this but here is one article as a start. Clearing Floats
From a design and requirements point of view, you might consider something like create divs, then fill them with png images that are extra large then add a transparency to the borders so that have a clear background to appear as if they were bordered as such or show your background color.
The trick I believe for you is to use transparent .png's would do the trick, and or adding the desired look to your images.
I have a problem with a standard Twitter Bootstrap progress bar with some text if it is within <div class="hero-unit">, also standard Twitter Bootstrap class:
<div class="hero-unit">
<div class="container">
<div class="progress progress-striped active">
<div class="bar" style="width: 80%;">80%</div>
</div>
</div>
</div>
Here is a jsFiddle code, that shows the text is not aligned properly.
Why this is happening and how to fix? I've tried to fix it but had no luck.
Thank you.
It is the line-height: 30px on hero-unit which causes the problem.
I've change the code like this:
<div class="hero-unit" style="line-height: inherit">
Of course it is better to assign a class to it, instead of using the style attribute.