5 Column layout ? about beauter HOT 7 CLOSED

Although beauter is pure css by source, it uses javascript for many of its elements like responsive navigations, alerts, modals etc. And creating them with pure CSS is a pain in neck with compatibility issues. Hence for full utilization of beauter, user always has to use javascript along side beauter css. Having a javascript generator would not that much of trouble.

from beauter.

Hello Chris,
Thank you for opening such an important and useful issue. Of course this is the power of open source, improving beauter together, I welcome your suggestion. Forming 5 and 7 columns layout would be a great pain indeed.
I saw how bootstrap and purecss have implemented their solution. Is having a custom grid generator plugin (just as purecss also provide) a nice idea, considering beauter as a CSS only framework? Coz this would add a lot of flexibility to the designer. (At the cost of JavaScript)
So Chris, what's your take on this issue? It would be nice of you to help us implementing such things properly for beauter 3.0 updates :)

from beauter.

Well, as you said I am not sure creating a grid generator is the way to go.
Maybe simply creating 5ths-Based Units and 24ths-Based Units column grid layouts ?
They could compliment the current 12 unit base grid.

Ex:
m1-5 to m5-5 => medium col 1 to 5 of a 5 column layout
m1-24 to m24-24 => medium col 1 to 24 of a 24 column layout

Any thoughts ?
Chris

from beauter.

I clearly got your idea for complementing the current 12 unit based grid with 5 and 24 based. But I am thinking about the possibilities and (difficulties) we can achieve on having JavaScript working behind. Not only for grids, but in general. Although I considered Beauter to be a vanilla CSS Initially, I believe hardly any site would exist without using JavaScript now a days. Specially concerned about size, there is a lot we can save and make things more DRY.
What's your opinion on Dynamic styling using JavaScript for keeping Beauter lighter and flexible?

from beauter.

I agree with @vyasnavneet adding some sort of basic JavaScript to implement standard features would be nice.

As for the dynamic grid system not too sure, we could maybe use css variables.
I found this medium article with a working prototype.
https://medium.com/@fionnachan/dynamic-number-of-rows-and-columns-with-css-grid-layout-and-css-variables-cb8e8381b6f2

But support for variables is not 100%
http://caniuse.com/#feat=css-variables

Maybe we can inspire ourselves with it an implement a js version if it is more flexible I am not sure.
Issues with a purely JavaScript system is that on initial display of your html + css you would see a flicker on page load. Unless you want a JavaScript css generator ?

Any thoughts ?
Chris

from beauter.

I found @chrisribe suggestion the best yet. We shall add new classes for new sizes. 5 columns or 7 or 24 etc.

1. JavaScript will add a render delay due to dynamic styling and this will not be convenient for many browsers.
2. CSS variables are still facing compatibility issues.
3. Using hacks like offsets etc (commonly used with bootstrap grid) is a bit complex, I don't consider it EASY for a beginner, considering beauter a simple framework.

Any thoughts ?

from beauter.

We have added a simple 5 column grid and released the code. Thank you very much for your suggestions. 😄 We welcome you for your further contributions for Beauter 0.3.

from beauter.