Making my own CSS Framework
Tags: css, webdev
Published: 2020-06-11 09:31:54

A Couple of months ago I watched [this](https://www.youtube.com/watch?v=D1J0v82Dgnk) video by Web Dev Simplified, where he was suggesting quarantine projects. The one that caught my eye was, as you probably know from the title; a CSS framework. I wanted to talk to you about how I went about building my CSS component library. I know what you're thinking "there's a plethora of frameworks already out there", but it's an opportunity to make yourself stand out as a developer (more on that later). 

After the evening of watching the video, my mind was buzzing with ideas: buttons, colours, SCSS, documentation, the whole nine yards. The day after I asked as few developer friends what the name should be. Collectively we came up with [Rich UI](https://rich-ui.netlify.app/). 
<hr />
## Starting the plan

I later got to work designing the documentation. I used GitHub's project Trello board to organise everything I needed to get done. I marked out the Logo and all the components I needed. I wanted to collect all the components I always use across all my projects. This allows you to focus on the important aspects of a site rather than the repetitive ones. For example, let's say you are building something huge like an e-commerce site; just imagine how much time you will save by having pre-made all the components that you love. 



![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n6n3wnf2l2hf2yflc4i2.png)

<hr />

I soon realised the sheer scale of this undertaking; I needed some way to make it downloadable I needed all sorts of buttons, cards and easily understood class names. I started by building the basic template for the full site and then added the components as I made them. While doing all this I was looking at many different CSS frameworks to see what they all had in common, this was simple things such as component types, download links a features section... I looked at lots of different frameworks for inspiration to list a few: 

- [BootStrap](https://getbootstrap.com/)
- [Materialize](https://materializecss.com/)
- [Semantic UI](https://semantic-ui.com/)
- [Bulma](https://bulma.io/)
- [PureCSS](https://purecss.io/)
- [Skeleton CSS](http://getskeleton.com/)
- [Milligram](https://milligram.io/)
- [Foundation](https://get.foundation/)
- [UI Kit](https://getuikit.com/)
- [UI Mini](https://uimini.vedees.ru/)

My personal favourite was **UI Mini** because of its simplicity and aesthetic style. Almost every CSS Framework/ component library had a landing page containing a **'Download'** and a **'Get Started'** call to action. The **'Get Started'** would take you to the Docs and the **'Download'** would tell you how to download it.

Secondly, a lot of them had some sort of card section that lists the benefits of their framework. They all contained the all too familiar documentation section, with a fancy sidebar. Each had a section listing **'big'** sites that have used their framework and a series of changes they have made over the years. Just think for a second all these frameworks that hundreds rely on all mildly based of off each other. How can you stand out? How can you make something that isn't bootstrap that isn't a WordPress theme? Don't get me wrong I sometimes use Bootstrap myself, but even little things make you stand out when it comes to UX; that little hover animation that took you four hours:  yes, it was worth it. 
<hr />
## Conclusion

If you want to build your very own framework or component library, I recommend taking it slowly. Plan out every single component you want even draw them if you need. Think of a name, do you want a documentation site? Think of a design. Make a list of everything you need: banner, logo, colour scheme, buttons... This list may be very long but I promise you once you take it slowly, taking the time to enjoy the process it will feel amazing to start ticking everything off. 

Thank you for reading.

✨If you would like to follow my day to day development journey be sure to check my [Instagram](https://www.instagram.com/me_richard1/).