Grid systems not perfectly being followed

[nikhilrayaprolu]

Actual Behaviour Right now I find many anti patterns in our project: I find a lot of issues being raised on CSS and responsive design, I think the main reason for this is because we are not following any perfect grid structure and just making quick fixes. some of the quick fixes I see which are followed are:

• I find just many hard coded screen sizes with random min and max sizes being used https://github.com/fossasia/susper.com/blob/master/src/app/index/index.component.css . Actually, a project can be built only upon using max 5 media screen sizes https://stackoverflow.com/questions/11384720/what-are-good-resolution-values-to-use-with-media-queries

• secondly, I could see that if there is some grid structure that could be followed, we aren't doing that.for instance to have two different elements of the same width we could just have one class with styling regarding the width and make those two classes inherit this or wrap them with another div and control the width of both.

Expected Behaviour Please list out all places where we are using anti patterns like this, which could be improved with a simpler design and solve them. add any extra anti patterns we are following.

[Marauderer97]

I agree I am having a very tough time, with responsiveness, even the smallest of issues take more time because we use the same component on different pages, and want different styles for it, how do we introduce a grid structure now @nikhilrayaprolu ?

[nikhilrayaprolu]

@Marauderer97 the only thing we could do is remove all anti patterns one by one. one best way to follow here is a top down approach. first see if there is something that could be changed in app component, then go to its sub components. In this way, we won't break anything.

[harshit98]

@nikhilrayaprolu @Marauderer97 We can start on this issue from smaller screen size. Expand the viewport and check if there are any breaking changes or looks bad. Add a breakpoint and repeat.

[harshit98]

@nikhilrayaprolu There is no rule as to how many break points a page should have, but one should be added wherever the layout breaks. The aim is to make sure the design and content flow nicely regardless of the width of the viewport. :sweat_smile:

[nikhilrayaprolu]

True, but having a breakpoint for each of the 50px is not a good solution. that will just raise issues like this https://github.com/fossasia/susper.com/issues/507 and we have to be verifying in each of the 50-pixel range. this will just increase the length of the code and time of development and testing. do you think having a 50px break point is the only solution? How are other projects loklak_search are achieving this? how are other projects able to achieve everything in just a few breakpoints?

[juslintek]

Looks like a job for me 😁 Scss grid patternization to the rescue.

[harshit98]

@juslintek How you'll proceed to solve this issue?

[juslintek]

I would use bootstrap grid scss find the biggest density of columns in current design and change variable in scss code to generate required grid density css. Then replace in layout custom css classes with bootstrap grid classes.

[harshit98]

Sounds good @juslintek. Please go ahead. :)

[muskan21jain]

@harshit98 I want to work on this issue using bootstrap 3 grid system rules. I will add media queries which fits for desktop, mobile, tablets, and other devices. Can I go-ahead to work?

[muskan21jain]

@nikhilrayaprolu @harshit98 I have added media queries with multiple breakpoints according to device requirement. Please tell me the procedure how can I pull request to this branch.

[sathiraumesh]

Yep when i review the code i saw some areas where the css grid system is not followed correctly.And the other case is there are higher amount problems related with some css styling rules that effects the responsive grid system.And when trying to fix a small issue it takes a hall lot of time to refactor the code