Cepheus
WIP
Cepheus — functional CSS utility class generator
Table of Contents
Overview
Cepheus is a functional CSS utility class generator. It provides sensible spacing / typography defaults, a built-in debug grid, as well as a suit of encapsulated modules that adhere to the principles of functional, atomic CSS.
Functional CSS
We found ourselves writing the same piece of CSS over and over. Handwriting it is very time-consuming, repetitive and results in lots of duplication. “Zombie code” is plenty and nobody risks removing it. This results in much more CSS shipped than we really need.
The idea of functional CSS deals with all of these issues. It ensures that the UI is consistent, totally predictable and free of side-effects.
Semantics
After reading the class names applied to an element, it becomes immediately obvious what it looks like. This reduces development time significantly. Maintenance becomes much easier. Each class takes very limited responsibility so the risk of mutation — changing a property somewhere and breaking code elsewhere — is eliminated.
Cepheus
Cepheus is inspired by these ideas. It utilizes modules from tachyons.io. These 53 modules cover the whole spectrum: typography to spacing, theming to elements. Cepheus provides the base building blocks which can be used to create modular, reusable UI components and layouts.
Usage Example
Applying these principles, we construct a simple button using Cepheus utility classes
<div class="w4 h2 br4 bg-light-red flex justify-center items-center">
<div class="white">Button</div>
</div>| Class Name | CSS property | Value |
|---|---|---|
| w4 | width | 8rem |
| h3 | height | 3rem |
| br3 | border-radius | 10.75rem |
| bg-blue | background-color | #408BC9 |
| flex | display | flex |
| justify-center | justify-content | center |
| items-center | align-items | center |
| white | color | white |
Features
- Mobile-first architecture
- Consistent composition of spacing and typography rules
- Default baseline rhythm and flexible debug options
- Built-in debug grid
- Flexibility though Sass variables
- Partial import options
- Minimal code
Installation
Install Cepheus
$ npm install -S cepheus And include it in your main Sass file
@import '/node_modules/cepheus/sass/cepheus';Configuration
~
Contributing
Please read our contributing guideline.