The best CSS frameworks for front-end development
With the advent of mobile web development and responsive design about 10 years ago, a number of prominent CSS frameworks started to emerge, in order to speed up development and improve the developer experience. A lot of time has passed, some conventions were overhauled, some stood the test of time.
If Bootstrap if too broad for your purpose, you might want to look into Bulma. Bulma comes with a concise set of component, typography and layout styles, at a much smaller size than bootstrap. The project is framework agnostic and can easily be integrated with any React, Vue or Angular project.
If you are developing an enterprise level React project and you want a complete solution for your entire UI, Ant Design will be the way to go. The Chinese Firm “Ant Experience Technology” develops and maintains the project. Ant Design comes with and immense amount of ready-to-use components, styles, animations and is fully customizable. The documentation is excellent, it’s TypeScript compatible and with more than 63,000 GitHub stars, you won’t be alone should you run into problems. I’ve used Ant Design in a large project before and it reduced development time significantly. The only downside is size, at almost 2MB unoptimized (when importing all styles and components) the framework can significantly impair loading time. It was originally developed for React, but there are ports for other frontend frameworks.
Similar to Ant Design, but at a smaller size you can find UIkit. It’s a well developed and maintained fully-featured UI-framework. What I like about UIkit is its’ distinct design langue and premium visual appeal. UIkit is well documented, well maintained and frameworks agnostic. I have never used UIkit personally, but will definitely consider doing so in the future.
There are quite a few CSS libraries and frameworks that try to do the “minimalist” approach. The problem is, the design quality is usually a bit poor, the components lack nice animations and there’s no advantage to just using certain parts of Bootstrap or some larger library. Here are some examples:
Thoughts on Material Design
Similar lists would often feature Google’s Material Design towards the top. I strongly discourage people from using it. The framework is relatively sound from a technical aspect, but in terms of UX it comes with a lot of logical contradiction and bad design choices. Material Design is still a remnant of the “Flat Design” trend of 2013/2014. The forced minimalism makes it actually harder to read and interact with the UI. One of the main reasons a lot of companies can “get away” with using it, is because a large share of the population are Android users and have learned the peculiarities of the design. In terms of developer experience, we get a half-baked documentation (as with most Open-Source Projects by Google, https://material.io/components) with the Open-Source community expected to take up the task of translating it into different front-end frameworks, in order to actually make it usable. Overall, design trends move faster than Material Design could keep up with, it feels dated. There are better alternatives out there.
On the flip side, relying too much on “prefabricated” design elements and choice reduces the natural pluralism and evolutionary processes in web design. Instead of decentralization and eventual innovations in design, we’d have radical centralization with tech giants like Google and Facebook dictating concepts and everybody else following suit. This is no way to move web design forward.
If you enjoyed the article, please share it on social media and feel free to leave a comment below.