FlexboxベースのシンプルなCSSフレームワーク・「useful.ly」 useful.ly useful.lyはFlexboxベースのシンプルなCSSフレームワーク。グリッドやモーダルウィンドウ、ボタンやフォームのスタイルを提供してくれています。まで開発中でこれから頑張る!CDNも用意したから試しに触って...2016.11.02
WebアプリのためのシンプルでフレキシブルなUIフレームワーク・「Agile CSS」 Agile CSS Agile CSSはWebアプリケーションのためのフレキシブルなUIフレームワークです。タブやテーブル、通知、ツールチップ、ナビゲーションなどの各UIコンポーネントやエフェクト等、アプリに必要そうなコンポーネントが...2016.10.14
軽量シンプルなオープンソースのUIキット・「Css-mint」 Css-mint Css-mintはWebアプリ構築の開発をサポートする為に開発されたUIキットです。Normalize.cssを元に作成、OOCSSに沿ったクリーンな設計を心がけているそう。class名は確かに直感で分かるようにされ...2016.09.15
Twitter公開の絵文字のtwemojiをFont Awesomeライクに使える・「Twemoji Awesome」 Twemoji Awesome Twemoji AwesomeはTwitterがOSSとして公開している絵文字、twemojiをFont Awesomeライクに使えるようにする為のプロジェクトです。カナダに在住されている日本の方(El...2016.09.07
CSSをショートハンドにしてくれるジェネレーター・「SHRTHND」 SHRTHND SHRTHNDはCSSをショートハンドにしてくれるジェネレーターです。ショートハンドにする事で軽量化、可読性の向上に繋がります。左カラムにコードを入力すれば右カラムにショートハンドにしたCSSショートハンドが出力されま...2016.09.03
小規模なプロジェクトのための軽量でミニマルなCSSフレームワーク・「Siimple」 Siimple Siimpleは軽量、ミニマルなレスポンシブWebデザイン対応のCSSフレームワークです。フロントエンド開発のキックスタートに貢献出来るように作成したそう。フォームやテーブル、アラート、ボタンやグリッドなど必要最低限の...2016.08.31
基本的な部分だけ抑えたモダンでミニマルなCSSリセット・「minireset.css」 minireset.css minireset.cssは基礎部分だけ抑えたモダンなCSSリセットです。各見出しのフォントサイズのリセット、ブロック要素のmargin、paddingリセット、全要素へのbox-sizingの導入、各メデ...2016.08.29
シンプルなカラーパレット管理ツール・「colorcubo」 colorcubo colorcuboはシンプルなカラーパレット管理ツールです。シンプルですが、欲しい機能は一通り揃っており、余計な機能を削いでいる印象でした。主な特徴は複数パレット作成、作成した各パレットのフォルダ分け、ユーザー登録...2016.08.24
PostCSSのプラグインを探せるカタログサイト・「PostCSS.parts」 PostCSS.parts PostCSS.partsはPostCSSのプラグインを探せるカタログサイトです。色関連やフォント、デバッグ、最適化、メディアクエリなど多様なカテゴリに分けられており、インスタンス検索でサクサク探すことが出...2016.07.23
Webサイトのテキストのスタイルを作成、CSSでダウンロードできる・「Type Nugget」 Type Nugget Type NuggetはWebサイトのテキストを直感的なUIでスタイル、CSSをダウンロードできるWebアプリです。見出しやパラグラフ、リスト、リンクなどのテキストスタイルを設定、CSSをジェネレートしてくれる...2016.07.15
カルーセルやアコーディオン、ドロップダウンメニューなどを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...2016.07.10
要素をシェイクさせるスタイルシート・「CSShake」 CSShake CSShakeは要素にシェイクするようなエフェクトを付与するスタイルシートです。小刻みに震えたり大きく揺れたり縦揺れ、横揺れなどいろいろ用意されていますが、これらのエフェクトをclassで管理しよう、というもの。多用す...2016.07.09
モバイルフレンドリーで軽量、シンプルなCSSフレームワーク・「Wing」 Wing Wingはモバイルフレンドリー且つ軽量シンプルなCSSフレームワークです。RWD対応で圧縮版4kbと軽量、グリッドやボタン、フォームやリストなどのUIが揃えられています。ライセンスはMIT。よくあるフレームワークですが、個人...2016.06.15
CSSアニメーションのループ間にdelayを挿入してくれるWebツール・「WAIT! Animate」 WAIT! Animate WAIT! Animateはkeyframesを使ったCSSアニメーションでループに待機時間を指定して挿入、CSSコードを吐き出してくれるWebサービスです。delayさせたい時間を入力すればパーセンテージ...2016.06.07
レスポンシブWebデザインにも対応のシンプルで軽量なCSSグリッドシステム・「Pills」 Pills PillsはRWD対応のシンプルで軽量なグリッドシステムです。4kbほどのファイルサイズでモバイルファーストな設計となっています。よくあるフレームワークのような.col-md-6といったclass名が分かりやすいとは思えな...2016.06.06
レスポンシブWedデザイン対応のシンプルで軽量なグリッドレイアウト・「Simple Grid」 Simple Grid Simple GridはRWD対応のCSSグリッドレイアウトです。シンプルで軽量、ネストにも対応しています。これといった機能はなく、シンプルさ、軽量さを重視していますので一から構築するフレームワークとは異なり、...2016.05.15
モダンでクリーンなレスポンシブWebデザイン対応のフレームワーク・「Spectre.css」 Spectre.css Spectre.cssはモダンでシンプル、クリーンなCSSフレームワークです。RWD対応で軽量、UIコンポーネントも充実しています。HTMLメールも用意されてるみたい。また、日本や中国、韓国といったアジアのフォ...2016.04.17
再利用も視野にいれたオブジェクト指向CSSフレームワーク・「RichCSS」 RichCSS RichCSSは再利用も視野に入れて設計されたオブジェクト指向のCSSフレームワークです。各コンポーネント毎にファイルを別にしているみたいですね。クリーンなCSS設計になるよう心がけて設計してあるそうです。隙を見て触っ...2016.04.02
シンプルさと軽量さを重視したFlexboxベースのCSSグリッドフレームワーク・「Grd」 Grd Grdはシンプルさと軽量さを重視したFlexboxベースのグリッドフレームワークです。単純にグリッドシステムの提供のみでUIの提供は一切ありません。圧縮版で512バイトとの事。グリッドシステムはよくあるUIフレームワークの一部...2016.03.17
メニュー等で利用されるハンバーガーアイコンから別のアイコンにアニメーションしながら変化させる為のCSS・「Hamburgers」 Hamburgers Hamburgersは、ハンバーガーアイコンから別のアイコンにシフトする際にアニメーションエフェクトを加える為のCSSです。スマフォ等のUIではおなじみのハンバーガーアイコンから矢印やxアイコンなどに変える際にア...2016.03.04
モバイルアプリ開発向けに構築されたBootstrapベースの軽量フレームワーク・「Mobility」 Mobility MobilityはモバイルWebアプリの為のJS/CSS/HTMLフレームワークです。Bootstrapベース(現在はVer.3)となっており、軽量さを売りにしているみたいです。基本的なUIもそれなりに揃えられており...2016.02.29
Bootstrapで使えるコードスニペットを集めている・「CodeLab」 CodeLab CodeLabはBootstrapで使えるコードスニペットを集めているWebサイトです。jQueryの情報を配信するjqueryRainというWebサイトで作っているコンテンツのようです。スニペットは動作デモも用意され...2016.02.26