cu.css is a lightweight starting point for web projects. It makes it quicker and easier to get up and running with CUBE CSS and Utopia. Though not essential, to get the most out of cu.css it will help to be familiar with both of these methodologies.
cu.css features #
- Built using the CUBE CSS methodology.
- Utopia 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.
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 native HTML elements to create a set of base (or global) styles, which results in HTML that looks great, without any additional classes.
Building on these global 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 (also from CUBE 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 usually involves an additional data file – JSON or similar. In cu.css, tokens instead take the form of CSS Custom Properties, which remain tightly coupled with the CSS and permeate through it.
In a similar fashion, cu.css doesn’t make use of any third-party tooling to generate utility classes. Instead, utility classes should be created by hand, as and when they are required.
These opinionated decisions help to keep cu.css simple, accessible and intuitive to work with. But perhaps most importantly 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 for arbitrary 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 boilerplate to create harmony and rhythm, no matter the content size or 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.
Why use cu.css? #
Unlike popular CSS frameworks, which are often overkill or try to reinvent CSS entirely, working with a CSS methodology 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, like CUBE CSS, over a fully fledged CSS framework, like Tailwind or Bootstrap. 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 boilerplate that will help you kick start your projects quickly, with a popular CSS methodology and fluid responsive design. It gives you a solid 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 from its current form. Either way, working with existing methodologies will make the process 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.