Differences between 3 popular CSS Frameworks

Boostrap - Semantic - Tailwind

This project was done due to demand but was really enjoyable to complete.

The point of the project was the display the styling differences between semantic, tailwind, and bootstrap.

SB Admin Dashboard Replication

The project is a simple replication of bootstrap's SB Admin dashboard.

Each page looks almost exactly alike, of course there are going to be tiny descrepancies but most of them are negated by custom css in the index.css style sheets.

Synopsis of Work

Boostrap

One of the problems with boostrap was just positioning in general. When there needed to be a signifigant amount of padding past what was already given in the tools it comes with, using bootstrap didn't really help all too much. In terms of layout there were quick and easy ways to implement flex and small padding and margin with the shortcuts.

Use case

Site that needs to be styled quickly with not too much care on custom css.

Semantic UI

Semantic UI proved to be the best when it came to layout and styling. The predetermined styles that come with Semantic are clean and work extremely well together. On top of that there were many many more ways to style layouts and this project barely scratched the surface of what could be done. Despite Semantic's awesome out of the box styling, the small things caused me to make my way to the index.css file to add styling to push it more towards a custom look. If someone that was familiar with semantic or browses sites made with semantic than it can be assumed that they will see your site and know it's made with it.

Use case

If you want a site that looks like every single element was taylor made for each other then Semantic UI is your best bet. No tools to add distuinguishing features, but can always style with regular css.

Tailwind

Tailwind was by far the most enjoyable to deal with. Due to my already creating an index.css file and transfered some of the styling from the other examples it was apparent that the entire layout and color scheme could be done with just Tailwind. There are no predetermined components (e.g. styled buttons or cards). What it came with was just tons of ways to add almost everything you needed to style a site straight inside of the HTML!

Use case

If you want all styling to be in the html and want to style as fast as possible without having your site look like it's from a factory then Tailwind is the go-to. Really fun and is basically super short css inside of html.