DEV Community

loading...

What Developing My Own CSS Framework Taught Me

J. Djimitry Rivière
Professional Graphic Designer. Self-taught in HTML, CSS, JavaScript, React, Python, Flask, and MongoDB. Graduated with a Bachelor Degree in Creative Media.
・3 min read

The Beginning

Yes, I agree: this is another post like that. Yes, I know: there are plenty of these CSS frameworks that already exist. Yes, I am aware: more and more web designers and developers are moving away from these frameworks, because of the evolving CSS language (with the introduction of the variables and grid system), as well as the increasing amount of customization possibilities, through platforms like Wordpress, Wix, or Squarespace. But this is my journey, and I felt compelled to share it with everyone. How did it start? When did it start?

After graduating with a degree in Digital Arts, I have been interested in using my creativity in media other than painting and making 3D models. I loved coding, and I wanted to combine my knowledge in art with it. Thus, my eyes turned towards Web Design. I taught myself HTML and CSS within the span of a summer vacation and created some very simple websites. As I progressed, I noticed that most of my codes were getting repetitive; and it was getting quite annoying (I was not yet aware of the existence of CSS frameworks, such as Bootstrap and Foundation, at the time). It was only later, during that summer, that I randomly found Bootstrap, when I searched how to style buttons!

At first, I fell in love with Bootstrap; but the framework was quite large to download; and having to constantly download jQuery to use some of its features made me lose interest over time. I began exploring other frameworks that other people have created, and later found Bulma, as well as a few other less known CSS-only frameworks. But instead of using any of them, I contemplated the idea of creating my own framework.

The Progression

The first iteration of Sparkle.css began as a series of classes to stylize buttons and creating a block-based grid system (quite a lot like W3.css--until I learned about the existence of flexbox), written in raw CSS, which then evolved into a more complex library for multiple aspects of web design written in SASS.

The more I worked on the project, the more I began appreciating it. And, once I was done with my first version, I desired to publish it. To achieve this goal, I had to teach myself how to use Git(hub), Node, Gulp, Jade/Pug, and some travis.yml.

The Present

Sparkle.cssis a passion project I don't intend to let go anytime soon. The hard work and learning process, mistakes and success, frustrations and reliefs, have all been too valuable to me, throughout this journey. To this day I still work on it, constantly finding ways to polish it, fixing its bugs, improving its documentation, testing new features, evaluating its contents, ensuring its consistency, improving its work flow, etc. And above all, building web apps and websites with it!

The Future

I intend to expand Sparkle.css further by using it as components for React.js and Vue.js. I also already have a list of projects that are using my framework, which you can find here; and the more projects I do, the more I'll add to that page.

The Conclusion

In conclusion, I can declare that I am proud of my project. Getting it started it may have confusing, hitting roadblocks may have been frustrating; but all in all, it has paid off--and it still does! I am still learning the ropes (especially when it comes to managing bug reports, pull requests, and contributions), and I hope to deliver something better.

If you find yourself curious enough to try out my framework, in your next project, don't hesitate to share with me via a link. And, if you give me your permission, I can even display it on Sparkle.css's official website! :)

Thank you for reading.

I hope and pray you all have a wonderful and blessed day,

JD

Discussion (0)