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.
Install from CDN
Alternatively, you can use the unpkg or jsdelivr CDN to load latest compiled of Biomatic
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.gitcd 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 Biomatic's files from node_module */@;@;@;@;@;
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.