Resource - CSS

FlexboxベースのシンプルなCSSフレームワーク・「useful.ly」

useful.ly useful.lyはFlexboxベースのシンプルなCSSフレームワーク。グリッドやモーダルウィンドウ、ボタンやフォームのスタイルを提供してくれています。まで開発中でこれから頑張る!CDNも用意したから試しに触って...

WebアプリのためのシンプルでフレキシブルなUIフレームワーク・「Agile CSS」

Agile CSS Agile CSSはWebアプリケーションのためのフレキシブルなUIフレームワークです。タブやテーブル、通知、ツールチップ、ナビゲーションなどの各UIコンポーネントやエフェクト等、アプリに必要そうなコンポーネントが...

軽量シンプルなオープンソースのUIキット・「Css-mint」

Css-mint Css-mintはWebアプリ構築の開発をサポートする為に開発されたUIキットです。Normalize.cssを元に作成、OOCSSに沿ったクリーンな設計を心がけているそう。class名は確かに直感で分かるようにされ...
Ads

Twitter公開の絵文字のtwemojiをFont Awesomeライクに使える・「Twemoji Awesome」

Twemoji Awesome Twemoji AwesomeはTwitterがOSSとして公開している絵文字、twemojiをFont Awesomeライクに使えるようにする為のプロジェクトです。カナダに在住されている日本の方(El...

CSSをショートハンドにしてくれるジェネレーター・「SHRTHND」

SHRTHND SHRTHNDはCSSをショートハンドにしてくれるジェネレーターです。ショートハンドにする事で軽量化、可読性の向上に繋がります。左カラムにコードを入力すれば右カラムにショートハンドにしたCSSショートハンドが出力されま...

小規模なプロジェクトのための軽量でミニマルなCSSフレームワーク・「Siimple」

Siimple Siimpleは軽量、ミニマルなレスポンシブWebデザイン対応のCSSフレームワークです。フロントエンド開発のキックスタートに貢献出来るように作成したそう。フォームやテーブル、アラート、ボタンやグリッドなど必要最低限の...

基本的な部分だけ抑えたモダンでミニマルなCSSリセット・「minireset.css」

minireset.css minireset.cssは基礎部分だけ抑えたモダンなCSSリセットです。各見出しのフォントサイズのリセット、ブロック要素のmargin、paddingリセット、全要素へのbox-sizingの導入、各メデ...

シンプルなカラーパレット管理ツール・「colorcubo」

colorcubo colorcuboはシンプルなカラーパレット管理ツールです。シンプルですが、欲しい機能は一通り揃っており、余計な機能を削いでいる印象でした。主な特徴は複数パレット作成、作成した各パレットのフォルダ分け、ユーザー登録...

PostCSSのプラグインを探せるカタログサイト・「PostCSS.parts」

PostCSS.parts PostCSS.partsはPostCSSのプラグインを探せるカタログサイトです。色関連やフォント、デバッグ、最適化、メディアクエリなど多様なカテゴリに分けられており、インスタンス検索でサクサク探すことが出...

Webサイトのテキストのスタイルを作成、CSSでダウンロードできる・「Type Nugget」

Type Nugget Type NuggetはWebサイトのテキストを直感的なUIでスタイル、CSSをダウンロードできるWebアプリです。見出しやパラグラフ、リスト、リンクなどのテキストスタイルを設定、CSSをジェネレートしてくれる...

カルーセルやアコーディオン、ドロップダウンメニューなどをCSSのみで実装するコードを集めた・「You Don’t Need JavaScript」

You Don't Need JavaScript See the Pen Without JavaScript Carousel by SitePoint (@SitePoint) on CodePen. You Don't Ne...

要素をシェイクさせるスタイルシート・「CSShake」

CSShake CSShakeは要素にシェイクするようなエフェクトを付与するスタイルシートです。小刻みに震えたり大きく揺れたり縦揺れ、横揺れなどいろいろ用意されていますが、これらのエフェクトをclassで管理しよう、というもの。多用す...

モバイルフレンドリーで軽量、シンプルなCSSフレームワーク・「Wing」

Wing Wingはモバイルフレンドリー且つ軽量シンプルなCSSフレームワークです。RWD対応で圧縮版4kbと軽量、グリッドやボタン、フォームやリストなどのUIが揃えられています。ライセンスはMIT。よくあるフレームワークですが、個人...

CSSアニメーションのループ間にdelayを挿入してくれるWebツール・「WAIT! Animate」

WAIT! Animate WAIT! Animateはkeyframesを使ったCSSアニメーションでループに待機時間を指定して挿入、CSSコードを吐き出してくれるWebサービスです。delayさせたい時間を入力すればパーセンテージ...

レスポンシブWebデザインにも対応のシンプルで軽量なCSSグリッドシステム・「Pills」

Pills PillsはRWD対応のシンプルで軽量なグリッドシステムです。4kbほどのファイルサイズでモバイルファーストな設計となっています。よくあるフレームワークのような.col-md-6といったclass名が分かりやすいとは思えな...

レスポンシブWedデザイン対応のシンプルで軽量なグリッドレイアウト・「Simple Grid」

Simple Grid Simple GridはRWD対応のCSSグリッドレイアウトです。シンプルで軽量、ネストにも対応しています。これといった機能はなく、シンプルさ、軽量さを重視していますので一から構築するフレームワークとは異なり、...

モダンでクリーンなレスポンシブWebデザイン対応のフレームワーク・「Spectre.css」

Spectre.css Spectre.cssはモダンでシンプル、クリーンなCSSフレームワークです。RWD対応で軽量、UIコンポーネントも充実しています。HTMLメールも用意されてるみたい。また、日本や中国、韓国といったアジアのフォ...

再利用も視野にいれたオブジェクト指向CSSフレームワーク・「RichCSS」

RichCSS RichCSSは再利用も視野に入れて設計されたオブジェクト指向のCSSフレームワークです。各コンポーネント毎にファイルを別にしているみたいですね。クリーンなCSS設計になるよう心がけて設計してあるそうです。隙を見て触っ...

シンプルさと軽量さを重視したFlexboxベースのCSSグリッドフレームワーク・「Grd」

Grd Grdはシンプルさと軽量さを重視したFlexboxベースのグリッドフレームワークです。単純にグリッドシステムの提供のみでUIの提供は一切ありません。圧縮版で512バイトとの事。グリッドシステムはよくあるUIフレームワークの一部...

メニュー等で利用されるハンバーガーアイコンから別のアイコンにアニメーションしながら変化させる為のCSS・「Hamburgers」

Hamburgers Hamburgersは、ハンバーガーアイコンから別のアイコンにシフトする際にアニメーションエフェクトを加える為のCSSです。スマフォ等のUIではおなじみのハンバーガーアイコンから矢印やxアイコンなどに変える際にア...

モバイルアプリ開発向けに構築されたBootstrapベースの軽量フレームワーク・「Mobility」

Mobility MobilityはモバイルWebアプリの為のJS/CSS/HTMLフレームワークです。Bootstrapベース(現在はVer.3)となっており、軽量さを売りにしているみたいです。基本的なUIもそれなりに揃えられており...

Bootstrapで使えるコードスニペットを集めている・「CodeLab」

CodeLab CodeLabはBootstrapで使えるコードスニペットを集めているWebサイトです。jQueryの情報を配信するjqueryRainというWebサイトで作っているコンテンツのようです。スニペットは動作デモも用意され...
Ads