cu.css is a lightweight CSS framework that makes it quicker to start using CUBE CSS and Utopia in your projects. To get the most out of cu.css, you will need to be familiar with both of these approaches.
cu.css isn’t a fully fledged CSS framework, like Tailwind or Bootstrap. If anything, it’s more of a boilerplate or starting point, designed to be built upon and expanded as you see fit.
CUBE CSS in cu.css #
cu.css, like CUBE CSS, aims to broadly style as much as possible at a global level, then let the cascade and inheritance – two core features of CSS – do the heavy lifting. This is done by styling Type Selectors to create a set of base styles – a.k.a global styles – for native HTML elements. This results in HTML that looks great, without any additional classes.
Building on these base styles, cu.css takes Compositions, Utilities, Blocks and Exceptions, the core concepts of CUBE CSS, to create a consistent approach to structuring CSS. In cu.css, you will find a handful of useful Compositions, Utilities and Blocks to help kickstart your projects. Exceptions, which deal with state or layout changes in cu.css, can be found extending Compositions and Blocks.
cu.css doesn’t assume you are working with a design system. Therefore there is no abstraction of design tokens away from CSS. This approach is often refered to as token-based CSS and involves an additional data file – JSON or similar. In cu.css, tokens take the form of CSS Custom Properties, which remain a part of the CSS and permeate through it.
Likewise, cu.css doesn’t make use of any third-party tooling to generate utility classes. Instead, utility classes are created by hand, as and when they are required.
These decisions help to keep cu.css simple, accessible and intuitive to work with. And perhaps most of all, lightweight and dependency free.
Where cube.fyi teaches you the methodology, cu.css puts it into practice.
Utopia in cu.css #
Utopia is used in cu.css to create a fluid responsive design system, without the need to use breakpoints.
With some clever use of the Clamp function, Utopia creates a scale of CSS Custom Properties for both typography and space. This scale is utilised by the entire framework to create harmony and rhythm, no matter the device.
cu.css uses the Minor Third and Major Third scale to create sensible defaults. However, Utopia’s fluid type scale calculator and fluid space calculator can help you quickly spin up scales more fitting to a particular project.
cu.css features #
- Built using the CUBE CSS methodology.
- Fluid responsive design for space and type.
- CSS Custom Properties over token-based CSS.
- Two flavours – choose from SCSS or CSS.
- Zero dependencies or third-party tooling.
- Global styles that make HTML look great.
- Automatic “user-preference” dark mode.
- Simple, accessible and intuitive to work with.
- Works with the grain of CSS, not against it.
Why cu.css? #
Unlike popular frameworks, which are often overkill or try to reinvent CSS entirely, working with a CSS methodology, like CUBE CSS, helps to bring structure and consistency to your CSS, while remaining lightweight and flexible.
For this reason, I’ve always preferred to adopt a CSS methodology over full blown framework. But when you’re busy developing websites, you often need a little more than just a methodology to give you a headstart. That’s why cu.css exists.
cu.css is a lightweight framework built using a solid CSS methodology. It will help you kick start your projects quickly, offering a base to build upon, in a way that respects CSS.
Extensible by design #
While no two projects are ever exactly the same, under the hood, a good bit of the CSS often still is. cu.css is that “good bit” of CSS.
How you choose to extend cu.css is very much up to you. You may find you only need to update a few CSS custom properties, or you may want to turn it into something completely unrecognisable.
Either way, working with existing methodologies will make the process much easier.
You will find plenty of documentation online about how to work with both CUBE CSS and Utopia, meaning that anyone with some knowledge of CSS should be able to adopt this project and extend it in a consistent and familiar way.