Web: Epic CSS Cleanup

[algae12]

The CSS of gitcoin.co is messy and a hassle to edit.
Here are a few changes we can to implement in order to make it more maintainable. 🔧

These proposed changes are epic in their scale and should take a good while to write up. But after these are implemented, style revisions on the site should be both clear to understand and a breeze to implement.

Clear and modular stylesheet hierarchy 📦

I suggest we split all stylesheets into 2 categories:

1. modules (styling of components shared throughout the site)
2. pages (page specific styling).

Example:

• stylesheets/
  
  
  
  • modules/
    
    
    
    
    
    • buttons.css
    
    
    
    • forms.css
    
    
    
  
  
  • pages/
    
    
    
    
    
    • home.css
    
    
    
    • issue.css
    
    
    
  
  

Split CSS code into documented sections 📝

Our stylesheets should be made out of several sections whose boundaries and contents are clearly documented. We should try and follow these guidelines for writing consistent, idiomatic CSS.

Remove bootstrap UI and write our own style classes 🎨

While it's okay to use bootstrap for fast and easy mobile compatibility, it really isn't advised to rely on it for design.

Using the bootstrap UI leads to a lot of messy overrides that we should avoid for easier to change and maintain CSS. For instance, we shouldn't use a bootstrap class like .btn-warning to style a button. Instead, we should write and use our own button class style.

Use a css preprocessor instead of vanilla css ✨

We should consider move to SCSS / SASS to make our code easier to maintain.

[thelostone-mc]

I'm all in for this ! This is something which has been in a lot of folks mind.
IMO we should use scss / sass if we are gonna make this move. Makes code easier to maintain.

Moving away from bootstrap for the interface is a good move but we'll have to find an alternative to a equivalent grid system. ( I wanna say we should use the built in grid system, but I'm not too sure about browser support )

Thoughts @algae12 ?

[algae12]

@thelostone-mc Wasn't sure if I should include moving to a CSS preprocessor as part of the cleanup, but if other people are for it, I'm for it as well :)

The built in CSS grid system did yet reach the level of browser support where I think it's safe to work with. I suggest we use Skeleton as an alternative to bootstrap since it's tiny and very easy to extend from.

[thelostone-mc]

Let's move to a css preprocessor. Might as well rewrite it at one shot rather can creating resp epics ! As the library grows, moving to a preprocessor = more hard work

Will check out skeleton ^_^

[owocki]

while i'm excited directionally about cleaning up the CSS, i tend to prefer a more incremental approach to refactoring.

in my experience, setting off on a monumental refactor of the entire aesthetic portion of the site can be such a daunting thing, involving gumption traps like merge conflicts, regressions all over the place, no direct customer impact, and can lead to burnout. let's not boil the ocean.

lets take all the ideas going on here (removing bootstrap, css preprocessor, Clear and modular stylesheet hierarchy) and choose some incremental proof of concept that's better, PR it, get it merged... and take it from there.

my 0.02 ETH

[algae12]

@owocki Agreed. I will try and break the CSS revamp into much smaller PRs in the future. Bit by bit we will turn gitcoin.co into a well maintained design marvel :clinking_glasses:

[owocki]

Bit by bit we will turn gitcoin.co into a well maintained design marvel 🥂

😇 you're an angel!

i dont have enough design knowledge to know exactly what the roadmap is.. but i can help solve the incentivization problem by funding whatever roadmap you both come up with with some tips / bounties. i want ppl to make things better (a) because it makes the community better and (b) because its profitable for everyone. keep me in the loop!

[thelostone-mc]

@algae12 looks like we've got some work to do ^_^

[ethikz]

This is something that I thought would actually happen as we go with the implementation of guidelines and such.

Also I agree with @owocki

[olafghanizadeh]

How about using Bootstrap + UnCSS? Bootstrap is big, and it has a lot overrides, but it also helps immensely with responsiveness across devices. There are other more lightweight frameworks though.

I think a build tool like webpack or gulp should be implemented as well to optimise assets on build.

[PixelantDesign]

@thelostone-mc @SaptakS @mbeacom

Want to keep this issue open?

[thelostone-mc]

Nah ! We've sort of started on this already