沢山のコンポーネントを兼ね備えたOSSのBootstrap 4テンプレート・「Argon Design System」 Argon Design System Argon Design Systemはたくさんのコンポーネントを備えたオープンソースのBootstrap 4テンプレートです。開発スピードをサポートするのが目的との事でデザインは概ね完成されて...2018.08.14 | 10時06分01秒
シンプルなビジュアルで確認できるCSS Grid用のチートシート・「GRID」 GRID GRIDはCSS Grid用のチートシートです。シンプルなビジュアルもあるので、より分かりやすい印象で理解も早まりそうですね。各コードはクリックだけでコピーできます。Gridやflexboxは覚えることが多いので不慣れなうち...2018.08.11 | 10時10分17秒
Webサイトへの訪問時にCookieに関するメッセージをポップアップで明示できるスクリプト・「ihavecookies」 ihavecookies ihavecookiesはWebサイトへの訪問時にCookieに関するメッセージをポップアップで明示できるスクリプトです。jQueryに依存しています。動作サンプルでは同意後30日の間はCookie削除しない...2018.08.05 | 9時54分53秒
インタラクティブに動作し、様々なタイプのチャートに対応できるOSSのチャートライブラリ・「apexcharts.js」 apexcharts.js See the Pen TimeSeries Demo by kachibito (@kachibito) on CodePen. apexcharts.jsはインタラクティブに動作する、様々なチャートに...2018.07.30 | 9時59分14秒
軽量で多機能なモダンCSSフレームワーク・「Teutonic CSS」 Teutonic CSS Teutonic CSSは軽量で多機能なCSSフレームワークです。CSSグリッドやFlesboxに基づいたレイアウトはもちろん、各コンポーネントの提供や豊富なタイポグラフィ、CSS変数の導入によるカスタマイズ...2018.07.27 | 10時02分55秒
スタッキング出来るモーダルウィンドウ実装スクリプト・「Popbox.js」 Popbox.js Popbox.jsはポップアップをスタッキングできるモーダルウィンドウスクリプトです。表示されたモーダルウィンドウからさらに子ウィンドウを表示できる、というもの。依存性もなく単体で動作、サイズも軽量です。入れ子に出...2018.07.23 | 10時14分22秒
シンプルで使いやすいCSSアニメーションライブラリ・「Hexa」 Hexa Hexaはシンプルで使いやすいCSSによるアニメーションライブラリです。要素に指定のclassを付与するだけでアニメーションを与える事が出来ます。classはhexaを基本に、jumpやrotateなど、分かりやすいキーワー...2018.07.22 | 9時51分14秒
SVG製の小規模なチャートを描けるライブラリ・「Dailychart.js」 Dailychart.js Dailychart.jsはSVGにで描ける小規模なチャートライブラリです。主に株価チャートの実装を目的に作られているようです。データは直接カスタムデータ属性に入力して実装する形となります。クセもなく扱...2018.07.20 | 10時33分38秒
CSSグラデーションのサンプルを公開しているWebサイトをまとめた・「gradient-backgrounds」 gradient-backgrounds gradient-backgroundsはCSSのグラデーションの様々なサンプルを紹介する複数のWebサイトのハブページです。UigradientsやGrabient、Gradient hun...2018.07.19 | 10時00分26秒
シンプルな設計の軽量なFlexboxベースCSSフレームワーク・「Flexit」 Flexit Flexitはシンプルな設計の軽量CSSフレームワークです。Flexboxベースとなっています。row、two、columnなど、そのままで意味が通じる命名規則を採用しています。flexboxの為のユーティリティクラ...2018.07.16 | 11時03分14秒
HTML/CSS/JavaScriptで作られた時計のみを収集している・「Clock Shop」 Clock Shop Clock ShopはHTML、CSS、JavaScriptだけでブラウザで動作する様々な時計を収集しているプロジェクトサイトです。Codepenで公開されている時計コンテンツだけを収集、公開しているみたいです。...2018.07.14 | 10時20分51秒
モダンなデザインのBoostrapベースのOSSな管理画面テンプレート・「Shards Dashboard Lite」 Shards Dashboard Lite Shards Dashboard Liteはモダンなデザインの管理画面テンプレートです。OSSで公開されており、Bootstrapをベースに構築されています。以前ご紹介したUIキットのSha...2018.07.12 | 10時12分43秒
ソートや内容の編集等が可能なシンプルなデータテーブル実装ライブラリ・「Frappe DataTable」 Frappe DataTable Frappe DataTableはシンプルながらパワフルなデータテーブル実装ライブラリです。列でのソートやセル内の内容の編集、カラムのリサイズ等が可能となっています。上サンプルでは変更していません...2018.07.05 | 10時20分27秒
データをグラフ等に可視化出来るオープンソースのスクリプト・「picasso.js」 picasso.js picasso.jsはデータビジュアライゼーションの為のスクリプトです。OSSとして公開されています。様々なグラフにも対応しており、プラグインによる拡張も可能との事。使い方も割と優しい印象でした。可もなく不可もな...2018.07.04 | 10時13分05秒
カスタマイズ可能な疑似的なスクロールバーを実装するスクリプト・「fakeScroll」 fakeScroll fakeScrollはカスタマイズ可能なスクロールバーを実装する為のスクリプトです。::-webkit-scrollbarのようにスクロールバーの見た目をカスタマイズし、各ブラウザで統一する為に疑似的にHTML要...2018.07.03 | 10時36分36秒
なるべく強固なパスワードを入力して貰う為のフォームのサンプル Better Password Form See the Pen Better Password Form by kachibito (@kachibito) on CodePen. Codepenでパスワード設定の際のフォーム...2018.06.30 | 10時15分00秒
3つのドットで作れるCSSローディングアイコンをまとめた・「Three Dots」 Three Dots Three Dotsは3つのドットで作れるCSSのローダーをまとめたプロジェクトです。それぞれbeforeとafterを使って作られているので1つの空要素と指定のclassを与えるだけで実装出来ます。色やサイズの...2018.06.18 | 10時15分44秒
60という数値を中心に設計された実験的なCSSグリッドシステム・「60GS」 60GS 60GSは60と言う数値を元にCSS Gridベースで設計された軽量なCSSグリッドシステムです。CSS Gridベースで、基本的には以下の1classのみを必須としています。 60列用意したのは、60が2、3、4...2018.06.15 | 10時15分20秒
スクロールに応じてCSS keyframesライクな書き方でアニメーションを付与できる・「Motus」 Motus Motusはスクロールに応じて任意の要素にアニメーションを付与する為のライブラリです。非依存なので単体で使えます。アニメーションはCSS keyframesライクな書き方ができますのでCSSの知識がある方なら扱いやすいと思...2018.06.14 | 10時18分22秒
ミニマルなflexboxベースのCSSグリッドシステム・「Katana」 Katana KatanaはミニマルなflexboxベースのCSSグリッドシステムです。calcを使用して軽量化を実現しているみたいです。非圧縮でも1kbほど、.scssなら20行ほどです。clac便利ですねぇ。ライセンスはMITです...2018.06.13 | 10時15分07秒
非依存で使いやすいカラーピッカー実装スクリプト・「Flat color picker」 Flat color picker Flat color pickerは他スクリプトに依存せず使えるシンプルでフラットなカラーピッカーです。排出されるコードも3種あり、透過にも対応しています。また、タッチデバイスもサポート。ライセンス...2018.06.12 | 10時10分15秒
すっきり見やすいスタイルのBootstrapベースなオープンソースの管理画面テンプレート・「Sing App」 Sing App Sing AppはBootstrapをベースとしたオープンソースの管理画面テンプレートです。すっきりとしていて見やすい印象でした。基本的なコンポーネントは揃えられており、すぐに管理画面として機能してくれるみたいです。...2018.06.08 | 10時02分03秒