Uikit layout with GridFramework

Developing with Concrete
1

Hello,

I am completely new to concretecms, but I really like it so far :slight_smile:

I am trying to port a uikit css (https://getuikit.com) based html site to concretecms.
Unfortunately I am struggling with my custom layouts.

The createy layout seems to nest columns into a main column for whatever reason.
The slider used to change the colum size is not working. Do I need to include special js for this to work?

image
image343×600 7.15 KB

Uikit expects the grid to look like this:

<div uk-grid>
    <div>This is a column</div>
    <div>This is another column</div>
</div>

Widths can be specified like this:

<div uk-grid>
    <div class="uk-width-1-4"></div>
    <div class="uk-width-1-4"></div>
    <div class="uk-width-1-2"></div>
</div>

Can this somehow achieved with the GridFramework class?
My current HTML output looks like rows are nested instead of direct children’s of the grid.

Thanks and kind regards
Andreas

2

I’m not sure I can add much to help, other than to say that I’ve also struggled with getting this grid layout tool to work reliably with custom CSS grids.

I have got it to work ok with a custom grid, but I had to still use containers and a row class, the controls expect those things to be there.

It would still occasionally get confused, and you’d have to refresh the page to reset the handles.

More recently I’ve ended up just using Bootstrap’s CSS grid in our custom Sass projects, just for a bit more compatibility, and to make these controls work reliably. Ok for what we’re doing, very clumsy if you’re wanting to use something like UIKit by itself.

So I don’t believe you’re missing anything, you just might need to get creative with a way to approach it, where you still have rows and containers… be prepared that it might not be possible with UIKit…

3

Thanks for your answer.
This is very sad to hear :sweat_smile:
I hoped it was easily possible to port some of my themes to concrete, but it seems like it is very hard to use something else than concrete’s bedrock css :frowning:

4

The Modena theme uses a custom grid and handles layouts. There are also some foundation based themes. So I don’t think that is a generic issue. But perhaps an issue with some grids that don’t follow the assumed container/row/column nesting pattern.

You could perhaps use some containers (the Concrete component called Container) to make up for difficulties with layouts.

5

I unfortunately have no access to the source code of the Modena theme and hence can not see how they approach this issue.

But perhaps an issue with some grids that don’t follow the assumed container/row/column nesting pattern.

I really tried keeping the same definitions for the grid.
This markup should be safe and identical, at least as far as I can see in the documentation.

Bootstrap:
<div class="row">
	<div class="col-3">
		<div>1</div>
	</div>
	<div class="col-6">
		<div>2</div>
	</div>
	<div class="col-3">
		<div>3</div>
	</div>
</div>

UiKit:
<div class="uk-grid">
	<div class="uk-width-1-4">
		<div>1</div>
	</div>
	<div class="uk-width-1-2">
		<div>2</div>
	</div>
	<div class="uk-width-1-4">
		<div>3</div>
	</div>
</div>

I copied the Bootstrap5 class and changed the pieces to accomodate the uikit markup.
But creating the layout results in broken width-sliders which break the theme completely when I save.

See result here: Watch 676 | Streamable

I will try containers and see, if they are sufficient for my usecase, but I’d rather still use layouts if possible.

6

It seems like I was able to fix the issue :slight_smile:

I dug into the issues and found this thread: Issue when adding container layout using bootstrap5 grid - Issue Active in Version 9.12 · Issue #10954 · concretecms/concretecms · GitHub
The corresponding fix for atomic was this one: Fix #10954 · concretecms/concretecms@3852949 · GitHub

All I had to do was including this snippet of css into my css file:

div#ccm-theme-grid-temp div.uk-grid,
div#ccm-theme-grid-edit-mode-row-wrapper div.uk-grid {
    position: relative;
}

If anyone stumbles accross a similar issue in the future, here are the relavant basic things to make a custom UiKit based GridFramework work:

public function getPageThemeGridFrameworkRowStartHTML()
    {
        return '<div class="uk-grid">';
    }

    public function getPageThemeGridFrameworkRowEndHTML()
    {
        return '</div>';
    }

    public function getPageThemeGridFrameworkContainerStartHTML()
    {
        return '<div class="uk-container">';
    }

    public function getPageThemeGridFrameworkContainerEndHTML()
    {
        return '</div>';
    }

    public function getPageThemeGridFrameworkColumnClasses()
    {
        $columns = array(
            'uk-width-1-6',
            'uk-width-1-3',
            'uk-width-1-2',
            'uk-width-2-3',
            'uk-width-5-6',
            'uk-width-1-1',
        );

        return $columns;
    }
1 Like