DEV Community

Bootstrap CSS is still the sh*t. But we can make it better.

Weston Walker 📚 on July 01, 2022

Bootstrap is an amazing CSS framework for those who struggle with design, css, or need to build something quickly. But the Bootstrap components yo...

Read full post

Jonathan Linat • Jul 3 '22

Be careful with points 2 and 4: declaring labels and headers is important for Web Accesibility.

Juan A. Fuentest Torcat • Jul 4 '22

Very useful, I love how much the UI improves with very small but well thought changes. Great stuff for us full-stack devs that are too focused on logic and performance and miss the more important user experience

NeilFranci • Jul 2 '22

This give me a flash back when I was a fresher, the manager was yelling at me when having no knowledge about the UI/UX and the he hire a designer and I learn so much about UI/UX so now I can understand what look good 👍

Medea • Jul 1 '22

This is nice!

Marco Klein • Jul 2 '22

Some very cool tips, illustrated in a nice way :) thanks!

witty code • Jul 4 '22

Thanks, this is great!

Regarding tables - I think you should add the id (or alternate row id) to the table to allow dynamic sorting of the table

Vic • Jul 4 '22

Nice!

Jack T. Neely • Jul 4 '22

Great stuff!

Jeet Mandaliya • Jul 3 '22

That is a great article @wes_walke

I totally see the point of shadows>borders.

what is the best way to translate shadows>border design when it comes to dark theme? White shadows look a bit off and black shadows aren't really providing the visual separation that borders provide in dark theme...

Weston Walker 📚 • Jul 3 '22 • Edited

Hi Jeet!

Making something a lighter gray in dark mode gives the illusion of elevation. Spotify is a good example of this!

Jeet Mandaliya • Jul 5 '22

That's actually great advice, thank you!

Ashley Sheridan • Aug 24 '22

A lot of these recommendations go against what would typically be advised to make content more accessible:

This is actually very good advice, and makes those notifications more accessible. There are other enhancements that could be done too, but probably beyond your immediate point in your post.
Removing the table headings makes the table more difficult to read, especially so if the table is large enough. Screen reader users may struggle even further. Also, removing the 'view' link forces an extra select step to view the (details?) of that user. The select action alone introduces many extra accessibility issues for keyboards users or those relying on speech actions.
Secondary buttons need styles that indicate that they're buttons. Removing the background colour effectively makes it appear as text. With the text colour being pale enough to fail colour contrast requirements, it might actually not be very visible to some users at all. At the least, it needs to show the area which is interactive.
We shouldn't ever remove labels. While some text might seem obvious in context for a sighted user, people don't always browse the web in the same way. Screen readers have a variety of methods to allow for navigation and interaction which might lead to some content being announced without the context of its surroundings, forcing the user to manually navigate forwards and backwards to gain that context. There are specific WAI guidelines that aim to ensure that things are labelled correctly on the web.
Shadows might look better, but they are completely removed in High Contrast Mode. You can add a transparent border and set the foreground colour of the element to account for this, as borders do get displayed in HC mode, and the colour will be adjusted automatically (in most cases).

Gnio • Sep 1 '22

Love how much you take into account accessibility. Especially the high contrast part.

Comment deleted

Weston Walker 📚 • Jul 3 '22

Thank you for that great analysis Ian!

AkaraChen • Jul 1 '22

Really nice 👍

Popsam806 • Jul 3 '22

that's good

Andrew Baisden • Jul 1 '22

Nice improvements.

Satyam Anand • Sep 2 '22

Insightful !! Really loved how you showed that User Experience can be improved by few small tweaks.

Thanks for sharing the post. 👏

desireebyrd • Jul 5 '22 • Edited

honestly I just highly customize everything with every new site, nest my styles with SASS -- and only use bootstrap for the column and row functions. But I tend to agree with these ideas.