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.

Unzip and include biomatic.min.css in your website.

<link href="/path/to/biomatic.min.css" rel="stylesheet">

Install from CDN

Alternatively, you can use the unpkg or jsdelivr CDN to load latest compiled of Biomatic

<link href="https://unpkg.com/biomatic/dist/biomatic.min.css" rel="stylesheet">

<link href="https://cdn.jsdelivr.net/npm/biomatic/dist/biomatic.min.css" rel="stylesheet">

install using NPM or Yarn

npm install biomatic --save

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

git clone https://github.com/moonrhythm/biomatic.git
cd biomatic

Install dependencies

npm install

yarn

Biomatic uses Gulp for compiling CSS.
This will install Gulp and it dependencies.

Then you can play around with the files in /config

Build th new CSS

simply run

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.

Install Biomatic using npm.
Create your main.scss file.
Import Biomatic’s source file from node_module but copy /config to your project and import /config from your project instead.
Customize /config.
Build main.scss.

Example of main.scss

/* 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