Zurb Foundation "expanded row" and breakpoints
Permalink
Hi guys,
I've created a new theme with the latest ZurbFoundation.
(C5 v8)
The rows are not expanded by default. How can I change this? How do I change any rows to expanded rows?
And than I need to know how to set breakpoints.
Is it possible to set these settings in editor or do I have to create presets?
Thanks alot for your help!
I've created a new theme with the latest ZurbFoundation.
(C5 v8)
The rows are not expanded by default. How can I change this? How do I change any rows to expanded rows?
And than I need to know how to set breakpoints.
<div class="expanded row"> <div class="small-12 medium-6 large-3 columns"></div> <div class="small-12 medium-6 large-3 columns"></div> </div>
Is it possible to set these settings in editor or do I have to create presets?
Thanks alot for your help!
No solutions?! :(
"The rows are not expanded by default." Because this is "row" (without expanded)
"Normally, a row is always 1200 pixels wide. Make a row completely fluid by adding the .expanded class." (foundation docs)
https://codepen.io/ZURBFoundation/pen/rmJXZy?editors=1000...
You don't have the option to add one-time "row" and other time "expanded row" with the same grid-framework but you maybe can add manually this "expanded " to the block, Or more dynamic see the video (you get dropdown with "expanded" option like this)
https://documentation.concrete5.org/developers/designing-for-concret...
or add your own "expand foundation" idea like this docs:
https://documentation.concrete5.org/developers/designing-for-concret...
And each time select the grid-framework you want.
Try these docs:
https://documentation.concrete5.org/developers/designing-for-concret...
Anyway, this is a very edge case (relative only to foundation), but you can add this issue to GitHub. In most frameworks you have container and like this, you get the idea of "max-width")
Also, this is a general issue on foundation (so learn in general the "trick"):
https://github.com/zurb/foundation-sites/issues/8886...
https://github.com/zurb/foundation-sites/pull/8889...
Q2 --------------------------
"And then I need to know how to set breakpoints."
You can override foundation CSS core by SASS version (I don't recommend to do so if you don't know CSS well)
http://foundation.zurb.com/sites/docs/media-queries.html...
http://foundation.zurb.com/sites/docs/media-queries.html#changing-t...
"Normally, a row is always 1200 pixels wide. Make a row completely fluid by adding the .expanded class." (foundation docs)
https://codepen.io/ZURBFoundation/pen/rmJXZy?editors=1000...
You don't have the option to add one-time "row" and other time "expanded row" with the same grid-framework but you maybe can add manually this "expanded " to the block, Or more dynamic see the video (you get dropdown with "expanded" option like this)
https://documentation.concrete5.org/developers/designing-for-concret...
or add your own "expand foundation" idea like this docs:
https://documentation.concrete5.org/developers/designing-for-concret...
public function getPageThemeGridFrameworkRowStartHTML() { return '<div class="row expanded ">'; }
And each time select the grid-framework you want.
Try these docs:
https://documentation.concrete5.org/developers/designing-for-concret...
Anyway, this is a very edge case (relative only to foundation), but you can add this issue to GitHub. In most frameworks you have container and like this, you get the idea of "max-width")
Also, this is a general issue on foundation (so learn in general the "trick"):
https://github.com/zurb/foundation-sites/issues/8886...
https://github.com/zurb/foundation-sites/pull/8889...
Q2 --------------------------
"And then I need to know how to set breakpoints."
You can override foundation CSS core by SASS version (I don't recommend to do so if you don't know CSS well)
http://foundation.zurb.com/sites/docs/media-queries.html...
http://foundation.zurb.com/sites/docs/media-queries.html#changing-t...
Thank you siton!
I'll add a second grid system like "foundation expanded". So if I create a new container layout I can select "foundation" or "foundation expanded".
Q2 -----------
I don't need to overwrite the whole breakpoints (small, medium, large).
When I add 3 columns (same width), C5 will generate this code
So all columns break at the small breakpoint.
But I would like to sometimes break a column like
So if breakpoint "small" is reached, 2 columns are in first row and the third column is on the bottom with full width.
How can I do this in C5?
My customers don't know foundation or bootstrap... so it should be a simple way :)
Thanks alot!
I'll add a second grid system like "foundation expanded". So if I create a new container layout I can select "foundation" or "foundation expanded".
Q2 -----------
I don't need to overwrite the whole breakpoints (small, medium, large).
When I add 3 columns (same width), C5 will generate this code
<div class="row"> <div class="columns medium-4"> </div> <div class="columns medium-4"> </div> <div class="columns medium-4"> </div> </div>
So all columns break at the small breakpoint.
But I would like to sometimes break a column like
<div class="row"> <div class="columns small-6 medium-4"></div> <div class="columns small-6 medium-4"></div> <div class="columns small-12 medium-4"></div> </div>
So if breakpoint "small" is reached, 2 columns are in first row and the third column is on the bottom with full width.
How can I do this in C5?
My customers don't know foundation or bootstrap... so it should be a simple way :)
Thanks alot!
Hey. Great ! :)
For Q2:
Try this feature:
https://documentation.concrete5.org/developers/designing-for-concret...
I believe in the future Concrete5 will add a solution for this idea in the Admin UI.
For Q2:
Try this feature:
https://documentation.concrete5.org/developers/designing-for-concret...
I believe in the future Concrete5 will add a solution for this idea in the Admin UI.
I know this is an old thread but it's also possible to add to the Theme Layouts but modifying the page_theme.php getThemeAreaLayoutPresets() to include the HTML you would like to use. It does not extend the Grid framework but is a pretty handy feature.
I've used this method to override the default row and give the editor the ability to add a full-size row.
It allows for some pretty complex stuff and allows you to change the layout at breakpoints
note, I'm using Foundation 6
I've used this method to override the default row and give the editor the ability to add a full-size row.
It allows for some pretty complex stuff and allows you to change the layout at breakpoints
note, I'm using Foundation 6
/** * @return array */ public function getThemeAreaLayoutPresets() { $presets = [ [ 'handle' => 'row_expanded', 'name' => 'Expanded Row', 'container' => '<div class="row expanded"></div>', 'columns' => [ '<div class="small-6 medium-4 columns"></div>', '<div class="small-6 medium-8 columns"></div>', ] ]
Viewing 15 lines of 18 lines. View entire code block.