A Couple of months ago I watched this 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.
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.
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:
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.
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.
Top comments (12)
Good work! I've seen your repo at Github. I believe the final finished project would be like a component-based CSS framework if that your design goal. Keep it going. Some users would love this kind of framework.
Thank you!, yes that was my goal I wanted it to be very unopinionated, just to give options of pre-styled components.
where do you hosted your CSS files and how please tell.
I just stuck them on GitHub and used statically.io/convert/ to turn them into a CDN
thanks,
it was great
Thanks for helping me!
I will also launch my framework soon. because of you.
thanks a lot again
Awesome well done!
Great Work Richard !! I just wanted to ask How did you make that build folder ?
Hi! Thank you glad you enjoyed it! This is probably not the answer you wanted to hear but I created a folder called Build and then pasted all the CSS (Compiled from SCSS) into cssminifier.org and then pasted the minified CSS in a min.css file :)
Oh Awesome, Thank you !! And for Link to use The framework I was just wandering how did the converting the repo recognize the min.css folder ? And Did you publish it on Npm Platform ? if u didn't do you have any idea how ? I apologize for all these questions !!
I did try to use npm but npm serves mainly JavaScript and I didn't really want to mess with trying to get it working.
So what I did was had the min.css in the build folder on GitHub just like a regular CSS file (I probably would have been better if I had a separate branch for it but I didn't) and then copied it's URL into statically.io/convert this used GitHub to make a CND link straight to the file, so if anyone wanted to use the library they just needed to use the CDN.
So you used the URL where the min.css file is (.../build/style.min.css) right ?
Yeah I understand now ! Thank you so much !! Neat Framework btw I used it for bit !
Yeah exactly!
Oh thanks for trying it! Maybe one day I'll get to adding more stuff 😉 and making something finished.