Micro a tiny CSS framework

I have seen some pretty tiny CSS framework before. Milligram comes to mind for instance. However, even though CJ Patoilo did some pretty kick ass cool things with only 2Kb of CSS, it simply isn’t enough, at least not for me – So I created my own CSS framework, and I called it Micro.

Even though Micro is created for my own needs in regards to Phosphorus Five, it easily stands on its own legs today. In the latest release, I completely refactored Micro, and I seriously cleaned it up, and I was able to tick it in on 6.4Kb. In addition, there’s a couple of font files (IcoMoon) and an (optional) skin file. All in all, we’re talking about ~50Kb, give or take. If you exclude the fonts, it’s less than 10Kb, and it’s not even minified. Not too bad if you ask me. Minified and zipped, without fonts, it probably wouldn’t be more than ~5Kb. Still it gives you arguably “everything” you need. Below is a screenshot of Micro and how it is used in Hyper IDE.

However, “what’s in it for me” you may ask? After all, a CSS framework is pretty useless unless it solves your needs, right? Well, Hyper IDE and the entirety of Phosphorus Five is using Micro. You can try out Hyper IDE here. So obviously you get a treeview, modal windows, tab controls, buttons, grid layout, and tons of other goodies. In fact, everything in Phosphorus Five, one way or another, is built around Micro.

In addition, it is extremely easy to skin. It is built around the axiom of CSS variables, which allows you to “inject” your own features into its core, without having to fiddle with what selectors to use for some particular type of element. Check out the code for the Graphite skin here. Which is what Hyper IDE is using. Then realise that by simply exchanging some few CSS variables, I can make the above “graphite” skin look like the following. The skin below is called “Bubble Gum” btw, and doesn’t necessary represent my taste in colours for the record … ๐Ÿ˜‰

You can check out the skin file for “Bubble Gum” here. Yet again, besides the font inclusions for “Roboto”, only a few lines of CSS, and you get the above.

Below you can see the same app using theย “serious” skin, which probably is a better fit for most people. You can see the code for “serious” here. Besides from the font import, there are no more than 5 changes required to create a CSS skin resembling the following screenshot.

Notice, these two last screenshots are of the exact same application, only with different skins. Not too bad if you ask me …

I still have some work to do in regards to documentation. The docs over at the main GitHut page is hopelessly outdated for the record. But if you use it in combination with Hyper IDE, the docs are “starting to get there”. Below is a screenshot of one of the doc pages which you can find by opening Hyper IDE and clicking the “?” button in the top right corner.

Below I have a small video, where I demonstrate some of its features.

All in all, not too bad for ~5Kb of CSS ๐Ÿ™‚

If you want to reproduce what I did in the video, you can download Phosphorus Five here.


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.