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.
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>
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 --save2. 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>
</div>
4. It will be displayed on the browser like this:
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.