Resource - フレームワーク

沢山のコンポーネントを兼ね備えたOSSのBootstrap 4テンプレート・「Argon Design System」

Argon Design System Argon Design Systemはたくさんのコンポーネントを備えたオープンソースのBootstrap 4テンプレートです。開発スピードをサポートするのが目的との事でデザインは概ね完成されて...

シンプルなビジュアルで確認できるCSS Grid用のチートシート・「GRID」

GRID GRIDはCSS Grid用のチートシートです。シンプルなビジュアルもあるので、より分かりやすい印象で理解も早まりそうですね。各コードはクリックだけでコピーできます。Gridやflexboxは覚えることが多いので不慣れなうち...

Webサイトへの訪問時にCookieに関するメッセージをポップアップで明示できるスクリプト・「ihavecookies」

ihavecookies ihavecookiesはWebサイトへの訪問時にCookieに関するメッセージをポップアップで明示できるスクリプトです。jQueryに依存しています。動作サンプルでは同意後30日の間はCookie削除しない...
Ads

インタラクティブに動作し、様々なタイプのチャートに対応できるOSSのチャートライブラリ・「apexcharts.js」

apexcharts.js See the Pen TimeSeries Demo by kachibito (@kachibito) on CodePen. apexcharts.jsはインタラクティブに動作する、様々なチャートに...

軽量で多機能なモダンCSSフレームワーク・「Teutonic CSS」

Teutonic CSS Teutonic CSSは軽量で多機能なCSSフレームワークです。CSSグリッドやFlesboxに基づいたレイアウトはもちろん、各コンポーネントの提供や豊富なタイポグラフィ、CSS変数の導入によるカスタマイズ...

スタッキング出来るモーダルウィンドウ実装スクリプト・「Popbox.js」

Popbox.js Popbox.jsはポップアップをスタッキングできるモーダルウィンドウスクリプトです。表示されたモーダルウィンドウからさらに子ウィンドウを表示できる、というもの。依存性もなく単体で動作、サイズも軽量です。入れ子に出...

シンプルで使いやすいCSSアニメーションライブラリ・「Hexa」

Hexa Hexaはシンプルで使いやすいCSSによるアニメーションライブラリです。要素に指定のclassを付与するだけでアニメーションを与える事が出来ます。classはhexaを基本に、jumpやrotateなど、分かりやすいキーワー...

SVG製の小規模なチャートを描けるライブラリ・「Dailychart.js」

Dailychart.js Dailychart.jsはSVGにで描ける小規模なチャートライブラリです。主に株価チャートの実装を目的に作られているようです。データは直接カスタムデータ属性に入力して実装する形となります。クセもなく扱...

CSSグラデーションのサンプルを公開しているWebサイトをまとめた・「gradient-backgrounds」

gradient-backgrounds gradient-backgroundsはCSSのグラデーションの様々なサンプルを紹介する複数のWebサイトのハブページです。UigradientsやGrabient、Gradient hun...

シンプルな設計の軽量なFlexboxベースCSSフレームワーク・「Flexit」

Flexit Flexitはシンプルな設計の軽量CSSフレームワークです。Flexboxベースとなっています。row、two、columnなど、そのままで意味が通じる命名規則を採用しています。flexboxの為のユーティリティクラ...

HTML/CSS/JavaScriptで作られた時計のみを収集している・「Clock Shop」

Clock Shop Clock ShopはHTML、CSS、JavaScriptだけでブラウザで動作する様々な時計を収集しているプロジェクトサイトです。Codepenで公開されている時計コンテンツだけを収集、公開しているみたいです。...

モダンなデザインのBoostrapベースのOSSな管理画面テンプレート・「Shards Dashboard Lite」

Shards Dashboard Lite Shards Dashboard Liteはモダンなデザインの管理画面テンプレートです。OSSで公開されており、Bootstrapをベースに構築されています。以前ご紹介したUIキットのSha...

ソートや内容の編集等が可能なシンプルなデータテーブル実装ライブラリ・「Frappe DataTable」

Frappe DataTable Frappe DataTableはシンプルながらパワフルなデータテーブル実装ライブラリです。列でのソートやセル内の内容の編集、カラムのリサイズ等が可能となっています。上サンプルでは変更していません...

データをグラフ等に可視化出来るオープンソースのスクリプト・「picasso.js」

picasso.js picasso.jsはデータビジュアライゼーションの為のスクリプトです。OSSとして公開されています。様々なグラフにも対応しており、プラグインによる拡張も可能との事。使い方も割と優しい印象でした。可もなく不可もな...

カスタマイズ可能な疑似的なスクロールバーを実装するスクリプト・「fakeScroll」

fakeScroll fakeScrollはカスタマイズ可能なスクロールバーを実装する為のスクリプトです。::-webkit-scrollbarのようにスクロールバーの見た目をカスタマイズし、各ブラウザで統一する為に疑似的にHTML要...

なるべく強固なパスワードを入力して貰う為のフォームのサンプル

Better Password Form See the Pen Better Password Form by kachibito (@kachibito) on CodePen. Codepenでパスワード設定の際のフォーム...

3つのドットで作れるCSSローディングアイコンをまとめた・「Three Dots」

Three Dots Three Dotsは3つのドットで作れるCSSのローダーをまとめたプロジェクトです。それぞれbeforeとafterを使って作られているので1つの空要素と指定のclassを与えるだけで実装出来ます。色やサイズの...

60という数値を中心に設計された実験的なCSSグリッドシステム・「60GS」

60GS 60GSは60と言う数値を元にCSS Gridベースで設計された軽量なCSSグリッドシステムです。CSS Gridベースで、基本的には以下の1classのみを必須としています。 60列用意したのは、60が2、3、4...

スクロールに応じてCSS keyframesライクな書き方でアニメーションを付与できる・「Motus」

Motus Motusはスクロールに応じて任意の要素にアニメーションを付与する為のライブラリです。非依存なので単体で使えます。アニメーションはCSS keyframesライクな書き方ができますのでCSSの知識がある方なら扱いやすいと思...

ミニマルなflexboxベースのCSSグリッドシステム・「Katana」

Katana KatanaはミニマルなflexboxベースのCSSグリッドシステムです。calcを使用して軽量化を実現しているみたいです。非圧縮でも1kbほど、.scssなら20行ほどです。clac便利ですねぇ。ライセンスはMITです...

非依存で使いやすいカラーピッカー実装スクリプト・「Flat color picker」

Flat color picker Flat color pickerは他スクリプトに依存せず使えるシンプルでフラットなカラーピッカーです。排出されるコードも3種あり、透過にも対応しています。また、タッチデバイスもサポート。ライセンス...

すっきり見やすいスタイルのBootstrapベースなオープンソースの管理画面テンプレート・「Sing App」

Sing App Sing AppはBootstrapをベースとしたオープンソースの管理画面テンプレートです。すっきりとしていて見やすい印象でした。基本的なコンポーネントは揃えられており、すぐに管理画面として機能してくれるみたいです。...
Ads