CSSリセットの新しい考え方、リセットと有用なコンポーネントだけのスタイルシート -Shoelace.css

レイアウトにfloatを使用していた頃はグリッドを構築するために、複雑なHTMLやテクニックが必要になることがありました。しかし、flexboxやCSS Gridの登場で、レスポンシブ対応の柔軟なグリッドを簡単に利用できるようになりました。

そんな時代に合わせて、グリッドは無し、有用なコンポーネントが簡単に利用できるリセット用のスタイルシートを紹介します。

これからの新しいCSSリセット

Shoelace.css
Shoelace.css -GitHub

Shoelace.cssの特徴

グリッドはflexboxやCSS Grid、またBootstrapなどを利用し、プロジェクトにあったデザインでコンポーネントを作成することができます。

  • Shoelace.cssはフレームワークではなく、有用なコンポーネントが含まれたCSSリセットです。
  • CSSの変数を使用しているので、カスタマイズが非常に簡単です。
  • Less、Sass、または何らかの前処理は必要ありません。
  • グリッドはCSS Gridを推奨します。
    古いブラウザをサポートする場合は、flexboxやBootstrap-Grid-Onlyを推奨します。

サポートブラウザ

  • IEや古いブラウザ(Edgeは問題ありません)を気にしない場合は、Shoelaceをそのまま使用できます。
  • 古いブラウザをサポートする場合は、Mythを使用してください。

Shoelace.cssの使い方

使い方は簡単です。通常のCSSリセットのように外部ファイルとして記述するだけです。

イベントやアニメーションを利用する際は、JSファイルも記述します。

CSSファイルとJSファイルは、CDNでも利用できます。

Shoelace.cssのデモ

Shoelace.cssには、Webページやアプリでよく使用されるコンポーネントを最適化するスタイルシートが揃っています。

デモのキャプチャ

コンテンツで利用する見出し・本文・リストなど

デモのキャプチャ

アラート用のパネル

デモのキャプチャ

バッジ

デモのキャプチャ

ボタン

デモのキャプチャ

ドロップダウン

デモのキャプチャ

フォーム

デモのキャプチャ

ローディングのアニメーション

デモのキャプチャ

タブ

デモのキャプチャ

テーブル

デモのキャプチャ

ユーティリティ

top of page

©2017 coliss