Possible CSS Frameworks/UI Libraries for Playground #381
Pinned
SergioCasCeb
started this conversation in
Ideas
Replies: 1 comment 2 replies
-
|
We are already using Bootstrap. What's the reason we want to change it for smth else? |
Beta Was this translation helpful? Give feedback.
2 replies
-
|
Sorry for the missing context. We do not have to change but we are planning a big redesign of the frontend which makes it possible to ditch what we use if another framework would fit our needs better |
Beta Was this translation helpful? Give feedback.
-
|
@egekorkan Then I would propose using a frontend framework, like React or Vue but leaving Bootstrap as the styling tool. |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
After analyzing the most popular CSS frameworks/UI LIbraries of the last few years such as Tailwind CSS, Bootstrap, Foundation, UI Kit, Materialize CSS, Bulma, Skeleton, Pure.CSS, Semantic UI, etc. I personally believe that UI libraries would not be the best approach to redesigning the Playground site due to their constraints regarding customization and scalability.
While a UI library provides you with "professional" looking components that cater to specific behaviors and allows for easy prototyping, such components will always behave how they were created and will only allow for simple theme changes (font sizes, colors, border radius, etc). Therefore if a component can no longer fulfill the required tasks or specs of the projects, the most common ways to solve this are to override the components completely or find ways to work around them which is often time-consuming and might still not allow for the full customization that was expected.
Another important fact to have in mind is that all the components rely heavily on their respective intended frameworks and versions, which could force the use of specific older versions to assure functionality, compromising the looks and feel of the components themselves, which in my opinion beats the purpose of the redesigning process that is trying to be achieved with this project.
Contrary to UI libraries, CSS frameworks, which as the name implies, is mostly based on isolated reusable styles and classes making them easier to modify and override. Even though also being restrictive to certain extemp it can be argued that such restrictions help to create a more consistent layout and feel overall.
In a nutshell, it can be said, that UI libraries are helpful for quick prototyping, accepting that certain behaviors will remain constant and the main focus is mostly to find a way to interact with data compromising the looks and feel of the site/app. And CSS frameworks are useful when specific behaviors are needed or wanted, or when there's a need to have more control over the code in order to achieve a specific feel or look.
With this in mind, I picked the 4 Frameworks that, in my opinion, could be a useful addition to the project, considering characteristics like package size, price/license, popularity, responsiveness, utilities, and components as well as flexibility/customizability.
Tailwind CSS
A utility-first CSS framework that allows for lots of flexibility as well as customization. Tailwind provides a wide arrange of default classes ranging from colors, spacing, and typography to responsiveness, grid/flex layouts, hover and focus states, etc. which helps keep an overall consistent design system. Nonetheless, if such classes are not enough for the project, or it's necessary to add some custom values, tailwind allows for an easy way to add custom utilities as well as arbitrary values.
Tailwind also counts with pure CSS custom components and templates, and even though most of them are blocked behind a paywall, they do offer a few free examples that can be easily implemented in any project.
Even though the development build of Tailwind CSS is 2413.4kB uncompressed, and 190.2kB minified, which sounds like a lot, it is only due to the thousands of utility classes the tailwind generates in order to make the experience as productive as possible. Nonetheless, such utilities can always be overwritten to only use the values that the project at hand requires.
When it comes to production though, because tailwind is incredibly performance focused and aims to produce the smallest CSS file possible, it usually leads to CSS files that are less than 10kB, as claimed by Tailwind CSS.
Characteristics:
Bootstrap 5
Bootstrap is a leading free, open-source front-end development framework for the creation of responsive websites and web applications. Although it is a front-end framework it is often referred to as a CSS Framework. This framework comes with a responsive grid system based on flexbox, global CSS variables, extensive pre-built components and utilities, and JavaScript plugins to speed up the development process. It is also possible to include either just the CSS or the JavaScript compiled files.
Since the release of Bootstrap version 5, it does not longer require the use of jQuery and it utilizes SASS as its CSS preprocessor to handle all its global values, utilities, and components which can also be overwritten and customized.
In comparison to Tailwind CSS which is a pure CSS framework, Bootstrap has a few components that rely on specific JS plugins in order to handle certain specific behaviors. Nonetheles most of the components and utilities can be used and accessed just by using their CSS files.
It is also worth noting that contrary to Tailwind which makes sure only the necessary CSS is being used, Bootstrap includes every single value, utility, and component unless it is explicitly removed or overwritten.
Characteristics:
Bulma
Bulma is a free, open-source CSS framework built primarily with Sass and a Flexbox system. It offers modular columns and it provides some default utilities for rapid UI development.
Bulma is completely responsive, and like Tailwind CSS is also modular, allowing the use of only the components and utilities that the project might require. Nonetheless, unlike Bootstrap, Bulma is a CSS pure framework, meaning that the behavior and event handling that the project might require has to be added personally.
Finally, Bulma has a really simple, readable, and easy-to-use naming system for its utilities and components, which makes it easier for everyone to understand what each class is doing.
Pure.CSS
Pure.CSS is a CSS framework consisting of small and responsive CSS modules for building quick responsive websites and web applications.
Since Pure.CSS was created for mobile first as a priority, all its components and modules make a minimal CSS footprint with a package size of 3.7KB minified.
As a CSS framework, it does not require any JS dependencies, and it's also built on Normalize.css to allow cross-browser compatibility.
Unlike other frameworks, Pure.css encourages users to add new personalized CSS rules on top of Pure's minimalist design for easy customization instead of having to overwrite existing rules.
Characteristics:
Skeleton
As implied by its name, Skeleton more than a CSS or UI Framework, and as stated on their official Github, " Skeleton is a simple, responsive boilerplate to kickstart any responsive project".
Skeleton is perfect for smaller projects (minified size of 176 B) that don't require much setup or when all the utilities from bigger frameworks seem too much for the project at hand. Skeleton only styles a few standard HTML elements (typography, buttons, forms, lists, code, tables), it has a simple 12-column grid system, 4 utilities to handle the width and float and it can also handle media queries.
Since it is just a boilerplate it doesn't require any maintenance, hence why the last release was in 2014.
Characteristics:
Finally, this list wouldn't be complete without adding the most basic of them all and another plausible option for the scope of this project, plain CSS.
Since TD Playground right now is in a really early stage and is mostly a static one-page site with minimal features and styles, plain CSS could be one of the best ways to redesign it, which would help to avoid any external packages or dependencies and it really fully on the requirements of the team and the project itself.
Also by predefining all the required values such as fonts, sizes, weights, colors, etc., and using them as root values or variables (in the case of Sass), adding and utilizing such values within the project would be straightforward and would allow for a better consistency within the project, as well as facilitating the implementation of different themes.
Furthermore, if plain CSS were to be used, utilizing a naming convention such as BEM (Block Element Modifier) would further help create scalable and maintainable code by clearly specifying the father/block objects, elements/child objects, and their modifiers. And as a way to further improve the efficiency of using BEM, a transpiler such as Sass could also be utilized.
Beta Was this translation helpful? Give feedback.
All reactions