I've checked the documentation but cannot find out how to have Zurb Foundation auto-wrap text in columns like Word does, example here: http://note.io/1aunnZM
Can anyone help, please?
You would need to use CSS3 Multiple Columns instead of Foundation's columns.
HTML
<div class="row">
<div class="small-12 columns newspaper">
ALL YOUR TEXT HERE
</div>
</div>
CSS
.newspaper {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
}
Here's the full demo.
Related
Doesnt seem to work. Is there a fix? It seems readmore is expecting sections and artcles; however, foundation uses divs i.e. row and columns. How to fix?
You can use any HTML5 tag with Foundation's grid. The default grid uses Flexbox, no floats and the styles are class based, not tag based.
Example:
<article class="grid-x grid-margin-x">
<div class="section medium-4 cell">
<!-- your content -->
</div>
</article>
Is align-right deprecated in Zurb Foundation 6?
<div class="grid-x grid-margin-x align-right">
<div class="medium-4 cell">Our Content</div>
<div class="medium-4 cell">More Content j</div>
</div>
is not aligning the cells to the right,
Seems like it works as expected here: https://codepen.io/rafibomb/pen/QzwGYO
If you want the cells to shrink, you can add the .shrink class to each cell instead of medium-4
Make sure you have the XY grid enabled in app.scss as well as
#include foundation-flex-classes;
I'm using Foundation Zurbs class selectors for using building a page in HTML. I am using Emmet/Zen Coding for building the page and cannot figure out how to use the Emmet Shortcuts for class selectors that have spaces in them.
So to clarify the Emmet shortcode below:
div.large-4*3
produces the code
<div class="large-4"></div>
<div class="large-4"></div>
<div class="large-4"></div>
However, the Zurb class selectors have a space " " in them of the order of
"large-4 columns"
if i try to use this class selector in the shortcode syntax as below
div.large-4 columns*3
it produces the following html
div.large-4 <columns></columns>
<columns></columns>
<columns></columns>
How do i write the Emmet Shortcode that produces:
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
Regards
K*
large-4 and columns are separate CSS classes. In the HTML class attribute you specify them in a space-separated list but in CSS you simply concatenate the selectors e.g. the CSS selector for <div class="large-4 columns"> would be div.large-4.columns. Assuming that this shortcode takes a CSS selector and generates the equivalent HTML you would then just need the *3 on the end.
I'm setting up a new project with Zurb foundation. I have a problem in that I want a couple of css classes to have different font-sizes to the rest of the site but doing that makes the row reduce it's width.
So
.boxed {
font-size:0.8em; // or font-size:12px causes the same issue
}
<div class='row'>
<div class='large-12 columns'>
stuff goes here
</div>
</div>
<div class='row'>
<div class='row boxed'>
More stuff here, smaller font-size
</div>
</div>
The second row is a lot narrower than the first just because I've applied the .boxed class to it.
Any ideas on best practice for this in zurb foundation?
Many thanks
I'm using 12 column grid of Zurb Foundation to split the layout of the website. As per the PSD design, I need to split the row into two columns - 20% and 80%. How can I achieve this?
Are you sure you need to split the row – and not just use columns inside a row?
If it is an option to you, you could simply just change the 12 column grid to a 10 column grid.
Using Foundation SASS, simply change this
$total-columns: 12;
to
$total-columns: 10;
in _settings.scss
Now you have a 10 column grid, and making 20% | 80% columns are at your disposal. Voila!
<div class="row">
<div class="side">
.
.
.
</div>
<div class="main">
.
.
.
</div>
css
.side{
width:20%;
}
.main{
width:80%;
}
One way to achieve this ( aside from just using your own classes as mentioned above ) is to target foundation's built in columns within your unique container.
<div id="unique-container">
<div class="large-2 columns">
<!-- your code -->
</div>
<div class="large-10 columns">
<!-- your code -->
</div>
</div>
CSS
#unique-container.large-2 {
width: 20%;
}
#unique-container.large-10 {
width: 80%;
}
Hope this helps.