HTML CSS JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
dist v0.1.20 Aug 19, 2017
public change dir Sep 6, 2017
src update: japanease lang pages Aug 19, 2017
.babelrc [add] webpack, babel, eslint Jul 8, 2017
.editorconfig [add] files Jun 24, 2017
.eslintrc.js [add] webpack, babel, eslint Jul 8, 2017
.gitignore change dir Sep 6, 2017
.node-version [change] v6.3.0 -> v6.10.2 Jul 16, 2017
LICENSE [add] files Jun 24, 2017 change dir Sep 6, 2017
circle.yml [add] files Jun 24, 2017
gulpfile.js change dir Sep 6, 2017
package.json v0.1.20 Aug 19, 2017
webpack.config.js [update] Jul 9, 2017
yarn.lock [add] ejs Jul 16, 2017


Simple and beautiful component set.


npm version npm download GitHub license


English / 日本語


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 Modern Browser
    UNITS is optimized to be used on th modern browser such as Microsoft Edge, Google Chrome, Firefox, Safari, How about old browsers? ... I'm sorry.

  • Responsive Web design
    We uses responsive web design approches to display optimized design on all devices.

  • Periodical Update
    UNITS is still a beta version, it will be updated periodically to a major version. Unitil the major version, We will add new components, optimize the source codes, adjusting its design.

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


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

$ git clone
$ npm install unitscss --save

Let's load the necessary files.

<link rel="stylesheet" href=",700">
<link rel="stylesheet" href="path/to/units.min.css">

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


Write exact html snippets and give it the right classes starting with uc-. For example in the sample below you can make a card component attached with covered image.

<div class="uc-card _float">
  <div class="uc-card-image" style="background-image:url("></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>

It will be displayed on the browser like this:



Please check codepen.


Download ZIP





Code and documentation copyright 2017 by kokushin. Code released under the MIT License.