search

jackreichert / over-engineered-todo

building a todo app to keep my skills sharp
0 stars 1 forks source link

Choose design framework #4

Closed jackreichert closed 10 months ago

jackreichert commented 10 months ago

Context It can be a framework, or component library. It should be a modern, lightweight, tool that will improve the ability to implement design.

As a FED I want to have a design tools to use So that I can implement designs more easily and with better cross browser compatibility.

Acceptance Criteria

jackreichert commented 10 months ago

I'm considering:

jackreichert commented 10 months ago

TailwindCSS is a utility-first CSS framework that provides a set of pre-defined classes to help you build custom designs quickly. It is designed to be highly customizable and easy to use. SCSS is a preprocessor scripting language that is interpreted or compiled into CSS. It provides more flexibility and control over the CSS output than TailwindCSS.

The main advantage of using TailwindCSS over plain SCSS is that it provides a set of pre-defined classes that can be used to build custom designs quickly. This can save time and effort when building complex layouts. However, if you prefer more control over the CSS output, then SCSS may be a better choice for you.

This project is supposed to be over-engineered, so I'm leaning towards TailwindSCSS.

Bootstrap is a component-based framework that offers pre-styled and responsive elements for fast and consistent UIs.

Tailwind has a smaller file size than Bootstrap, which requires multiple files for its full functionality. Additionally, the overall file size of a Tailwind project can be reduced even further using purgeCSS.

Bootstrap relies on specific abstracted patterns that may need to be overridden with custom CSS, while Tailwind offers more control over the design.

Since TailwindCSS offers more flexibility I'm leaning towards that.

Bulma provides a bit more flexibility for customization compared to Bootstrap. In addition, its modular structure provides more control over individual projects. Unlike Bootstrap, Bulma permits users to import only the modules required for desired features, omitting any that aren’t necessary.

While 90% of Bulma works in IE11, Bootstrap has better compatibility with this browser. Additional elements Bootstrap has some elements like list group, wells, or page header that Bulma doesn’t have². Accessibility Bulma has introduced some support for accessibility, but Bootstrap has strong and pervasive compatibility with WCAG 2.0 guidelines.

Bulma has less compatibility, that's a no-go for me.

Bulma provides a bit more flexibility for customization compared to UIkit. In addition, its modular structure provides more control over individual projects. Unlike UIkit, Bulma permits users to write all the components themselves, providing a lot of flexibility to build the components you need.

Bulma has more compatibility than UIkit, so that's out too.

Verdict: TailwindCSS Note: This was written partially using bing chat.