Some tips before creating a CSS framework

Hello everyone, first I have to say that this advice is purely subjective, and I don't pretend at all to be able to advise everyone, and even less to have created a huge CSS framework, but simply to share a feedback on my creation and what I've learned from it.

That being said, let me introduce myself, I'm Antharuu, and recently I created a small CSS framework. Here are a few points that I advise you to take a serious look at if one day you want to create a project of this kind.

1. Choosing the right language

It seems obvious, I'm not telling you anything by telling you that it is essential, but I had to recreate the project along the way because for the needs that I had I felt limited with SCSS.

In fact, that's one of the most important things, because you're going to have to be comfortable with this language, and you're going to have to find your way around it. Personally I changed to Stylus, but it's purely subjective and my problems with SCSS may have been purely due to poor preparation.

2. Getting ready

Honestly, when I started I thought I was ready, and I generally knew where I was going. Well I was wrong, I hadn't thought of everything and I rushed a bit at first.

I advise you not only to think about all your systems, how your framework will work, how to select your elements, knowing in advance the scope of the project can help too.

3. Thinking about your systems

So it seems almost obvious to me that if you plan to create a CSS framework, that you are going to use a preprocessor, or at least have your code generated. It's very important that you think carefully about your functions and mixins. Take the time to do all this well, make many tests and don't hesitate to look on the internet if you have any concerns or questions.

It's normal I think not to have a perfectly optimized code the first time, but look regularly at your CSS, see what's wrong and what can be generated or grouped together.

4. Use it!

In my opinion, this is the most important point once you have something ready to be published. In my case I used it to create a complete website/documentation for the framework. I realized some bugs that appeared after some changes or additions of rules. It's a good way to finally see your project at work.

Obviously use custom CSS for your project, to see if we didn't generate conflicts during your development.

Here are my few little tips after each case is unique, for example it's also important to have an original idea, and to share your project with developer friends to get feedback, ideas, etc... but I think that if you took the time to read it all, it's because you're probably motivated by this kind of project and so it will be natural for you to do your best.

Well, sorry if my English is not perfect, I'm French, and if you want to see the project I'm talking about, it's available here : Bubblegum

I hope these little tips and feedback have helped you. This is my first post here, so I'm not sure how it works yet, but I hope and think to post more articles here. Have a nice day.

npm i bubblegum-css

composer require antharuu/bubblegum "v1.1.2"

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bubblegum-css@1.1.2/dist/bubblegum.min.css">