Basilcss /
core
🪴 Basil.css is an open source, simple and lightweight CSS framework for building custom user interfaces.
Active repositoryHas homepage
CSSMIT
⑂ 6 forks◯ 3 issuesUpdated Oct 17, 2025
Project homepage ↗Loading repository data…
conedevelopment / repository
sprucecss
An open-source, lightweight and modern CSS framework, design system built on Sass. Give your project a solid foundation.
#css#css-framework#dark-mode#dark-theme#frontend#html
Live repository statistics
★ 265Stars
⑂ 4Forks
◯ 0Open issues
◉ 265Watchers
README preview
Spruce CSS is an open-source, lightweight and modernish CSS design system, framework built on Sass. Give your project a solid foundation.
What is Spruce CSS?
- It is a Sass-based, small framework that operates with just a few utility classes.
- It takes advantage of the Sass members: variables, mixins, and functions.
- It embraces Sass modules, so it uses @use and namespacing for import.
- Spruce is a good choice if you prefer writing CSS instead of HTML. It uses just a few classic utility classes.
- It is a relatively small (~7kb gzipped) framework with a smaller learning curve. The codebase is small but can add more to any project with the available mixins and functions.
- It is that bunch of code you keep manually carrying from project to project.
- It is themeable. You can create different themes using CSS custom properties like a dark one.
- The generated CSS code is separated from the framework. You can use only the tools (variables, mixins, functions) in your project without the generated styles.
- Include just a few components. For UI, we have a separate project named Spruce UI, where you can find drop-in components.
- It comes with dark-mode (or any theme mode) support. It uses CSS custom properties, so it isn’t that hard to create a new color theme.
- It doesn’t come with a classical grid system.
How to start with Spruce?
Firstly, we suggest checking out the documentation, precisely the installation page.
There is nothing new if you previously used Sass unless you don’t know the newer module system.
We made a Spruce CSS Eleventy Starter, a boilerplate starter template based on the popular static site generator 11ty. It includes a basic compile setup and, of course, Spruce CSS. You can find more information about it on GitHub.
Documentation
For the complete documentation, please visit our site at sprucecss.com. You can edit it at our separate repository.
Getting Started
- Introduction
- Installation
- Structure and Code
- Sass
- Inclusivity and Accessibility
- Internationalization
- JS
- Contribution
- Appendix
Customization
Sass
Elements
Components
This collection of reusable user interfaces aims to help you create more coherently with Spruce CSS.
Templates
- Spruce Docs - A simple documentation template made with Eleventy.
- Root - A straightforward administration template with standard views and lots of components.
Contributing
Thank you for considering contributing to Spruce CSS! The contribution guide can be found in the documentation.
ALGORITHMICALLY RELATED
Similar Open-Source Projects
Selected from shared topics, language and repository description—not editorial ratings.
★ 4