Bootstrap, Foundation, Bulma, Tailwind, PureCSS, Materialize, and so forth: the idea of building your own CSS framework might sound like pure madness with so many ready-made CSS libraries out there.
But there might be some valid reasons that lead to taking up such a challenge. In this article, I will try to list the ones that convinced me to build a custom CSS framework for our Cruip templates.
1. I wanted a tailor-made suit
First and very debatable point! Productivity is what all of us should always keep the focus on, and that means to make things work with less time and effort. So why should I want to waste time just to reinvent the wheel?
Well, I think it depends on what you are working on. If you need to go fast, building a custom framework it's not a good move. In our case we wanted a solid, scalable and easy to maintain scaffold, and here's why we thought that doing everything from scratch was a more appropriate choice.
2. I needed a custom but reusable structure
During the prototyping stage of Cruip, we defined some fundamental principles:
- We didn't want fluid, percent-based layouts
- We didn't need grids yet
- We wanted to define the white-space in multiples of 4
- We wanted to adopt pixel only as measure unit
- I needed a settings file to store custom variables for our sections and components
- I needed Sass mixins and functions from my Swiss Army knife
Way too many needs for adopting a CSS framework. That's why we decided to build our own system.
3. I didn't want to end up with plethoric code
Generally speaking, I don't like to have things that I don't need around me. That applies to both life and job.
Every CSS library provides you much more than you need, and I prefer to spend my time writing new code rather than wasting time to remove unused code.
4. I wanted to save time in the long run
I've just said that building a CSS framework is time-consuming, but it's a one-time job.
I spent almost 3 months writing, testing, and fixing the base CSS for Cruip. What we get now is a solid skeleton that we can re-use anytime we need to build a landing page. Also, I can re-cycle my work for any of my future projects, aside from improving or extending it accordingly with the needs of the moment.
Not of secondary importance: it's my creature, and I can feel much more comfortable with it rather than with code written, maintained and updated by anyone else.
5. I wanted to challenge myself
Coding a CSS framework from scratch can be an exciting experience. You will test your skills at 360 degrees and it will force you to view things from a larger perspective. Definitely an experience that I would recommend!
Top comments (6)
I would love to learn (in a much more simplified version without sacrificing the structure) of how you built this with SCSS. I love what you did with Cruip and I can't ever find great tutorials of the architecture like you have with Cruip! Awesome man! Ever consider doing that?
Hey Noah, thank you for your feedback! That is something that I would definitely consider for a next article :)
That's awesome to hear! I know it's a lot of work, but if that were a course I would buy it without question 😉
Hi,
What benefits are there with a px unit system?
I took a look at cruip.com I like your template, real time saver. And I have a project which needs a marketing front end solution.
On that topic, I've been using CRA. What's the build system for the React templates?
Are they upgraded to React Router V6?
Are they functional components, which use hooks?
Hey Bernard,
There are no specific benefits, it's a choice we made during the prototyping stage.
We used create-react-app for our React templates. They include mostly class components. Switching to functional components is something that I was considering but, TBH, I don’t think to get into a so big refactoring process soon (we have been distributing 14 templates!).
No React Router v6 yet!
Cheers, P.
Ok