A utility-first CSS framework with a consistent naming convention.
This project provides utility classes that can be used alongside simpledev.css or your own projects. The goal is to have a consistent naming convention for all of the classes, since a lot of other frameworks don't have a consistent naming convention.
This project is best suited for making small modifications to your layouts, prototyping, or using it as a learning tool to learn about different CSS properties.
The naming convention for these utility classes is to abbreviate the property and then write out the full value. The words are separated with dashes. So display: block; would become d-block, font-style: italic; would become fs-italic, and text-decoration-line: underline; would become tdl-underline.
For properties that support a range of values, like font-size or line-height, we use the numbers 0-5 instead of value names. So font-size has the classes fs-0, fs-1, fs-2, fs-3, fs-4, and fs-5. For some properties, 0 means the property is actually being set to 0, like for margin and padding, and for others it's just the starting value.
For classes that are responsive, you can add -sm, -md, or -lg to the end of the class name.
There are a handful of classes where we have to deviate from the naming convention to avoid duplicate class names.
This website demonstrates some of the classes you can use with simpledev-utilities.css. Click on the links in the navbar to see different demos.
We don't have demos for every single property we support, but you can see all of the properties we support by expanding the lists below. Check the GitHub repo for more information.
Add this link element inside your head element to try using our utility classes.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/simpledevio/simpledev-css-utilities@latest/dist/simpledev-utilities.css">