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.

<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!

 
machomaaan replied on at Permalink Reply
No solutions?! :(
siton replied on at Permalink Reply
siton
"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...
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...
machomaaan replied on at Permalink Reply
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
<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!
siton replied on at Permalink Reply
siton
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.
TheRealSean replied on at Permalink Reply
TheRealSean
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

/**
     * @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>',
                ]
            ]