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 (8 months ago)
• Default Branch: main
• Last Pushed: 2024-11-12T15:29:17.000Z (2 months ago)
• Last Synced: 2024-11-12T16:34:13.298Z (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 | 37 | (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 link 

At 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.