looking for a userfriendly grid?

[johnbroeckaert]

Hello website bakers,
I am looking for a USER-FRIENDLY way to use a grid such as bootstrap / CSS grid / Flexbox or other grid system within WebsiteBaker. In particular, user-friendly for those who have to maintain the website and have little or no knowledge of html / css.
It is intended that the different columns can be used interchangeably. So for example:
2 columns 50% (then)
4 columns (30% 20% 20% 30%)
full width
3 columns (33%)

I am very curious about your suggestions.
John

[jacobi22]

i'm using a combination of W3CSS and different Blocks.
W3CSS is part of the last WB-Versions in Back and Frontend and the question was very simple for me: why another and different grid system and maybe possible conflict's?
In the frontend, i use a own template with different conditions for the blocks. in my last template, i work with 12 blocks (defined in info.php from the template). There are for example a block like
- MainContent-Left (automatic width, without MainContent-Right = 100%, with MainContent-Right = 50% with MainContent-Right and MainContent-Center = 33%)
- MainContent-Right
- Maincontent-Center
- Contactbox-left (with Contactbox-right = 50%, otherwhise = 100%)
- Contactbox-right
- Header(has 100 % width)
- Footer (has 100 % width)
- InFooter (automatic width, means: 3 InFooter-Blocks = 33% width, 4 InFooterblocks = 25% width)

for the rest, i use a own module with free definable width's for every block inside of this module, possible= 1 - 12 ( for example: if you want a picture line there)

In the backend it works via section list, add a new module and select the block position. for example: my maincontent, i add 3 x wysiwyg modules and select Mainblock-left, mainblock-right and again mainblock-left. That build's a line with two block, left and right / 50% : 50%
and another line with 100%
if i select left, center and right, i get one line with 3 blocks in a grid.
if i open the page to modify it, i see the different section's there. I add there a section-description and it's easy to handle. the only problem is: if i change more then one block without saving, i lost my changes in the first block. Its very important to save this block changes, before i go to the next block.
I think, its very easy for a user, to understand the system, because, he has nothing to do with the code inside of the template. He must know, what is what in the section administration and what's happend, if i choose this or this block

this solution needs some experience with php-conditions (if, elseif, else) and a lot of experience with the possibilities from w3css. it works nearly like bootstrab and i have it already loaded with any modules like form, news etc

[dbs]

Maybe this module is a solution?
https://dev4me.com/modules-snippets/opensource/bootstrap-multiple-columns/

[johnbroeckaert]

@dbs
Yes I know BTcolumns but the user needs to redefine the class if he/she wants another width of the column. I was searching for a more userfriendly methode  .

@jacobi22
Your solution looks like the example @ruud has posted some years ago. The trouble with this kind of appraoche is the if then else. Normaly if you have for example a main and a right of main, it is not possible to have a full size and then again a left from main and a main. That is I don't see how 

Thank you both for your replay.
John

[dbs]

In the link the 5th screenshot shows at the end 2 lines.
One for overrule the classes and one for own classes. Thought this helps.

[johnbroeckaert]

In the link the 5.th screenshot shows at the end 2 lines.
One for overrule the classes and one for own classes. Thought this helps.

You are right, but then there is still the problem that the user cann't see the content directly.

John

[jacobi22]

@jacobi22
Your solution looks like the example @ruud has posted some years ago.

i dont know the solution from Ruud, but maybe, the same stuff, because, the solutions are limited

The trouble with this kind of appraoche is the if then else. Normaly if you have for example a main and a right of main, it is not possible to have a full size and then again a left from main and a main. That is I don't see how 

but why only two blocks and not (for example) 10?

in the actual test-template, i use 14 blocks, defined in info.php
1 - 3 are Main1, left, center and right - some conditions for php:
- default is 100% - if left, center or right is alone
- if center or right is not empty, show 66% + 33%
- if center and right is not empty, show 33% + 33% + 33%
- if left is empty and center has content, center is 66%, right has 33%

block4 is my anynews block, directly behind the main content
next is main2 - same conditions like main1 (block 5-7)

block8 is the teaser, show's every time in the top of all, doesn't matter, where you have it in the block overview
next row has two possibilitys, limited width or fullwidth, use it for content or leave it empty (block 9 or 10)

block11 and block12 has 50% if you use both blocks, otherwhise 100%

block13 is my BottomBlock, come's everytime behind the footer, is on the bottom of the page

block 14 is the footer content, you can use it for a mixed content with menus etc, i use it for my Footerblock-Module, is this case for a submenu for Bakery, for shop pages, a wysiwyg-block and a contactbox



all block together looks like this


Block administration:

[johnbroeckaert]

Hi Uwe,

That are a lot of blocks .
I am not a coder but manage to understand some php. The solution from @ruud is something like this:

above the head:
// get the grid

Code: [Select]

>?php
if (!defined('WB_PATH')) die(header('Location: ../../index.php'));

ob_start(); page_content(1); $content=ob_get_contents(); ob_end_clean(); // Main
ob_start(); page_content(2); $right=ob_get_contents(); ob_end_clean(); // Right from main
ob_start(); page_content(3); $left=ob_get_contents(); ob_end_clean(); // Left from main
ob_start(); page_content(4); $fulltop=ob_get_contents(); ob_end_clean(); // Full top of the page
ob_start(); page_content(5); $fullbottom=ob_get_contents(); ob_end_clean(); // Full bottom of the page

?>
and to display the content:

Code: [Select]

<div class="container content">
<?php if ($fulltop) { 
echo '<br />'.$fulltop; } ?>
<div class="row">
<?php if ($content && $right && $left) { ?>
<div class="col-1"><div class="box"><?php echo $left ?></div></div>
<div class="col-1"><div class="box"><?php echo $content ?></div></div>
<div class="col-1"><div class="box"><?php echo $right ?></div></div>
<?php } elseif ($right) { ?>
<div class="col-2"><div class="box"><?php echo $content ?></div></div>
<div class="col-1"><div class="box"><?php echo $right ?></div></div>
<?php } elseif ($left) { ?>
<div class="col-1"><div class="box"><?php echo $left ?></div></div>
<div class="col-2"><div class="box"><?php echo $content ?></div></div>
<?php } else { ?>
<div class="col-3"><div class="box"><?php echo $content ?></div></div>
</div>
<?php }  ?>

<?php if ($fullbottom) { ?>
<div class="col-4">
<?php echo $fullbottom ?>
</div>
<?php } ?>

<div class="row">
<div class="col-4 footer">
<?php page_footer(); ?>
</div>
</div>
In the info.php

Code: [Select]

$block[1] = 'Main';
$block[2] = 'Right from main';
$block[3] = 'Left from main';
$block[4] = 'Full Top';
$block[5] = 'Full Bottom';
$block[99] = 'nothing to display';

Do i have to insert a new row in every if then else if i should use your defenition?
How does that effect the speed of the site, because it's a lot of coding then.....


John

[jacobi22]

That are a lot of blocks

i add some more last night, total now: 16 
maybe it looks like a chaos, but what i need, is flexibility - the possibility, to have a line with 50% to 50%, or three in a row. But if i dont need it, i can work also with one single block - and everything without to work in the Code - the switch is the select-box in section-administration.

The solution from @ruud is something like this

i think, it need one condition more. Whats happend, if the user select no main content, if he select only Left && Right?   

The Rest of the code is from the base nearly the same like my code

How does that effect the speed of the site, because it's a lot of coding then.

in this time's, when we use Fullwide-Pictures with 400 kb, background-image-sliders with 4 pics a 280kb and inline-videos, i dont think about some bytes for a condition.
i'm sure, that i never use all blocks together on a single page and if one condition is not true, the script goes to the next step.
Or in example: if this condition is true

Code: [Select]

<?php if ($content && $right && $left) { ?>the script will not read the followed elseif and else - it goes to the next condition like

Code: [Select]

<?php if ($fullbottom) { ?>
and dont forget - we talk about some miliseconds - not from seconds or minutes 

Do i have to insert a new row in every if then else if i should use your defenition?

#1 - the original code goes shorter - spend some bytes 

Code: [Select]

ob_start(); page_content(1); $content=ob_get_contents(); ob_end_clean(); // Main
shorter version

Code: [Select]

ob_start();page_content(1);$content = ob_get_clean();
#2 - is Content empty or not?
the code from your example show's a defined block, doesn't matter, what you have inside as content. That means: if you add 3 blocks, main content, left && right, but Left is empty (you'll add it later) - it will show an empty Block, it show only a whitespace - in worst case, you've a block with 33% in the middle, but empty block's a 33% left and right
the secret: the script say: read the content and define a variable with this content. And if you have a defined right block (but empty at the moment), the condition is true, but the variable is empty, has only a whitespace inside. And in this case, the condition (if ($fulltop)) is true and the script has to display the html-code for this.
Better solution:
ask for the content and check, is it empty or not. Example from my code:

Code: [Select]

<?php if(trim($page_Teaser)!=''){ ?>trim() remove the whitespaces at the begin and at the end and in the case of a empty block, it show's nothing like "not defined", because, the condition is not true

#3 if you need more blocks, you need more conditions
Take every Mainblock as a row in the page. For example: the code from the top use 3 row's, the FullTop, the Main-Content, the FullFooter. And: you can split the Main-Content into 3 Parts (Left, Center, Right)
In my solution, i can use some row's more (if i want) and i can switch the design of the rows, fullwidth, Normalwidth, 50/50, 33/66 or 66/33
I'm sure, my code to read the page_content_Blocks is longer then the whole script in your post, but thats the price, if you want to have a solution for every case.

to give an answer to your question:

Do i have to insert a new row in every if then else if i should use your defenition?

Yes.
Only as Example:
#1 think about your template. What is the best solution for you and for this case (this project)? Is it okay, that you have only one row with maybe 1, 2 or 3 Blocks inside or is it important, to have more?
#2 think about all the pages in the project, not only one. In the most cases, the startpage has more content and the most differents in the styling. the example code has "only" 3 possible variants, 1 block = 100%, 2 blocks = 66%/33% or two blocks = 33%/66%
The problem: if you want now another fullwidth-block, it will add this content to the existed block, the only working solution is a new block, so that you come out from this row and go into the next one. And then, you have to know, what you want. For me, it was not good, to have the same schema from row#1 (3 blocks a 33%) also in the next row, so i add here a fullwidth-block. But then, i think, its better to have here a switch, fullwidth over the whole desktop or a limited width with 960 Pixel, so i add two new blocks for this instead of only one, you can copy the code from the Fulltop or Fullbottom and rename it.
In the next step, i think, maybe, its good, to have another possibility, to add here a row with 33%-Blocks, so i make a copy of the maincontent-block and another one with 50/50
my teaserblock is the same like ruud's FullTop, and my BottomBlock the same like FullBottom in the Code. My AnynewsBlock is part of this template since the begin, so i leave it there, it doesn't matter now   
And that's all - the "secret" is a good overview, a good description in the block names and "self-speaking Variable-Names" like $half_leftBlock or $half_rightBlock.

In my case, all my customers have no experience with HTML and maybe, they are schocked, if they see the selectbox in the section administration, but it's simple to understand and it's not possible, to make errors there - it show's the content in every case and will not destroy the rest, if you choose the wrong block. if the user want, he can try all possible blocks and look for the best solution.

Important for me is also, to stay in the responsive structure and this goes only with a grid system. it doesn't matter, what system you have at the end, bootstrab, flexbox or w3css, it makes no differents in a browser. it's only the personal experience, your experience...
in my case, i'm not sure about some possible conflicts, if i mix bootstrab with the w3css from form, news or the galleries

At last point.... everything has also a bad side - in my case: the backernd overview. For the example here, i work with wysiwyg's only and i have now a list with 14 WysiwygBlocks. You have to look very carefull and you have to use the section title. A wysiwyg section is very small in the height, so no problem. but if i use here also other modules like news, Form, Folder- or DownloadGallery, it's a long way down to the bottom 

[johnbroeckaert]

many thanks for this extensive explanation!