Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ita-design-system/bricss
A simple and customizable low-level CSS library generator.
https://github.com/ita-design-system/bricss
Last synced: about 1 month ago
JSON representation
A simple and customizable low-level CSS library generator.
- Host: GitHub
- URL: https://github.com/ita-design-system/bricss
- Owner: ita-design-system
- License: mit
- Created: 2024-06-07T11:17:41.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-11-12T15:29:17.000Z (about 2 months ago)
- Last Synced: 2024-11-12T16:34:13.298Z (about 2 months ago)
- Language: HTML
- Homepage: https://ita-design-system.github.io/bricss/
- Size: 1.32 MB
- Stars: 21
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - bricss - level CSS library generator. | ita-design-system | 34 | (HTML)
README
# BRiCSS
[![GitHub release (latest by date)](https://img.shields.io/github/v/release/ita-design-system/bricss?style=for-the-badge)](https://github.com/ita-design-system/briccs/releases)
A simple and customizable low-level CSS library generator.
[Website](https://ita-design-system.github.io/bricss/) | [Example in use](https://itautomotive-dev.github.io/marques-blanches-ui/) | [BRiCSS Website UI](https://ita-design-system.github.io/bricss-website-ui/)
## General principles
* **Simple responsive naming convention**: BRiCSS is a simple low-level CSS abstraction and a naming convention based on abbreviations of CSS class names and attributes.
* **CSS you really use**: Just set CSS properties you really use into your designs and code.
* **Responsive on-demand**: Optimized CSS output file size thanks to selective responsive CSS properties you really use.
* **Automatic documentation**: An interactive documentation of CSS output is automatically generated.
* **Low-engineered**: Only a browser is required.
* **JSON based**: BRiCSS is a JSON file base solution to generate a tailored CSS file library.
* **Offline**: Works even with no Internet connection.
* **Design Systems friendly**: Integrates seamlessly into a Design System.
* **Instant file size**: Instantly observe the file size impact of your settings.
* **Copy or download**: Just refresh your browser to get the latest version of your custom CSS library.## Requirements
A text editor, a web server and a browser.
## Getting started
1. [Download](https://github.com/ita-design-system/bricss/archive/refs/heads/main.zip) or clone this repository the starter project and unpack to any web server.
2. **Edit** `build.json` file to fit your needs.
3. **Run through your browser!**: Interactive documentation is generated automatically.
4. **Customize**: Replace all "Project Name" string into the `index.html` file to your own project name. Customize or remove Github linkAt first start, an onboarding menu with JSON examples is available to help populating your own `build.json`. At least one single CSS property is required to display documentation. When `build.json` is not empty, just click to download or copy your new CSS library.
All JSON examples are placed nto the folder `json_examples` or the repository.