UNITS

Snippets Themes GitHub Twitter
Simple and beautiful components.

UNITS v0.1.14 / Early access edition

Star
Download
Watch

Features

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.

Usage

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. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aut eos laudantium perferendis voluptatem sunt totam, esse mollitia officia! Ipsam numquam ducimus necessitatibus, nesciunt eos.

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