Choosing The Correct CSS Framework

At Link Digital, we always look to use the right tool for the job, and often one of those tools we need to look at before we start creating a new website is a CSS Framework. Cascading Style Sheets, otherwise known as CSS, is the most common method of styling the unique elements of your website, from the titles to the text to the images embedded on the page.

CSS Frameworks offer us a quick way to start working with the basics of a website and add the specific details on top of the barebones structure without starting from scratch every single time we start a new website project.

Tailwind CSS

Tailwind CSS is a utility class-first framework designed to work wonderfully responsively with a mobile-first layout and optionally a dark mode which can be coded into the design and switched by a toggle on the website or by the user’s local browser settings. With Tailwind, we can create amazing designs without being constrained to preset elements such as those that feature in some of the other frameworks we use.

Tailwind allows for easy editing of the CSS to complete design elements that the framework wasn’t designed with in mind and even features a compilation mode which shrinks the final CSS output making it run faster on the final uploaded website. Where similar elements crop up on the website, we can quickly and easily create repeatable components that can be placed throughout the design, such as buttons or form elements.

Pros

• A highly responsive, mobile-first framework with detailed documentation describing every potential class you can easily search through.
• Only the code you require for the website style is shipped in the final CSS file, leading to smaller, faster code.
• Easily customisable with Functions and Directives that allow you to add your elements of CSS to the standard Tailwind classes.

Cons

• No default components mean that the initial set-up can take longer.
• Directly coded in CSS, which loses some of the modern functionality of SASS/SCSS without additional complications.
• Lots of repeated class names in your PHP/HTML.

Bootstrap

Bootstrap is one of the most commonly used CSS frameworks globally, originally developed by programmers at Twitter, and received instant popularity because of its responsive design. It was the first framework that gave priority to mobile devices. When using Bootstrap, there is no need to make a separate design for mobile viewing, and Bootstrap is compatible with all browsers meaning there is no need for writing browser-specific code. Bootstrap has several built-in components that can be customised further for elements such as navigation, forms, cards, buttons, badges, and more. Bootstrap comes with some Javascript components that simplify some of the more complicated website design elements, such as carousels and collapsible elements.

Pros

Built-in components for navigation, forms, cards and more allow for rapid prototyping.
Excellent Javascript elements with a Custom CDN.
User friendly.

Cons

Certain elements are harder to customise.
Components might change as the Bootstrap code is updated, leading to changes in the website’s design or broken websites as classes change their name.

Bulma

Bulma is a newer framework which has quickly grown in popularity. While it doesn’t come with any Javascript elements, it uses easily readable CSS classes allowing for quicker coding and easier changes. Bulma is highly modular and easy to learn, with an innovative design process that provides customisation and brand elements, such as colours, to be swiftly changed across designs. Bulma is a versatile framework with typography, tables, components for vertical alignments, media objects and layout. Since the framework is modular, if elements aren’t required for a project, we don’t need to add those to the project, cutting down on the shipped code and leading to faster websites.

Pros

• Quickly and easily change brand colours throughout an entire website with a single line of code changed.
• Essential interface elements require only a single line of code.
• Indispensable form controls and advanced multi-part components are at your fingertips.

Cons

• Components are set up, requiring more coding to change the default if they aren’t to the design of the page.
• Limited responsiveness outside of a few essential elements, requiring overriding CSS code.

Conclusion

We have used all three of these frameworks across multiple projects at Link Digital, trying to ensure that we use the best tool for the job. In my own impartial opinion, Tailwind CSS offers the quickest and easiest to use, most customisable framework and is perfect for the modern website, especially if you are trying to ship a responsive, fast website. Tailwind CSS works very well if the project you are working on has a very specific design. The pre-built design elements of Bootstrap and Bulma can offer rapid prototyping examples if the website design is lacking, allowing something to be seen on the page very quickly.