🇯🇵 Document Snippets Themes GitHub Twitter
Simple and beautiful components.

UNITS v0.1.20 / Early access edition



UNITS is a simple and beautiful component set.
All you have to do is just load css files, copy and paste snippets, so easy that anyone can use.

Use Quickly

All you have to do is just put units.css. Several components have been prepared already and you can choose components you want to use and apply it on your website.

Simple and Beautiful

Each components are beautifully designed. The design will be updated periodically, We wont't apply big changes, but apply only a small changes such as adjusting margins.

Support Japanese

Because the developers are Japanese that we can support in Japanese. We have been optimizing web pages and updating documents written in japanese.

Quick Start

Just embed the following code inside the <head> tag and you can start using it immediately :

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/unitscss@latest/dist/units.min.css">

<script src="https://unpkg.com/unitscss@latest/dist/units.min.js"></script>


UNITS can be installed easily, it is possible to start using immediately!

1. UNITS itself can be downloaded from GitHub by cloning it or as a ZIP format, or you can download it via npm.

$ git clone https://github.com/kokushin/unitscss.git
$ npm install unitscss --save

2. Let's load the necessary files.

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="path/to/units.min.css">

<script src="path/to/units.min.js"></script>

3. Complete the defined HTML and give the component class starting with uc-. For example, in the sample below you can apply the cover image card component.

<div class="uc-card _float">
  <div class="uc-card-image" style="background-image:url(https://source.unsplash.com/random)"></div>
  <h3 class="uc-card-title">Sample card</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, et.</p>
  <div class="uc-btn _primary"><a href="#">Button</a></div>

4. It will be displayed on the browser like this:

Sample card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, et.

Next update

UNITS is still in beta.
Adding new components, optimizing source code, and redesigning the design are done on a regular basis.
Please send us your opinions and requests!

  • Add JavaScript that can be used in various scenes.
  • Increase variations of available units.
  • It corresponds to combination pattern of more units.
  • Refactor the code.