Nebula.css

JavaScript, 2015 - 2016

In 2015, while CSS utility classes were coming up as a practical way of dealing with large codebases, I created a system and CSS framework which generates these utility classes based on design rules like spacing, colours, and makes those responsive. It could be used as the foundation for websites and aid with rapid prototyping.

Although it never really passed beyond work-in-progress because of a lack of time, I based multiple websites on it (including this one). It was the backbone for Zukini, and many of the ideas here were also found in later projects like Tachyons and Tailwind (one of the most popular CSS frameworks right now).

Where did it work well

  • Quick assembly of simple websites.
  • Your design system specifies colors, font sizes, and spacing amounts, and you want to quickly start building something.
  • You want to use consistent amounts of spacing between elements, that can change on different breakpoints.
  • You want to have a couple of predefined font sizes, that can scale on different breakpoints

Details

I created Nebula to be very modular, so the user could disable certain modules if they didn’t want to have them in your output. I also offered 4 different ways of including the project in a codebase:

  1. SASS includes: For when the user already had a SASS setup or build pipeline, and wanted to add Nebula to it.
  2. Javascript API: This was mostly for my own use and it allowed you to programmatically generate a stylesheet with certain properties.
  3. Command Line Interface: For when the user didn’t have a Sass pipeline or other build process for your stylesheets yet.
  4. Basic CSS: A pre-compiled version

More details

Since the project has been abandoned, I’ve archived the Github Repository, but you can still take a look at it.