非依存で使いやすいカラーピッカー実装スクリプト・「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秒
ミニマルで軽量なFlexboxベースのCSSフレームワーク・「Flexy」 Flexy Flexyはミニマルで軽量なFlexboxベースのCSSフレームワークです。圧縮版で0.33KBほどになるとの事。IEにも対応させる場合はflexy-old.cssも読み込むhつ用があるようです。UIコンポーネント等の用意...2018.06.06 | 10時15分13秒
BootstrapにMicrosoft提唱のデザインシステム、Fluentを取り入れたツールキット・「Nespero Fluent Kit 」 Nespero Fluent Kit Nespero Fluent KitはMicrosoftが新たに提唱したデザインシステム、FluentをBootstrapに導入したツールキットです。Bootstrapを使って手軽にFluentの...2018.05.30 | 10時17分01秒
簡易的なDOM操作をjQueryライクに行える超軽量ライブラリ・「nanoJS」 nanoJS nanoJSは簡単なDOM操作をjQueryライクに行える軽量ライブラリです。同じような構文でDOMを操作する事が出来る、というもので完全互換ではありませんが、非圧縮で100行ほど、圧縮すると0.6kbほどになると超軽量...2018.05.29 | 10時41分28秒
手書き風のUIコンポーネントを提供するライブラリ・「Wired Elements」 Wired Elements Wired Elementsは手書き風のUIコンポーネントを提供するライブラリです。UIはWeb Componentsとして実装されており、手書きライクな見た目はRough.jsが用いられていますので、よ...2018.05.28 | 11時05分07秒
textareaやinputで入力可能な残り文字数を表示する非依存のスクリプト・「short-and-sweet」 short-and-sweet short-and-sweetはフォームの入力エリアで、maxlength属性で文字数が制限された項目に残り文字数を表示するスクリプトです。非依存型で軽量、使い方も簡単です。表示文字列はカスタムデータ属...2018.05.27 | 10時17分20秒
Vue.jsを使用したデスクトップアプリを作成できる・「Vuido」 Vuido VuidoはVue.jsを使用したデスクトップアプリを作成できるフレームワークです。libuiライブラリが使用されていますのでProton Nativeと似たような感じかもしれません。各OSで動作するよう設計されており、E...2018.05.23 | 11時27分14秒
ログインフォームでアバターが入力内容を目で追うUI・「Animated SVG Avatar」 Animated SVG Avatar See the Pen Animated SVG Avatar by Darin (@dsenneff) on CodePen.0 Animated SVG AvatarはSVGで...2018.05.19 | 10時13分05秒
画像の見た目に合わせたドロップシャドウを作り出すスクリプト・「Image-shadow」 Image-shadow Image-shadowは画像の見た目に合わせて陰影を作成するスクリプトです。非依存型で単体で動作します。コードよく見てないけど画像のクローンを作成してblurさせて下に配置、を自動でやってくれる、みたいなも...2018.05.16 | 10時20分02秒
スマフォで横スクロールがある場合はその旨をアイコンで明示してくれるスクリプト・「ScrollHint」 ScrollHint ScrollHintはスマフォでWebページを見た際に横スクロール可能なtable等があった場合に、その旨をアイコン等で明示してくれるスクリプトです。国産CMSのa-blogを提供するappleple社さんが開発...2018.05.15 | 10時15分46秒
DOM要素をドラッグで複数選択するスクリプト・「selection.js」 selection.js selection.jsは要素の複数う選択を可能にするスクリプトです。非依存で単体で動作します。上サンプルのように、複数並べられたボックスをドラッグで選択する事が可能で、タッチデバイスにも対応させることも可能...2018.05.08 | 11時26分57秒
超軽量なCSS gridベースのフレームワーク・「Smart CSS Grid」 Smart CSS Grid Smart CSS Gridは超軽量なCSS gridベースのグリッドシステムです。0.5kbでレスポンシブ、ネストも不要でグリッドレイアウトを構築できる、というもの。HTMLも少なくて済むのでスマートな...2018.05.04 | 11時04分50秒
Bootstrapベースのスタイルガイド用テンプレート・「Bootstrap Style Guide Boilerplate」 Bootstrap Style Guide Boilerplate Bootstrap Style Guide BoilerplateはBootstrapベースのスタイルガイド用Boilerplateです。スタイルガイド作成の手間を省...2018.05.02 | 11時54分13秒
多様なタイプに対応できるオープンソースの高性能チャートライブラリ・「ECharts」 ECharts EChartsは多種多様なタイプのビジュアルデータに対応可能な高性能チャートライブラリです。中国の大手検索エンジンサービス、百度(Baidu)が提供するライブラリのようです。非常に高性能で、線グラフだけでも20種以上の...2018.04.28 | 10時09分41秒
URLフレンドリーなIDをジェネレートするライブラリ・「Nano ID」 Nano ID Nano IDはランダムにURLフレンドリーなIDを生成するライブラリです。かなり高確率で重複を防げるよう設計しているそうです。生成に使用するのは数字と大小文字の英数字のみなのでURLフレンドリーでもあるとの事。動作サ...2018.04.22 | 10時17分13秒
軽量で非依存なカルーセル実装スクリプト・「Glide.js」 Glide.js Glide.jsは軽量で柔軟な非依存型のカルーセル実装スクリプトです。ES6(ECMAScirpt2015)で書かれています。ファイルサイズは圧縮版で6kbほどで、依存性もないバニラなコードで書かれているのでかなり軽...2018.04.20 | 11時16分12秒
様々なレイアウトに対応できるよう設計されたflexboxベースのグリッドシステム・「Flexible Grid」 Flexible Grid Flexible Gridは様々なレイアウトでも対応できるよう設計されたflexboxベースのCSSグリッドシステムです。モバイルファーストでレスポンシブ且つ、セマンティックなマークアップにも使用可能でリー...2018.04.13 | 11時12分28秒
一通りのUIコンポーネントを揃えた軽量なCSSフレームワーク・「Mustard UI」 Mustard UI Mustard UIはWebサイト等で必要になりそうなUIコンポーネントを一通り取り揃えたCSSフレームワークです。モジュラー式なので必要なコンポーネントのCSSだけ読み込めばいいので軽量で済みます。スタイルはあ...2018.04.11 | 10時08分50秒
シンプルで見やすいチャートを生成できるライブラリ・「TOAST UI Chart」 TOAST UI Chart TOAST UI Chartはシンプルで見やすいチャートを生成できるJavaScriptライブラリです。ラインやバー、パイ、マップなどよく使われるチャートタイプから、他のタイプの様々なチャートもサポートし...2018.04.06 | 10時30分29秒
Web制作の開発スピード向上を目的とした軽量なCSSライブラリ・「Flat Remix CSS Library」 Flat Remix CSS Library Flat Remix CSS Libraryは開発スピード向上をサポートするCSSライブラリです。基本的な要素のスタイルが施されているので開発に専念できる、みたいな流れを期待したもののよう...2018.03.27 | 10時19分36秒
Vue.jsで作れるオープンソースのUIデザインツール・「Vue Design System」 Vue Design System Vue Design SystemはVue.jsベースのUIデザインシステムです。チームで使う事を想定されているようで、使用者がHTML、SCSS、JavaScriptを扱ったWebアプリ開発の基礎...2018.03.23 | 11時02分20秒