WebsiteBaker Support (2.12.x) > General Help & Support

looking for a userfriendly grid?

(1/2) > >>

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

Gast:
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  :cry:

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.

Navigation

[0] Message Index

[#] Next page