The Emperor’s New Clothes
While HTML being the skeleton of an app and JavaScript the flesh and muscles down to the bones, CSS corresponds to the clothing and styling of the software.
Just as we can pick a brand in fashion, we can decide on a CSS framework to put our frontend in an appealing robe. Nevertheless, it is trickier to combine different CSS tools than to decide on another brand for sweater and shorts. In the following I will compare three frameworks to style the look and feel of a software project.
This is not supposed to be a deep dive in each framework (if you are looking for such, you can find numerous excellent posts and videos on the web). This one will give you a brief overview based on a simple to-do list, to get an idea of the three selected styling options.
THE INLINE ACCESSOIRE TAILWIND CSS
Being a utility-first CSS framework, Tailwind faces some criticism across the community because it is based on inline CSS and creates a huge add-on to the HTML code as you can see below:
But: With the help of utility classes you can build your own styling components. The “utility” style of writing CSS name classes precisely according to their function. While common CSS rules such as BEM, Atomic Design naming and OOCSS group CSS styles based on their semantic appearance such as .nav, .form, .footer, etc., tailwind wraps the functionality to the naming of the class. .px-2 for example adds a padding to the top and bottom of the item and can be applied anywhere in the HTML where it is needed.
In addition, using a tailwind.config.js file it is very easy to define unique customizations that can be used across all components.
By default, Tailwind uses a mobile first breakpoint system that can be easily adjusted and overwritten. Individual breakpoints can be set for every utility class in the framework and create a very responsive output. One big disadvantage is the bundle size which is about 1.6 mb for the simple todo app from my example above.
READY-TO-WEAR DESIGNS
Bulma and Material-UI are both quite easy to use frameworks to create a fast and fancy frontend design. With 40.5k stars on GitHub, Bulma is one of the most popular CSS frameworks. Both have a reasonable bundle-size: Bulma with about 348 kb and Material-UI only 299 kb.
Other advantages of Bulma are the fast to follow classes, an easy to use grid based on flexbox and an elegant default design.
Bulma provides different theme colors that can be easily added with dedicated classes and create a charming look across the entire UI. It is incredibly mobile-friendly and offers the .is-fluid class for screens of any size. By creating a customized SCSS file, it is easy to define colors, set fonts and overwrite the default styles.
To customize the classes, the SCSS file can be used to define reusable variables that can be applied to all components. See example below:
Material-UI currently counts 59.3k stars on GitHub, which mirrors its popularity among developers as well as the trend to use Google’s material design for frontend projects. The documentation offers many components with a very simple but appealing appearance and saves a lot of time and work by selecting and following one of the pre-designed themes.
As an additional value, the Material-UI look is inspired by textures and real-life physical appearances such as papers and cards, with a focus on surfaces and edges. Using Material-UI creates a consistent appearance but can also be customized and combined with own classes and defined values (if you are bothered by the need to add the “!important” reference to overwrite the classes, you can use the help of styled components as well). Furthermore, you can use the option to create individual themes and customize all design aspects.
WHAT I WOULD PICK FROM THE CLOSET
In case I needed a quick and charming design for a project, I would dress it in a Material-UI style, as it is easy to use and has an appealing effect. The documentation shows a design variety of elements, e.g. inputs, buttons, selectors or forms.
But if I had the time to put more effort into styling and creating an individual design, I would explore Tailwind CSS. Although inline styling has a pretty bad reputation, I feel that it holds some nice options to create a unique UI design by building your own library of customized components and classes. It might be a little more work, but it could be worth it.
