https://github.com/bitcrowd/bitstyles

A complete design system, with base styles and components, built in Sass using CSS variables
https://github.com/bitcrowd/bitstyles

css design-system design-tokens sass

Last synced: 3 months ago
JSON representation

A complete design system, with base styles and components, built in Sass using CSS variables

• Host: GitHub
• URL: https://github.com/bitcrowd/bitstyles
• Owner: bitcrowd
• License: isc
• Created: 2016-03-17T15:01:26.000Z (over 9 years ago)
• Default Branch: main
• Last Pushed: 2024-12-12T21:39:15.000Z (10 months ago)
• Last Synced: 2025-06-30T12:51:58.166Z (3 months ago)
• Topics: css, design-system, design-tokens, sass
• Language: MDX
• Homepage: https://bitcrowd.github.io/bitstyles
• Size: 21.3 MB
• Stars: 17
• Watchers: 6
• Forks: 0
• Open Issues: 64
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.txt
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# Bitstyles

[![Linting & tests](https://github.com/bitcrowd/bitstyles/actions/workflows/run-checks.yml/badge.svg)](https://github.com/bitcrowd/bitstyles/actions/workflows/run-checks.yml)

![npm version](https://img.shields.io/npm/v/bitstyles)

Bitstyles is a collection of tiny Sass CSS objects and helpers, intended to be used by CSS- & HTML-aware frontend developers. This is no simple drop-in solution to skin a website, rather a collection of focused object-classes, each defining a single visual aspect. By using these simple building blocks in your HTML, it’s possible to construct complex layouts without repeating CSS.

There is a layer of more complex components built using these low-level classes — see the `UI` layer in the documentation linked below — that provides examples of many common structures needed for admin interfaces. These are suitable for less UI-focused developers, and are copy- & paste-able into any project that uses bitstyles. For those using the [elixir phoenix framework](https://www.phoenixframework.org), there is also [BitstylesPhoenix](https://github.com/bitcrowd/bitstyles_phoenix), which provides helpers for generating the HTML structure for many of the UI components.

## Documentation

See how to get started, and read the full documentation for each module, with examples, at [https://bitcrowd.github.io/bitstyles/](https://bitcrowd.github.io/bitstyles/).

## Contributing

See [the contributing guide](./CONTRIBUTING.md) for an introduction to opening a PR on bitstyles.

## Font license

The Poppins webfont is included in Bitstyles, and is licensed under the [SIL Open Font License, 1.1](https://scripts.sil.org/ofl). Copyright 2020 The Poppins Project Authors (https://github.com/itfoundry/Poppins)