👋 Hey everyone! In the middle of the pandemic, I sought to rewrite Cirrus to fix many of the issues and inconsistencies that plagued its previous versions and launched on PH. This year, I am once again launching on PH on a new version of Cirrus that focuses on the framework's future. There are often debates on whether component-centric frameworks such as Bootstrap or atomic-classed frameworks such as Tailwind are better for its: - Learning curve - Maintainability - Flexibility - Ease of use I am a fan of both frameworks as they have their strengths depending on the situation. With component-based frameworks, it is quite easy to slap a couple of different elements together and you have a working website. However, customization may require writing lots of other CSS yourself which takes time away from building your product. Utility-class-based frameworks offer customization that is as granular as it gets short of writing the CSS yourself but without the overhead. A major drawback is that being able to customize and use tree shaking requires direct integration of Tailwind into your project and a CDN version is not feasible for production. Cirrus is a framework that takes the best parts of both of these types of frameworks and provides: - Many pre-built basic components to accelerate your development velocity (e.g. Avatars, Modals, Tabs, etc.). To keep your code clean, all component classes are built following the BEM convention. - A suite of common utility classes to help tweak and polish your designs when needed. These utility classes are so powerful that you can construct components with them alone. - Different CDN builds of the framework that can be dropped in at any browser (core, ext, all). Choose one that fits your needs. With the release of 0.7, much of the framework can now be customized. Since the framework is written entirely in Scss, it can take advantage of all the existing APIs for class generation. The new configuration system in Cirrus allows you to: - Add/Edit/Delete component styles. - Add/Edit/Delete utility classes. - Specify which breakpoints are supported. - Toggle which classes should have viewport variants (to help save on build size). - Enable/Disable different parts of the framework. - And more :) Before I start blabbering on too much about the technical details, I will end by saying please check out the docs, give it a try on the playground, and let me know your thoughts!

Cirrus v0.7

The SCSS framework for the modern web.

The SCSS framework for the modern web.

Cirrus v0.7

The SCSS framework for the modern web.

The SCSS framework for the modern web.

Do you use Cirrus v0.7?

Do you use Cirrus v0.7?

You might also like