I recently published my first NPM package, Jump.css! Jump.css is a CSS framework that makes semantic HTML look good and helps jump start apps and websites. Jump.css is build on native CSS with the goal of being minimal, performant, customizable, and (most importantly) look good.
Why build Jump.css?
I started thinking about and building Jump.css for my own projects. I was tired of having to write my own styles sheets for each project and each project having its own just slightly different but similar look.
I was unhappy with existing class-less CSS frameworks that worked for 90% of what I wanted but fell short in that final 10%. I also dreaded the idea of learning a class-based framework like Tailwind or Bulma when I really wanted to focus on the side project I wanted to build.
Given that problem I decided to take write once and use everywhere approach by building my own CSS framework to fit my needs.
Development Approach
There were and are a few criteria Jump.css that were forefront in my mind when I started thinking about writing my own CSS framework.
Minimal and Flexible
First, I wanted a framework that was minimal. My ideal framework is class-less, All I would need to do is import the framework and it would be applied globally to my project. This would give me a good base of styles to start building my project with while giving me the flexibility to extend the styles anywhere that I needed something more specific or different. A class-less framework naturally fit well with as semantic HTML approach. My ideal framework would work by using semantic elements to apply styling and attribute selectors to provide variation.
Ease of Use and Customizability
In a framework I would write I also wanted to rely exclusively on native CSS and CSS properties to accomplish two things.
- Eliminate a complicated build step
- Allow for easy customization of the framework
Jump.css follows these two rules by being written 100% in native CSS and by providing a base of custom CSS properties for aspects including spacing, colors, border styles, font weights, and more.
Batteries (Mostly) Included
Additionally, my ideal framework would include a set of useful components structures build with combinations of different semantic elements. Just provide your own JavaScript and these components could look good and be functional. These could include modals, cards, tables, navigation, and others. Jump.css as of v0.3.0 has a small and growing library of components that are available to build.
Performant
Lastly, I wanted a framework that was performant while still accomplishing the above. So far, I have described something like Pico CSS. I found myself reaching for Pico CSS so often to solve this exact need and it did what I needed in so many ways. However, there was one area where Pico CSS fell short for me and that was some performance issues with their components. Don’t get me wrong though! Pico CSS is an amazing framework and, to be honest, is leaps and bounds ahead of what I want to do with Jump.css but it just fell a little bit short for me in one specific area.
Roadmap and Future Plans
As of right now, I plan to continue developing Jump.css when I find myself writing the same styles or building the same components in my apps and webpages. Like I mentioned, Jump.css is something for my own projects first and foremost. The framework still lacks some important features like light and dark modes, form validation states, a layout system, and others. There are also several components I would like to add to Jump.css like drop downs, tool tips, and others.
In the long-term I would so excited to see Jump.css grow into something that isn’t just for me and my projects. I don’t expect to see really any audience for Jump.css but any and all contributions are welcome! If there is something that you find useful about Jump.css or something you’d like to see added open a PR or create an issue! Jump.css is and always will be free and open-source.