search

outboxcraft / beauter

A simple framework for faster and beautiful responsive sites
https://beauter.io
MIT License
130 stars 15 forks source link

5 Column layout ? #7

Closed chrisribe closed 6 years ago

chrisribe commented 7 years ago

I noticed that making a 5 column layout (full width), is impossible hard. Bootstrap has the same issue and must be tweaked to support it. https://stackoverflow.com/questions/10387740/five-equal-columns-in-twitter-bootstrap

One solution to this is to do like what pure-css does and implement multiple 5ths and 24ths based grids. Maybe we could look into implementing something like this for beauter ?

Chris

ramdeoshubham commented 7 years ago

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 :)

chrisribe commented 7 years ago

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

ramdeoshubham commented 7 years ago

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?

vyasnavneet commented 7 years ago

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.

chrisribe commented 7 years ago

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

ramdeoshubham commented 7 years ago

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 ?

ramdeoshubham commented 6 years ago

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