Meteor + Vue.jsのマテリアルデザインUIフレームワーク・「viu」
viu viuはMeteor + Vue.jsのUIフレームワークです。マテリアルデザインに基づいたスタイルとなっています。モバイルファーストで各コンポーネントが用意されています。詳細が書かれてないので今後の事等は分かりませんが、ライ...
Resource - CSS3
flexboxを使った、シンプル軽量なグリッドシステム・「Waffle grid」
Waffle grid Waffle gridはflexboxを使った、シンプル軽量なグリッドシステムです。7kbほどのスタイルシートでレスポンシブ、カスタマイズ性も考慮された設計との事です。ありがちなclassなのでフレームワーク的...
使用してないCSSを解析して削除、使用中のものだけ残してくれる・「UnCSS」
UnCSS UnCSSはCSSををパースして使用してないスタイルを削除、使用中のものだけ残してくれるツールです。OSSとしてもソースコードが公開されています。この手のは先発のツールがありますので好みで。複数Webページにまたがってパー...
データやイベントを簡易的に可視化するタイムシート作成ライブラリ・「timesheet.js」
timesheet.js timesheet.jsはデータやイベントを簡易的に可視化するタイムシート作成ライブラリです。ライブラリを読み込んでデータを書くだけで上デモのような簡易的なタイムシートを作成出来ます。データ入力も簡単なので扱...
軽量でレスポンシブ、スタイルも選べるナビゲーションメニューのスタイルシート・「LUXBAR」
LUXBAR LUXBARは羽のように軽量なレスポンシブWebデザイン対応のナビゲーションメニュー用スタイルシートです。カラースタイルもいくつか選べます。これで非圧縮で8kbほどなので確かに軽量な設計ですね。また、ナビゲーションを固定...
美しいグラデーションを大量に収集、CSSをコピーできる・「WebGradients」
WebGradients WebGradientsは美しいグラデーションを大量に収集しているWebサイトです。CSSをコピーできたりPNGでダウンロード出来る他、SketchファイルやPSDも配布してくれています。特にカテゴリで分けて...
任意の要素に表示/非表示時のアニメーションエフェクトを付与出来るスタイルシート・「tuesday」
tuesday tuesdayは任意の要素にアニメーションエフェクトを手軽に付与出来るスタイルシートです。上デモのように、CSSによるアニメーションエフェクトを、classを与えるだけでアニメーションによる表示、非表示が出来るようにな...
フルスクリーン動画からスムーズにスマフォのモックアップに移行するイントロテンプレート・「Immersive Video Template」
Immersive Video Template Immersive Video Templateはcodyhouseで紹介された、動画を使ったWebサイトのイントロのサンプルです。フルスクリーン動画で始まり、スムーズにスマフォのモッ...
Webページとして公開もできるjsfiddleライクなコードテストツール・「PLAYCODE」
PLAYCODE PLAYCODEはWebページとして公開もできるjsfiddleライクなコードテストツールです。jsfiddleのようにHTML、CSS、JavaScriptをブラウザで動作テストできる、というツールですが、本ツール...
いろいろなスタイルのボタンを実装出来るスタイルシート・「bttn.css」
bttn.css bttn.cssはいろいろなスタイルのボタンを実装出来るスタイルシートです。種類はそこまで多くないですが、それぞれのボタンは最小、小、中、大の太さが用意されており、ブロック要素/インライン要素、5色のカラーが用意され...
CSSで作る様々なメニューを大量にまとめた・「110 CSS Menu」
110 CSS Menu 110 CSS MenuはCSS（と、少しのJavaScript）で作るメニューを大量にまとめたWebページです。110個あるかは明記されてないし数えてもないので分かりませんが、読み込みがやたら重いので結構な...
シンプルで非依存、軽量なカルーセルスクリプト・「Siema」
Siema See the Pen Siema - nested carousels by kachibito (@kachibito) on CodePen. Siemaはシンプルで軽量、非依存型のカルーセルを実装するスクリプトで...
複雑なCSSアニメーションを処理する為のシンプルなスクリプト・「Choreographer.js」
Choreographer.js Choreographer.jsは複雑なCSSアニメーションを設定、処理する為のシンプルなスクリプトです。アニメーションを定義すると、指定した要素にインラインCSSが付与、DOMイベントを介して実行、...
任意の画像にCSSのfilterとblend modeを設定した状態を表示、コードを出してくれる・「CSS filter and blend mode Generator」
CSS filter and blend mode Generator CSS filter and blend mode Generatorは任意の画像にフィルターやブレンドモードを書けた状態を確認、コードを提出してくれるWebツー...
CSSで出来る画像エフェクトをまとめた・「Image Effects with CSS」
Image Effects with CSS Image Effects with CSSはCSSのみで出来る画像へのエフェクト効果を実装するコードをまとめているWebサイトです。主にブレンドモードやフィルターを使ったエフェクトを紹介...
HTML要素1つで、やや複雑な動きが出来るCSSスピナー・「CSSPIN」
CSSPIN CSSPINは1つの要素で、上のようなそこそこ複雑な動きが作れる、CSSのみで作れるスピナーです。それぞれの動きはそれぞれCSSファイルが用意されているので必要な動きのファイルだけ読み込めば使えます。なかなか使いやすそう...
使いやすさを意識したReactのWeb用UIコンポーネントのコレクション・「Blueprint」
Blueprint BlueprintはReactのWeb用UIコンポーネントをコレクションにして提供してくれるUIツールキットです。使いやすさを特に意識して構築したそう。汎用的なUIは一通り揃っている印象です。ドキュメントページに動...
Vue.jsベースのWebアプリケーション向けのマテリアルデザインフレームワーク・「Vue Material」
Vue Material Vue MaterialはVue.jsベースで作られたWebアプリケーションをマテリアルデザインに対応させるためのフレームワークです。コンポーネントやUIは再利用できるように意識して設計したそう。コンポーネン...
CSSで作るベーシックなローダーのセット・「CSS loader」
CSS loader CSS loaderはCSSのみで作れるベーシックなローダーを簡単に設定できるスタイルシートです。画像でよく見かけるエレメントをCSSで作った、みたいなもの。他に、少し凝ったものもあります。ここ最近はCSSのみで...
CSSのみで出来たシンプルで実用的なアイコン集・「CSS ICON」
CSS ICON CSS ICONはCSSのみで出来たアイコン集です。それぞれのアイコンは上図のようにコードが紹介されており、各部位がハイライトされるようになっていて仕組みをわかりやすくしてくれています。スマフォの普及やオールドブラウ...
レスポンシブなオーバーレイメニュー構築のためのフレームワーク・「responsive-overlay-menu」
responsive-overlay-menu See the Pen Responsive overlay menu - full menu with second menu example by Mario Loncarek (@ri...
CSSアニメーションの遅延をコントロールする為のシンプルなフレームワーク・「Shift.css」
Shift.css Shift.cssはCSSアニメーションの遅延で要素をコントロールするフレームワークです。上記サンプルのように要素にかかるアニメーションを遅延させてコンテンツの構築をサポートしよう、というもの。CSSとほんの少...