My FeedDiscussionsHeadless CMS
New
Sign in
Log inSign up
Learn more about Hashnode Headless CMSHashnode Headless CMS
Collaborate seamlessly with Hashnode Headless CMS for Enterprise.
Upgrade ✨Learn more
Developing mini.css

Developing mini.css

Deactivated User's photo
Deactivated User
·Dec 22, 2016

A proper introduction

Hi, I am Angelos Chalaris and I am a web developer/designer. For the past few months, I have been working on a project many of you might be familiar with from my posts: mini.css. Instead of just posting and reposting links to it in order to share it with the world, I decided to take on a more personal approach, wirting a short story about what it is and my journey building it.

The what's and why's of mini.css

Many people will ask what is this mini.css I speak of. Well, the tagline goes something like this:

mini.css is a minimal, responsive, style-agnostic (i.e. customizable) CSS toolkit (or framework, if you prefer) that aims to help people develop websites that look modern and beatiful on all devices, while mainting a tiny footprint of under 7KB.

There is not a lot more to add to this description honestly, except for the fact that it's pure CSS and was written using Sass to make my life easier.

Now, you'll ask why to use it. Quite frankly, because it's very lightweight and easy to learn, plus it's fully accessible. Most of the modules use HTML5 elements to do their styling and the ones that don't have a very simple structure to remember when using them. Everything (and I do mean everything) is customizable, allowing you to create your own flavors, which are thematic variants of the toolkit's implementation. There might be about 500 variables in a flavor file, but they're easy to work with and give you full control of the stylesheet.

The adventure

I started this project in August, for fun. It was just an idea I had for a while. Making a CSS framework seemed easy enough at the time and my CSS skills were getting better. When I undertook the project, I did not now what to expect or where to start, so I posted questions on both Reddit and Hashnode, to get people's opinions on mandatory components. A rough sketch was created for the framework and I started there.

A lot of v1 of mini.css was copying Pure.CSS and Bootstrap to create something similar to them, but lighter. Neutrino, which was the codename for v1 was not majorly impressive, but would get the job done. A few people gave me some feedback and suggested a few things. A couple of minor releases were made and then it hit me: I needed to start over!

Blinded by the work of the people making Bootstrap and Pure.CSS, I had forgotten about the personal aspect of my work, the looks of it, the innovation, the opinionated decisions. I started over, wanting to make something different, something that would not be a clone of Bootstrap or Pure.CSS, but rather its own thing. Part of developing v2 was cutting the fat (mostly support for legacy browsers and obsolete declarations). A lot of work went into it, altering common styling and adding a lot of Flexbox modules that will be even more well-supported as time goes by. I took a few hints from Google's Material Design and used their color palettes, shadow styling ideas and their documentation Dos & Don'ts styling.

Module development took me a month, documentation another one and a half month, but the mini.css toolkit (as it was now called) was a much more polished product, a very opinionated and well-researched project that offers something new to the table. I took my time wih making sure everything was finetuned properly and released v2, which was very well-received so far.

What lies ahead

Releasing a product is never the final step. Feedback, refinement and change are all part of what comes after the release. v2.0.1 was released today, dealing with a minor issue some people have with the way modules are imported into the flavor files. New modules and components are being suggested daily. mini.css just entered puberty, with more people partaking in its development and support.

Outro

I hope some of you will take a look at mini.css with a critical eye and suggest improvements or changes. I also hope some of you will try it out and use it for your projects, altering it however you see fit. Finally, I hope some of you will create flavors or modules to add to the toolkit, helping it grow along with its community.

Thank you very much for reading and, to all of you that were part of the process in any way, thank you a whole lot for helping me create something I am truly proud of.