Okay, why Bulma over Bootstrap and the others? If I need to create a design system: Tailwind CSSĭepending on my team’s size and skills, I would not choose the same tool, and in some very rare occasions, I would do CSS from scratch.Īs you can see: there’s no perfect framework in all situations.įor most scenarios like webapps, admin dashboards & common landing pages, a component-based framework like Bulma is perfect.įor specific landing pages or very design-focused pages/webapps, a utility-first framework like Tailwind is perfect.If design is complex & I don’t have time: Bulma + a lot of custom CSS.If design is complex & I have time: Tailwind CSS.If design is common / no design: Bulma or Bootstrap.Okay, so what’s the best CSS framework then?įor me, the best framework depends on 3 things: design, time, team. If you have read other articles of mine, you know where I’m heading. So it’s very flexible, you can create the HTML structure you want, but it’s way slower to build a UI with it, than with component-based CSS frameworks. In a nutshell: both concepts consist of writting CSS classes or properties directly on the HTML. The 2 main reasons are: React with styled-components and Tailwind CSS. 3) Atomic / Utility-first CSS frameworksĪtomic CSS and utility-first CSS are very similar concepts, I would even say the same, and it became very popular in the last 3~4 years. The ones I’ve used since 2011: Bootstrap, Foundation, Skeleton, Materialize, Milligram and Bulma. In a nutshell: they are very opinionated. The HTML structure is mostly predefined and the design isn’t always easy to customize. This is the fastest way I know to create interfaces with CSS.īut they have their cons too. They come with a prebuilt and opinionated UI. 2) UI Kit & Component-based CSS frameworks You will often see them included in frontend frameworks or boilerplates. For example, there’s Susy written in SASS to create grid layouts faster. The famous ones I used are: SASS, Less, Stylus and PostCSS.Įach has other frameworks or plugins based on them. They add features that do not exist and are used to write CSS faster. These are build-time frameworks, they do not output CSS by default. CSS UI Frameworks in 2021 There are 3 kinds of CSS frameworksīefore we dive in, you need to understand the 3 different kinds of CSS frameworks.
0 Comments
Leave a Reply. |