UNY

It's modern CSS framework. Beta

UNYはシンプルなCSSフレームワークです。
カードやボタンなど基本的なコンポーネントに加え、テーマファイルによる拡張も可能です。

デモを見る

主な特徴

多彩なコンポーネント

UNYで表現可能なコンポーネントの一部をお見せします。
ボタンやフォーム部品など単体で利用できるものから、リストやカードなどセットで利用できるものなど様々です。

ボタン

フォーム部品

ツリー型リスト、カード

Heading

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae, debitis.

Download

もっと見る

バージョン0.1(ベータ版)時点での全てのコンポーネントを確認したい場合は、
以下のページを参照してください。

デモを見る

クイックスタート

CDNの利用

ダウンロードしてCSS、JSファイルを読み込ませる方法以外にも、
CDNを利用することで簡単に始めることができます。

必要なファイルを <head> タグの中で読み込ませてください。

<link rel="stylesheet" href="https://unpkg.com/uny@latest/dist/uny.min.css">
<script src="https://unpkg.com/uny@latest/dist/uny.min.js"></script>

利用したいコンポーネントのHTMLタグを記述します。

<div class="card">
  <div class="card-image" style="background-image: url(https://source.unsplash.com/random);"></div>
  <h3>Heading</h3>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestiae, debitis.</p>
  <p><a href="#" class="button">Download</a></p>
</div>

これだけで、画像が埋め込まれたカード型のコンポーネントが表示されます 🎉

ドキュメント

使い方、その他の機能紹介、コンポーネント紹介などはドキュメントに詳しく記載されています。
ドキュメントは英語、日本語の2種類が用意されています。

準備中

View on GitHub

UNYは @kokushing によって開発され、GitHub上にオープンソース(MITライセンス)で公開されています。
ご意見・ご要望、バグ報告やプルリクエストをぜひお寄せください!

Starを頂けるとやる気に繋がります ;)

GitHubページへ移動する