Notably Polite Mariner


    0.3.12 • Public • Published

    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.


    • 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.


    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="" rel="stylesheet">
    <link href="" 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
    cd biomatic

    Install dependencies

    npm install

    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.

    1. Install Biomatic using npm.
    2. Create your main.scss file.
    3. Import Biomatic's source file from node_module but copy /config to your project and import /config from your project instead.
    4. Customize /config.
    5. 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

    ├── _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.


    npm i biomatic

    DownloadsWeekly Downloads






    Unpacked Size

    2.5 MB

    Total Files


    Last publish


    • biomaru