Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/conedevelopment/sprucecss
An open-source, lightweight and modern CSS framework, design system built on Sass. Give your project a solid foundation.
https://github.com/conedevelopment/sprucecss
css css-framework dark-mode dark-theme frontend html lightweight lightweight-framework minimalistic sass scss scss-framework
Last synced: about 12 hours ago
JSON representation
An open-source, lightweight and modern CSS framework, design system built on Sass. Give your project a solid foundation.
- Host: GitHub
- URL: https://github.com/conedevelopment/sprucecss
- Owner: conedevelopment
- License: mit
- Created: 2021-12-19T18:39:45.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-20T17:57:35.000Z (about 1 month ago)
- Last Synced: 2024-09-21T18:21:37.889Z (4 days ago)
- Topics: css, css-framework, dark-mode, dark-theme, frontend, html, lightweight, lightweight-framework, minimalistic, sass, scss, scss-framework
- Language: SCSS
- Homepage: https://sprucecss.com
- Size: 1.46 MB
- Stars: 231
- Watchers: 9
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
**Spruce CSS is an open-source, lightweight and modernish CSS design system, framework built on Sass. Give your project a solid foundation.**
[](https://github.com/conedevelopment/sprucecss/releases/latest)
[](https://www.npmjs.com/package/sprucecss)
[](https://github.com/conedevelopment/sprucecss/actions/workflows/test.yml)
[](https://github.com/conedevelopment/sprucecss/blob/main/LICENSE)
## 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](https://sprucecss.com/docs/elements/generators).
- Include just a few components. For UI, we have a separate project named [Spruce UI](/ui/getting-started/introduction), where you can find drop-in components.
- [It comes with dark-mode](https://sprucecss.com/docs/customization/themes) (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](https://sprucecss.com/docs/getting-started/installation).
There is nothing new if you previously used Sass unless you don’t know the newer [module system](https://sass-lang.com/blog/the-module-system-is-launched).
We made a [Spruce CSS Eleventy Starter](https://github.com/conedevelopment/sprucecss-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](https://sprucecss.com). You can edit it at our [separate repository](https://github.com/conedevelopment/sprucecss-site-eleventy).
### Getting Started
- [Introduction](https://sprucecss.com/docs/getting-started/introduction)
- [Installation](https://sprucecss.com/docs/getting-started/installation)
- [Structure and Code](https://sprucecss.com/docs/getting-started/structure-and-code)
- [Sass](https://sprucecss.com/docs/getting-started/sass)
- [Inclusivity and Accessibility](https://sprucecss.com/docs/getting-started/accessibility)
- [Internationalization](https://sprucecss.com/docs/getting-started/internationalization)
- [Print](https://sprucecss.com/docs/getting-started/print)
- [JS](https://sprucecss.com/docs/getting-started/js)
- [Contribution](https://sprucecss.com/docs/getting-started/contribution)
- [Appendix](https://sprucecss.com/docs/getting-started/appendix)
### Customization
- [Variables](https://sprucecss.com/docs/customization/variables/)
- [Settings](https://sprucecss.com/docs/customization/settings)
- [Themes](https://sprucecss.com/docs/customization/themes)
### Sass
- [Colors](https://sprucecss.com/docs/sass/colors/)
- [Variables](https://sprucecss.com/docs/sass/variables)
- [Mixins](https://sprucecss.com/docs/sass/mixins)
- [Functions](https://sprucecss.com/docs/sass/functions)
### Elements
- [Generators](https://sprucecss.com/docs/elements/generators)
- [Typography](https://sprucecss.com/docs/elements/typography)
- [Tables](https://sprucecss.com/docs/elements/tables)
- [Buttons](https://sprucecss.com/docs/elements/buttons)
- [Forms](https://sprucecss.com/docs/elements/forms)
- [Media](https://sprucecss.com/docs/elements/media)
## Components
This collection of reusable user interfaces aims to help you create more coherently with Spruce CSS.
## Templates
- **[Spruce Docs](https://github.com/conedevelopment/sprucecss-eleventy-documentation-template)** - A simple documentation template made with Eleventy.
- **[Root](https://github.com/conedevelopment/sprucecss-root-admin-template)** - A straightforward administration template with standard views and lots of components.
## Contributing
Thank you for considering contributing to Spruce CSS! The [contribution guide](https://sprucecss.com/docs/getting-started/contribution/) can be found in the documentation.