Biomatic UI

A Flexible Atomic-Focused CSS Framework

Website  |  Document

Table of Content

• Features
• Installation
• Configuration
• License

Features

• Atomic-Focus: craft anythings you need with very flexible atomic class
• Battery included: basic components included for rapid UI development
• Clean responsive grid: simple and clean grid layout using css grid
• Carefully naming: readable and predictable class name
• Configurable: config and build to match what you need
• Pure CSS: no javascript required
• Fun: yes, very fun to use

Installation

You can download the latest complied version of Biomatic and link to your project using

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

Or install using NPM or Yarn

npm install biomatic

yarn add biomatic

Or use CDN (jsdelivr via NPM)

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

Configuration

You can configure things such as Color, Spacing, Breakpoint, or Add/Remove/Change Values to Atomic Class to match your design or branding.

All configurations located in config.scss

To build Biomatic

First, install devDependencies using yarn or NPM.

yarn

npm install

This will install gulp, gulp-autoprefixer, gulp-rename, and gulp-sass.

Then use yarn or NPM run build script to build.

yarn run build

npm run build

The CSS output will be in '/dist' directory. Other build command located in package.json

License

Code copyright 2017 Theerapong Laowrungrat. Code released under the MIT license.