This content originally appeared on DEV Community and was authored by Javier Alvarado
simpledev.css is a new CSS framework that I describe as a mostly classless framework. I call it mostly classless because a lot of the code uses type selectors, so you don't have to add many classes to style your web page. There are some classes, but we try to keep them to a minimum (so far there are only about 42 classes).
Let's go over some of the features below!
Features
- Mostly classless design: It's mostly classless, so you'll see your plain HTML page transform as soon as you add the framework.
- Minimal classes for common elements: We provide classes for things that are really common: a navbar, making links look like buttons, a basic footer, etc.
-
Accessibility-focused: I'm not an accessibility expert, but I tried my best to incorporate accessibility best practices into the framework. Therefore, the framework has a skip link component, a
visually-hiddenclass, and we use rems for font sizes. - Theme support: simpledev.css supports different themes. You can use just light mode, just dark mode, or both.
- Minimal JavaScript: It's very light on JS. We only use JS for the navbar component. If you're not using the navbar (or you're using the simple navbar component instead), you can skip the JS entirely!
- Easy to get started: We have a Get Started page that has basic and advanced templates that you can copy or download, a GitHub repo that you can download or use to start a new repo, and a Pen from CodePen to try it directly in your browser.
- Recipes: We also have a Recipes page where you can copy and paste CSS rules into your custom.css file to get things like a sticky navbar, rounded corners, striped tables, and smooth scrolling!
- Custom color palettes: You can bring your own color palette. simpledev.css doesn't really have any colors by default, so you can pick your own colors and add it to the framework.
- Modular components: You can technically download some of the components and use them individually if you want. Just visit the GitHub repo and download the CSS files you want. Just keep in mind we developed our components on top of Modern Normalize, so you might need to incorporate Modern Normalize to get the same look.
Background
Last year I discovered the awesome-css-frameworks repo on GitHub. It contains a long list of CSS frameworks grouped into different categories. I was particularly interested in the section on Classless CSS frameworks. I liked the idea of linking to a CSS file and instantly changing the way an HTML page looks without having to modify your HTML.
Initially, I was inspired by the framework called Water.css in the list, but later on I drew more inspiration from Pico.css, another classless framework.
Eventually I decided to try to create my own framework. However, I wanted it to be a little different:
- I decided to just use vanilla CSS instead of Sass. This is because I wanted it to be easy for other people to try the framework and also learn from the source code.
- I didn't want it to be purely classless, because I think there are some things that require CSS classes.
- Pico is probably the best looking classless CSS framework, but I feel that some of the elements/components are a little big, so I wanted my elements/components to be smaller.
Conclusion
Thanks for reading this post! I have a few favors to ask:
- Please star the repo on GitHub!
- Try building a small project with the framework
- If you notice any problems, please create an issue on GitHub
- If you have any feature requests, please start a discussion on GitHub
- If you have an idea for component, try building it on CodePen!
Leave a comment below if you have any questions or suggestions! I'll also probably follow up with a tutorial on simpledev.css later on.
This content originally appeared on DEV Community and was authored by Javier Alvarado
Javier Alvarado | Sciencx (2024-09-16T21:58:42+00:00) Introducing simpledev.css. Retrieved from https://www.scien.cx/2024/09/16/introducing-simpledev-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.