UNITS

🇺🇸 Document Snippets Themes GitHub Twitter
Simple and beautiful components.

UNITS v0.1.20 / Early access edition

Star
Download
Watch

特徴

UNITSはシンプルで美しいコンポーネントセットです。
CSSファイルを読み込み、決められたHTMLをコピー&ペーストするだけで誰でも利用することができます。

すぐに使える

units.cssを読み込むだけ。あらかじめ様々なコンポーネントが用意されているので、必要なものだけを選択しあなたのWebサイトに組み込むことが可能です。

シンプルで美しいビジュアル

各コンポーネントは美しくデザインされています。デザインは定期的にアップデートされますが、大きな変更は加えず、細かいマージンの調整を中心に行われます。

日本語をサポート

開発者は日本人なので、日本語でのサポートが可能です。日本語で書かれているWebページへの最適化、ドキュメントのアップデートも進めています。

クイックスタート

<head> タグの中に次のコードを埋め込み、すぐに使用することができます :

<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は簡単に設置でき、すぐに使用することができます!

1. UNITSはGitHubからのクローンまたはZIP形式でダウンロードするか、npmからダウンロードすることができます。

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

2. 必要なファイルを読み込ませましょう。

<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. 定められたHTMLを組み、uc-からはじまるコンポーネントクラスを付与して下さい。例えば下記のサンプルでは、カバー画像カードのコンポーネントを適用させることができます。

<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. このようにブラウザに表示されます :

Sample card

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

今後のアップデート

UNITSはまだベータ版です。
新しいコンポーネントの追加、ソースコードの最適化、デザインの見直しは定期的に行われます。
ご意見やご要望をぜひお寄せください!

  • さまざまなシーンで利用できる、UNITS専用のJavaScriptライブラリを追加します。
  • マイクロインタラクションを追加します。
  • より高度なコンポーネントの組み合わせパターンに対応させます。
  • 開発環境、ソースコードを最適化していきます。