Ripple UI

Ripple UIはモダンで美しいオープンソースのTailwind.cssコンポーネントとユーティリティのコレクションです。

再利用可能なコンポーネントで実装や設定も複雑性も無いシンプルな仕様で学習コストのかからない簡単に利用できるようになっています。

例えば上記サンプルは以下のようなコードで実装されています。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rippleui/dist/css/styles.css" />
<script src="https://cdn.tailwindcss.com"></script>
<div class="navbar ">
	<div class="navbar-start">
		<a class="navbar-item">Ripple UI</a>
	</div>
	<div class="navbar-end ">
		<a class="navbar-item">Home</a>
		<a class="navbar-item">About</a>
		<a class="navbar-item">Contact</a>
	</div>
</div>
<div class="breadcrumbs text-sm ">
	<ul>
		<li>
			<a>Home</a>
		</li>
		<li>
			<a>Library</a>
		</li>
		<li>Add Data</li>
	</ul>
</div>
<div class="flex w-full overflow-x-auto ">
	<table class="table">
		<thead>
			<tr>
				<th>Type</th>
				<th>Where</th>
				<th>Description</th>
				<th>Amount</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>1</th>
				<td>Cy Ganderton</td>
				<td>Quality Control Specialist</td>
				<td>Blue</td>
			</tr>
			<tr>
				<th>2</th>
				<td>Hart Hagerty</td>
				<td>Desktop Support Technician</td>
				<td>Purple</td>
			</tr>
			<tr>
				<th>3</th>
				<td>Brice Swyre</td>
				<td>Tax Accountant</td>
				<td>Red</td>
			</tr>
		</tbody>
	</table>
</div>
<div class="card card-image-cover">
	<img src="https://source.unsplash.com/random/300x200" alt="" />
	<h2 class="card-header">Hello World!</h2>
	<div class="card-body">
		<p class="text-content2">
			I really like the cats! lorem ipsum dolor sit amet, consectetur adipiscing
			elit.
		</p>
	</div>
	<div class="card-footer">
		<button class="btn btn-secondary">Buy a Cat</button>
	</div>
</div>

少ないコードで実践的なUIを構築できるのでclassさえ使いこなせればすぐにでも開発にかかる事が出来ます。楽で良いですね。サイドプロジェクトなんかにもオススメです。ライセンスはMITとの事。

Ripple UI