Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/moonrhythm/biomatic
A Flexible Atomic-Focused CSS Toolkit
https://github.com/moonrhythm/biomatic
css scss
Last synced: 6 days ago
JSON representation
A Flexible Atomic-Focused CSS Toolkit
- Host: GitHub
- URL: https://github.com/moonrhythm/biomatic
- Owner: moonrhythm
- License: mit
- Created: 2017-08-18T09:40:36.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-08-16T13:33:47.000Z (about 2 years ago)
- Last Synced: 2024-10-30T16:12:22.911Z (14 days ago)
- Topics: css, scss
- Language: CSS
- Homepage: https://biomatic.dev/
- Size: 2.24 MB
- Stars: 154
- Watchers: 8
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Biomatic CSS
A flexible atomic-focused CSS toolkit
**Biomatic CSS** is an atomic-focused CSS library with utilities, layout, and basic components classes for faster development.
Biomatic's goal is to be a foundation to create and extend a maintainable CSS for your design systems (You can still easily use the complied css file in ``/dist``).
**Biomatic** is unopiniated. You can customize atomic classes, colors, font, spacings, and more from the simple SCSS configuration files and use them across your project.
# Features
- **Atomic-focused:** craft anything you wanted with the collection of atomic classes.
- **Battery included:** basic components, layouts and utilities included, for rapid UI development and easy to extend.
- **Clean responsive grid:** simple and clean grid systems.
- **Carefully naming:** readable and predictable class name.
- **Customizable:** customize and create your own design systems.
- **Pure CSS:** no javascript required.
- **Fun:** very fun to use.
# Installation
### Install manually
Download the compiled and minified of [biomatic](https://github.com/moonrhythm/biomatic/releases/download/v0.3.4/biomatic.full.min.css.zip).
Unzip and include ``biomatic.min.css`` in your website.
```html
```
### Install from CDN
Alternatively, you can use the unpkg or jsdelivr CDN to load latest compiled of Biomatic
```html
```
```html
```
### install using NPM or Yarn
```shell
npm install biomatic --save
```
```shell
yarn add biomatic
```
# Customize and Build
To use Biomatic as a foundation and extend it to create your design system. you can either
- __Clone Biomatic__
- __Import Biomatic__
## Clone and build Biomatic
**Clone biomatic**
```shell
git clone https://github.com/moonrhythm/biomatic.git
cd biomatic
```
**Install dependencies**
```shell
npm install
```
```shell
yarn
```
Biomatic uses ``Gulp`` for compiling CSS.
This will install ``Gulp`` and it dependencies.
Then you can play around with the files in [/config](https://github.com/moonrhythm/biomatic/blob/master/src/config)
**Build th new CSS**
simply run
```shell
gulp build
```
The CSS output located in ``/dist`` directory.
## Import Biomatic
It is recommended importing Biomatic SCSS source files to your projects from ``node_module`` and then customize it from your project.
In this way, you can keep Biomatic up to date without conflicts, because Biomatic main source and configure files are separated.
1. Install Biomatic using npm.
2. Create your ``main.scss`` file.
3. Import Biomatic's source file from ``node_module`` but copy [/config](https://github.com/moonrhythm/biomatic/blob/master/src/config) to your project and import [/config](https://github.com/moonrhythm/biomatic/blob/master/src/config) from your project instead.
4. Customize [/config](https://github.com/moonrhythm/biomatic/blob/master/src/config).
5. Build ``main.scss``.
Example of ``main.scss``
```js
/* import config from your project*/
@import 'config/config';
/* import Biomatic's files from node_module */
@import 'biomatic/src/mixins/mixins';
@import 'biomatic/src/layouts/layout';
@import 'biomatic/src/components/components';
@import 'biomatic/src/utilities/utilities';
@import 'biomatic/src/atomics/atomics';
```
files in ``/config``
```
config/
├── _breakpoint.scss
├── _color.scss
├── _initial.scss
├── _radius.scss
├── _reset.scss
├── _pacing.scss
├── _typography.scss
└── config.scss
```
# Sites using Biomatic
# License
Code copyright 2017 Theerapong Laowrungrat, 2018 Moon Rhythm. Code released under the MIT license.