The CSS Monster

The CSS Monster (or just "Monster") is a rapid prototyping tool ^ technically a framework libraryfor styling content during development.

Although I had never planned to actually use Monster in production, it proved to be more than resourceful at it's task.


Initially, Monster was intended to provide temporary visual placeholders for rapidly style content (to see if I liked a combination of styles or not).

It's somewhat similar to other frameworks like Bootstrap in it's goal, but focuses more on the staples of UI design and modularizing features in a nice tidy way.


Why is it a monster?

Because this thing is huuuge.. or at least the first version was.

Early on, I was doing a lot of content creation. Often times, I found myself spending just as much time on styling as I was on creating the content! Since I didn't know SASS/SCSS at the time, I went with what I did know: PHP.

I went a little overboard with the algorithms. At one point the file was over 2 megabytes :). I have since reworked it ease that down to under 250kb in the main, uncompressed version - and under 75kb in the minified "lite" version (which really contains about everything you need).

If that's still too heavy, you can always bring in only what you need in the mini version, which is less than 32kb minified.


What's the holdup?

A couple of things:

  • There have been times where the Monster did not work on the 1st load.
    this has improved greatly over the last few years as browsers improved and the file size went down.
  • I would like to build a custom configurator
    so people (myself included) can easily import just what they need.

I'll probably just release it in it's open-source form in 2017.

It's been around since 2013, but it's grown/changed quite a bit since then as well.

Right now I'm re-working it from PHP to SASS/SCSS (I have a little left to do).

The docs pretty much write themselves, but I'll still make some. It's simple enough to be explained on one decent sized page.