Resource - CSS/HTML

CSSのみで作られたシンプルなアイコンセット・「ICONO」

ICONO ICONOはCSSのみで作られたシンプルなアイコンのセットです。CSS3や擬似クラスを用いて形成されており、エレメントにclassを振るだけでアイコンを表示できるようになっています。SVGもフォントも利用せずに作ったよ!と...

CSS3による様々なマウスホバーアニメーションをまとめたスタイルシート・「Hover.css」

Hover.css Hover.cssはCSS3による様々なホバーアニメーションエフェクトをまとめたスタイルシートです。SASSとLESSにも対応。エレメントやアイコンなどにマウスホバーアニメーションが付けられており、classを振る...

CSSのみで作られたスマフォ向けのカレンダーアプリデザイン・「CSS-only Calendar App Concept」

CSS-only Calendar App Concept CSS-only Calendar App ConceptはCSSのみで作られたスマフォ向けのカレンダーアプリ用のスタイルです。日付の選択からカラー変更までをCSSのみで作れ...
Ads

シンプルでミニマル設計なRWD対応の軽量CSSフレームワーク・「MNML」

MNML MNMLはシンプルでミニマルな設計のCSSフレームワークです。SASS、レスポンシブWebデザイン対応で2kbほどの軽量なものとなっています。悪く言えば特徴が有りませんが、特徴は自分の手で付加していきたい、という方には重宝さ...

SVGで書かれたローディングアイコン集・「SVG Loaders」

SVG Loaders SVG LoadersはSVGで書かれたローディングアニメーションアイコンのセットです。どれもシンプルで使いやすそうです。早くブラウザのサポートが息とど置いて主流になるといいですねー。Githubにてソースが公...

ビジネス用Webアプリ構築の為のCSSフレームワーク・「Flakes」

Flakes Flakesはビジネス用のWebアプリ構築の為に公開されたCSS/JavaScriptフレームワークです。RWDやSASSにも対応済み。ダッシュボードに必要なUIやチェックボックス、フィルタ機能付きのテーブルなどのコンポ...

マテリアルデザインを取り入れたレスポンシブWebデザイン対応のCSSフレームワーク・「Materialize」

Materialize Materializeはマテリアルデザインを取り入れたRWD対応のCSSをフレームワークです。Sass対応で、各種コンポーネントも揃っていました。ベーシックで良いんじゃないでしょうか。ライセンスはMITとの事。...

シンプルで軽量なモバイルファーストのCSSフレームワーク・「Furtive」

Furtive Furtiveはシンプルで軽量なモバイルファーストのCSSフレームワークです。2.5KBという軽さながら、必要最低限のスタイルを保っています。これは個人的に好きかも。ライセンスはMITとの事。 Furtive

CSS3+HTML5のアニメーションを作成出来るOSSのエディタ・「Mixeek」

Mixeek MixeekはCSS3やHTML5を利用したアニメーションコンテンツを作成する為のエディタです。ブラウザで動くツールになります。MITライセンスの元、オープンソースとして公開されています。便利っちゃ便利ですが個人的にはも...

マテリアルデザインのUIコンポーネントを構築する為のCSSフレームワーク・「material ui」

material ui material uiはGoogleの提唱したマテリアルデザインを導入したCSSフレームワークです。各UIコンポーネントも用意されています。Reactとセットになっているみたい。まだよく調べていませんがなかなか...

CSSのみで作れるシンプルなチャート・「cssplot」

cssplot cssplotはシンプルなチャートを作る為のCSSです。指定されたカスタムデータ属性に値をいれると、その数値にあった長さでグラフを描けます。仕組みは単純に、1%毎にCSSを書いているだけなので小数点には非対応です。これ...

CSSフレームワーク・Foundation5のチートシート・「Foundation CheatSheet」

Foundation CheatSheet Foundation CheatSheetはzurb製のRWD対応CSSフレームワークFoundation Ver.5のチートシートです。とても簡潔に、わかりやすく纏められています。実装例も...

ドラッグ&ドロップにも対応のBootstrap向けWYSIWYGエディタ・「Azexo-Composer-WYSIWYG」

Azexo-Composer-WYSIWYG Azexo-Composer-WYSIWYGはD&Dによるコンテンツの配置変更等も可能なBootstrap向けのWYSIWYGエディタです。jQueryに依存しています。JSの動作やCSS...

BootstrapベースのUIキットをPSDとHTMLで配布する・「Drunken Parrot」

Drunken Parrot Drunken ParrotはBootstrapベースのフラットなUIキットを配布するOSSです。この手のものでは珍しくPSDとHTMLの両方を用意してくれています。ライセンスはCCとMITとの事です。動...

1KB以下でオールドブラウザにも対応した軽量CSSフレームワーク・「Min」

Min Minは1KB以下で構成された軽量なCSSフレームワークです。(※圧縮した状態のサイズとなります)IE5.5などのオールドブラウザにも対応しているとの事・・・ですが、確認する術が自分には無いので未検証です。Bootstrapの...

シンプルで軽量なHTML5/CSS3フレームワーク・「Picnic CSS」

Picnic CSS Picnic CSSはシンプルで軽量なHTML5/CSS3のフレームワークです。RWDにも対応しています。まださほど見ていませんが、Hacker Newsでの議論で興味わいたのでメモ的に。今すぐでなくても将来的に...

最低限のものだけを用意したシンプルなフロントエンド開発向けフレームワーク・「BareKit」

BareKit BareKitは最低限のものだけを用意したシンプルなフロントエンド開発フレームワークです。開発の起点として利用されることを想定して作られたみたいですね。似たようなものはあるのでお好みで。ライセンスはMITとGPLのデュ...

AngularJSとBootstrapを使ったシンプルなRWD対応のダッシュボードのテンプレート・「Responsive Dashboard」

Responsive Dashboard Responsive DashboardはAngularJSとBootstrapを使ったシンプルなデザインの管理画面のテンプレートです。レスポンシブWebデザインに対応しています。WordPr...

オープンソースのRWDなHTMLメール用テンプレート集・「Open Source Email Templates」

Open Source Email Templates Open Source Email TemplatesはOSSとして配布されているレスポンシブWebデザイン対応のHTMLメールテンプレートです。何種かのデザインが用意されており...

Bootstrap向けのテーマやUIコンポーネントをまとめた・「PrepBootstrap」

PrepBootstrap PrepBootstrapはBootstrap向けのテーマや少し特殊なUIコンポーネントをまとめているWebサイトです。UIは不動産サイト向けのちずのリストのレイアウトやECサイトの商品紹介のレイアウト、ロ...

SVGによるパターンを背景として使える・「PatternBolt」

PatternBolt PatternBoltはSVGによるパターンを背景に使えるCSSです。画像はdataスキームが使われています。適応したい要素に用意されたパターンのclassを振って:after擬似要素でサイズを指定するだけ。S...

SASSベースの軽量なフロントエンド開発フレームワーク・「Concise.CSS」

Concise.CSS Concise.CSSは軽量なフロントエンド開発フレームワークです。SASSをベースに、オブジェクト指向CSSの原則に基づいて設計しているとの事。オールドブラウザに対応させる場合はModernizrやRespo...
Ads