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
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.
- 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.
- Fun: very fun to use.
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
git clone https://github.com/moonrhythm/biomatic.git cd biomatic
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
The CSS output located in
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
- Import Biomatic's source file from
node_modulebut copy /config to your project and import /config from your project instead.
- Customize /config.
/* 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';
config/ ├── _breakpoint.scss ├── _color.scss ├── _initial.scss ├── _radius.scss ├── _reset.scss ├── _pacing.scss ├── _typography.scss └── config.scss
Sites using Biomatic
Code copyright 2017 Theerapong Laowrungrat, 2018 Moon Rhythm. Code released under the MIT license.