Cirrus v0.7
p/cirrus-v0-7
The SCSS framework for the modern web.
Stanley Lim
Cirrus v0.7 β€” The SCSS framework for the modern web
Featured
3
β€’
A component-and-utility-centric SCSS framework designed for rapid prototyping. Use beautiful pre-built components to bootstrap your next project and utility classes to polish your final design.
Replies
Mustafa S.
Great effort, congrats on the launch!
Stanley Lim
@milkers Thank you!
Stanley Lim
πŸ‘‹ 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!