SASSで構築された軽量なフロントエンド開発フレームワーク・「Penguin」
Penguin PenguinはSASSで構築されたフロントエンド開発の為の軽量スターターキットです。OSSとして公開されています。必要最低限のコンポーネントも揃えられており、RequireJS併用でモジュールの管理も可能との事。個人...
Resource - CSS/HTML
Foudationをマテリアルデザインに対応させた・「Material Foundation」
Material Foundation Material Foundationは人気のCSSフレームワーク・Foudationをマテリアルデザインに対応させたCSS/JSのセットです。日本ではBootstrapほど馴染んでいない印象で...
HTMLをmarkdown記法で書いたようなスタイルにするCSS・「i-love-markdown.css」
i-love-markdown.css i-love-markdown.cssはHTMLをmarkdown記法で書いたようなスタイルにするCSSです。上図はh1やtableタグで書いていますが、このようにmarkdown記法に見せるC...
HTML5ベースのノベルゲームを実装出来る国産ゲームエンジン・「O₂ Engine」
O₂ Engine O₂ EngineはHTML5ベースのノベルゲームエンジンです。HTML5なのでブラウザはまだ選ぶものの、デバイスを気にせず作れるのは素敵ですね。本ゲームエンジン開発者が提供するノベルゲームサービスのノベルスフィア...
CSSのみで作られたローディングアニメーションのセット・「Loaders.css」
Loaders.css Loaders.cssはCSSのみで作られたローディングアイコンのセットです。CSSで作られているのでスタイルの変更やスピード調整もしやすく、軽量で済む反面、対応ブラウザも限られるので現状ではスマフォ向けになり...
セマンティックなフロントエンドフレームワーク・「mice」
mice miceはセマンティックなフロントエンド開発の為のRails製フレームワークです。設計も複雑な箇所はなく、主要なUIコンポーネントもひと通り揃えられている印象でした。アイコンはお馴染みのFont Awesomeが使われていま...
アニメーションエフェクトのパターンと、その実装コードをコレクションしている・「AniCollection」
AniCollection AniCollectionはよく見かけるアニメーションエフェクトと、そのエフェクトを実装する為のコードをコレクションしているWebサイトです。各エレメントにマウスホバーするとエフェクトを見ることが出来ます。...
OSSで公開されたGitHub製のCSSフレームワークとガイドライン・「Primer」
Primer PrimerはGithubが公開したオープンソースのCSSフレームワークです。主要な各コンポーネントのスタイルに加えて、Githubにて使用されているスタイルガイドも同梱されています。ビルドにはSCSS、Jekyll、G...
SVG製の国旗を手軽に表示出来る・「SassyFlags」
SassyFlags SassyFlagsはSVGで作られた各国の国旗を手軽に表示出来るライブラリです。空要素に指定されたclassを振るだけで国旗を表示する事が出来ます。SVGが使われていますので調整もしやすいですね。国旗はAmaz...
BootstrapよりもミニマルなCSSフレームワークを目指した・「SkyBlue CSS Framework」
SkyBlue CSS Framework SkyBlue CSS Frameworkは当初より肥大化したBootstrapに疑問を感じ、もう少しライトに使える事を目指したミニマルなCSSフレームワークです。必要最低限なコンポーネント...
CSSとテキストで作るローディングアニメーション・「Animated Type Loader」
Animated Type Loader Animated Type Loaderはテキストで作られたローディングを実装する為のCSSです。keyframesと:nth-of-typeを使ってspanでラップしたテキストを順番に表示さ...
フレキシブルでパワフルなRWD対応のSCSS/CSSフレームワーク・「BLACKHOLE」
BLACKHOLE BLACKHOLEは柔軟性とカスタマイズ性を重視したレスポンシブWebデザイン対応のSCSS/CSSフレームワークです。モジュール型で基本的には軽量なサイズを保てるように設計しているそうです。コンポーネントもひと通...
シングルページ向けに開発されたHTML＆SASSなボイラープレート・「Rin」
Rin Rinはシングルページ向けに開発されたHTML/CSSフレームワークです。ランディングページや名刺サイトのような、所謂ペラサイトの構築と相性良さそうです。英語で書かれてますが開発者さんは日本の方(SANOGRAPHIX.NET...
Googleマテリアルデザインを導入したCSS/JSフレームワーク・「MUI」
MUI MUIはGoogleマテリアルデザインのガイドラインに沿ってデザインされたCSS/JavaScriptフレームワークです。基本的なコンポーネントも揃っていて直ぐに開発を始めることが出来ます。また、ReactJSやWeb Com...
軽量でベーシックなCSSフレームワーク・「Open Style」
Open Style Open Styleは軽量でベーシックなタイプのCSSフレームワークです。normalize.cssを併用するみたいですね。SASS対応でグリッドシステム、エレメントのポジションサポート、背景への動画導入などが主...
別アイコンにアニメーション付きで切り替える方法をまとめている・「MENU TO CROSS ICON」
MENU TO CROSS ICON MENU TO CROSS ICONは別アイコンにアニメーションエフェクト付きで切り替える方法を紹介しているWebサイトです。SVGやアイコンフォント、ユニコードと、CSS3やJavaScript...
SASSベースのRWD対応CSSフレームワーク・「SPACEBASE」
SPACEBASE SPACEBASEはSASSベースのレスポンシブWebデザイン対応CSSフレームワークです。最低限必要なUIコンポーネントは用意されており、オールドブラウザにも対応しているとの事。しっかり触ってないので何とも言えま...
モバイルファーストで軽量なRWD対応CSSフレームワーク・「TACHYONS」
TACHYONS TACHYONSはモバイルファーストなCSSフレームワークです。モバイル優先のレスポンシブWebデザイン対応サイト向けに開発されており、サイズも軽量になるよう配慮されています。あらゆるデバイスで可能な限りのパフォーマ...
Googleマテリアルデザインを取り入れたAngularJSベースのRWD対応フロントエンドフレームワーク・「lumX」
lumX lumXはAngularJSベースのフロントエンドフレームワークです。スタイルにGoogleマテリアルデザインを取り入れており、レスポンシブWebデザインにも対応しています。より速く、簡単にWebアプリケーションを設計するサ...
AngularJS用のUIフレームワーク・「Suave UI」
Suave UI Suave UIはAngularJS向けに作られたUIフレームワークです。AngularJSベースのWebアプリ開発の際にUI構築をサポートする為に作られたフレームワークみたいですね。各コンポーネントはFont Aw...
CSSのみで作られたシンプルなアイコンセット・「ICONO」
ICONO ICONOはCSSのみで作られたシンプルなアイコンのセットです。CSS3や擬似クラスを用いて形成されており、エレメントにclassを振るだけでアイコンを表示できるようになっています。SVGもフォントも利用せずに作ったよ！と...
CSS3による様々なマウスホバーアニメーションをまとめたスタイルシート・「Hover.css」
Hover.css Hover.cssはCSS3による様々なホバーアニメーションエフェクトをまとめたスタイルシートです。SASSとLESSにも対応。エレメントやアイコンなどにマウスホバーアニメーションが付けられており、classを振る...