My Short Journey Building Unnamed - My Own CSS Framework

I’m Ismail Ghallou, aka Smakosh. I’m a 20 year-old, self-taught graphic and UI/UX designer. I’m also a front-end developer and currently work as a remote front-end engineer, without a degree, at Obytes. I’m interested in neural networks as well!

I wrote this post to share my story of building Unnamed, my own CSS Framework, which became the #1 Product of the Day on Product Hunt.

The problem I wanted to solve

Whenever I wanted to code a UI, I had to use some sort of framework, like Bootstrap, Bulma, or LostGrid. I always had to rewrite the whole stylesheet to style the UI elements as they were designed, and I didn’t like the way I was doing it. Even though, you can import the elements you want to use, you still have to rewrite the style of the UI elements each time.

My inspiration: Mark Otto

I was inspired by Mark Otto, co-creator of Bootstrap, who was also self-taught and got a job without a degree! I told myself,

“If he could do it, why can’t I? At least a CSS framework is not an entire front-end framework.”

Diving deeper into CSS

And so I started going deeper into CSS to understand the two types of grids — now three! — from frames to tables to floats. The first standard grid system was built, but developers were still using the clearfix hack to fix a known issue on the layout. Floating elements, then Flexbox came out, and some new Flexbox grid systems appeared, but there were still some issues that only recently got fixed when grid properties were added to CSS. Now, you can divide your page into a grid, place each element inside each row, and the cool thing is that you change each element’s place on each screen size! For Unnamed, I went with the standard grid but I might remove the grid sometime soon!

Building Unnamed

Designing an UI kit

One day, I started designing a UI kit for a project I was redesigning called Exam Generator.

Then, I decided to code each element I designed.

Integrating a grid system

I decided to integrate a standard grid system and my little framework was done, but I thought about coming up with a new grid system because it was worth giving a try...

Mixing a Flexbox and standard grid

I tried mixing a Flexbox and standard grid, but that didn’t work out because I had to remove the padding left and right of each first and last column, so I ended up using a standard grid but...

Trying to use new properties

Recently, grid properties can be used in CSS to easily make any custom grid. You can think of and place each element anywhere in the grid. For example, if you have an article at the bottom of the desktop screen, you can change its place to the top on the mobile screen, without JS, like you see here. I tried to make a grid system using these new properties, but that didn’t work out because with the new updates, a front-end developer doesn’t need any prepared grids anymore! Here’s another pen that explains this more — you can check out the style part here. I might remove the grid from “Unnamed” soon.

For the technology, I generated a ‘yo webapp’ starter kit to work on from yeoman.io and I used HTML5, Sass, and Gulp.js to convert my Sass to CSS, minimize the CSS, and auto-prefix it.

Releasing Unnamed

Initially, when “Unnamed” was completed, I didn’t think about publishing it as an open source project or even sharing it online, but I thought, “This can be useful for other front-end developers because it’s easy to use and customize!” So I created a repo on GitHub and pushed everything!

The post on Product Hunt got over 560 votes, which got me to the top 10 of Product Hunt posts on launch day and also won me the #1 Product of the Day!

The repository (unnamed-css-framework) has over 100 stars and nine forks so far on GitHub! This is only the 1.0 release — I might push a new release sometime soon!

Using Unnamed

I have created a new repository (unnamed-getting-started) that anyone who wants to easily use or customize Unnamed can use! You can expect a video to come out soon explaining how to get started with Unnamed and why it’s easy to customize it.

What I learned from this short journey

I learned the basics of CSS, especially grid systems. The most valuable mistake I made was that I launched my Product Hunt post early, and there were so many issues I had to fix haha.

Check out my project on Product Hunt, and feel free to use Unnamed while building prototypes or learning any tech that doesn't invlove styling elements.

You can contact me via my Twitter @smakosh or on my personal website.