これなら簡単で便利!最近見かけるCSSのさまざまなコンポーネントをコピペで利用できる -CodyHouse Framework

HTMLとCSS、そしてJavaScriptで実装された最近のWebページやスマホアプリで見かけるさまざまなコンポーネントを簡単に利用できるフレームワークを紹介します。

各コンポーネントは単体でもHTMLとCSSのコピペで利用できるので、既存ページや他のフレームワークにも簡単に使うことができて便利です。

サイトのキャプチャ

CodyHouse Framework Components
CodyHouse Framework -GitHub

CodyHouse Frameworkの特徴

CodyHouse Frameworkは、最近のWebページやスマホアプリで見かけるさまざまなコンポーネントを簡単に利用できるフレームワークです。

サイトのキャプチャ

CodyHouse Framework 2.0

  • CSSベースの軽量フレームワーク
    アクセシブルで、Webページやスマホアプリのインターフェースを構築するための8Kb軽量フロントエンドフレームワーク。
  • さまざまなコンポーネント
    HTMLとCSS、そしてJavaScriptで実装された、87種類のコンポーネント。
  • 実装もカスタマイズも簡単
    コピペで利用でき、既存のCSSルールを上書きする必要はありません。
  • モバイルファースト
    すべてのコンポーネントは、モバイルファーストで実装されています。
  • プログレッシブエンハンスメント
    すべてのコンポーネントは、プログレッシブエンハンスメントに従って構築されています。
  • ライセンス
    MITライセンスで、個人でも商用でも無料で利用できます。

一つコンポーネントを見てましょう。
テキストリンクをホバーすると、背景がハイライトするエフェクトです。ハイライトのアニメーションは、さまざまな種類が用意されています。

デモのアニメーション

Text backround effects

コンポーネントを利用するのも簡単。
デモページの右上から、HTMLやSCSSのコードを表示でき、コピペで利用できます。

デモのHTMLとCSS

Text backround effects

CodyHouse Frameworkのコンポーネント

コンポーネントは10カテゴリに、87種類が現在利用できます。
対応ブラウザはすべてのモダンブラウザで、IE 10+, Edgeもサポートされています。IE 9はアクセスは可能だけれど、スタイルが少し異なるサポートになっています。

サイトのキャプチャ

コンテンツとレイアウト

サイトのキャプチャ

コントール

サイトのキャプチャ

データ表示

サイトのキャプチャ

フォーム関連

サイトのキャプチャ

ナビゲーション

サイトのキャプチャ

オーバーレイ

サイトのキャプチャ

プラグイン

サイトのキャプチャ

タイポグラフィ

sponsors

top of page

©2024 coliss