HTMLメールの軽量boilerplate・「bojler」
bojler bojlerはHTMLメールの軽量boilerplateです。簡単にひな形を作成出来るように設計されているとの事。スタイルリセット、レスポンシブ対応、グリッド、ユニーティリティのclassが特徴だそうです。ライセンスはM...
Resource - フレームワーク
シンプルで使いやすいスタイルのCSSボタンのセット・「beautons」
beautons beautonsはシンプルで使いやすいスタイルのCSSボタンのセットです。csswizardry謹製みたいです。classを付与すればそのスタイルになってくれます。フレームワークをベースとしている場合は使いにくいケー...
美しいスタイルのBootstrap 4用UIキット・「NOW UI KIT」
NOW UI KIT NOW UI KITは美しいスタイルに仕上げられたBootstrap 4用UIキットです。この手のものでおなじみのCreative Tim製です。コンポーネントもしっかり揃えられており、特にオリジナルのスタイルに...
非依存なHTML5オーディオプレーヤー・「Amplitude.js」
Amplitude.js Amplitude.jsは依存性の無いHTML5 オーディオプレーヤー実装スクリプトです。フレキシブルで軽量、タッチデバイスフレンドリーな点が主な特徴のようです。シンプルで良いんじゃないでしょうか。jsDel...
Bulmaフレームワーク向けに作られたVue.jsベースのUIコンポーネント・「Buefy」
Buefy BuefyはBulmaフレームワーク向けに作られたVue.jsベースの軽量なUIコンポーネント集です。よく必要とされるtableやタブ、ボタン、アラートやモーダルウィンドウ、フォーム周りなど一通り揃えられています。Bulm...
TwitterなどのSNSのembedを任意の高さと幅に出来るスクリプト・「embedo」
embedo embedoはTwitterやFacebook、InstagramやYoutubeなどのSNSのembedを任意の高さや幅に出来るスクリプトです。PinterestやVimeo、Google Mapにも対応しているそうで...
ランダムにパスワードを生成するスクリプト・「jquery.passwordGenerator」
jquery.passwordGenerator See the Pen jQuery Password Generator by kachibito (@kachibito) on CodePen. jquery.passwo...
ホバーエフェクトが綺麗なグラデーションカラーのCSSボタンを大量に公開している・「Gradient Buttons」
Gradient Buttons Gradient Buttonsはホバーエフェクトが綺麗なグラデーションカラーのCSSボタンを大量に公開しているWebサイトです。カラーパレットを公開するCOLORIONのコンテンツになります。マウス...
スライダータイプの使いやすいタイムラインスクリプト・「Timeline.js」
Timeline.js Timeline.jsはスライダー形式で年表のようなタイムラインを表示するスクリプトです。jQueryに依存しています。よくあるタイムラインスクリプトのように細かく年月日設定する等は出来無さそうですが、ざっくり...
モダンなWeb向けの小さなCSSリセット・「tinyreset」
tinyreset tinyresetはモダンなWeb向けの小さなCSSリセットです。よく分かりませんね。適切なタイトル思いつかなかったので直訳しました。ただ、内容は良いリセットだと思います。オールドブラウザほぼ死滅の今日ではリセット...
レスポンシブで軽量なflexboxベースのCSSフレームワーク・「griddd」
griddd gridddはレスポンシブで軽量なflexboxベースのCSSフレームワークです。カスタマイズ性を重視しておりclassもシンプルにされています。大きな特徴はないけどそれ故の使いやすさがある印象でした。MITライセンスの...
ECサイトに必要なUI構築をサポートするライブラリ・「Shop.js」
Shop.js Shop.jsはECサイトに必要になるカートやチェックアウトのUI構築をサポートするライブラリです。カートニ追加する、チェックアウトのフォーム、カートをスライドインさせるなどなど。そういえばありそうでなかったかも。ライ...
ボタンのスタイルを大量に集めたスタイルシート・「Buttons」
Buttons Buttonsはボタンのみを集めたスタイルシートです。少し前の、影のある立体的なものや、ベーシックなもの、丸みのあるもの、フラットなものなどさまざまなボタンのスタイルかなり大量に揃えられています。どこかで役に立つ・・か...
classを使わないミニマルなCSSフレームワーク・「Sakura」
Sakura Sakuraはclassを使わないミニマルなCSSフレームワークです。カラーテーマはいくつか用意されていますが、コンポーネント等は基礎的なもののみとなっています。それでも、デモを見る限りしっかりとWebコンテンツとして機...
モバイル向けに作られたシンプルなイメージビューア・「SmartPhoto.js」
SmartPhoto.js SmartPhoto.jsはスマフォ向けに作られたシンプルなフォトギャラリースクリプトです。他ライブラリに依存せず単体で動作してくれます。ピンチイン/アウト、ドラッグやスワイプなどのイベントに対応しています...
一定の時間経過したら等、時間でCSSを制御するスクリプト・「STIMED.js」
STIMED.js STIMED.jsは一定の時間経過等、時間でCSSを制御するスクリプトです。jQueryに依存します。指定方法は以下のような感じ。 昼と夜でコントラストを変えたり、要素の色を変えたり、画像を変えた...
JSONデータやPDF等の印刷をサポートするスクリプト・「Print.js」
Print.js Print.jsはWeb状のデータやページ印刷をサポートしてくれる小さなスクリプトです。PDFの印刷は、ファイルを開かず、直接印刷プレビューに行けるようにしたり、フォームの印刷、JSONデータを元にテーブル化して印刷...
様々な利用シーンに対応出来るよう設計されたキーワードハイライトのスクリプト・「mark.js」
mark.js mark.jsはさまざまな利用シーンを想定して、対応できるように設計されたキーワードハイライトスクリプトです。バニラなJSとしても利用可能ですが、jQueryプラグインも用意されています。特殊記号のサポートやifram...
CSS transitionsを使用したハンバーガーメニュー・「Ember Burger Menu」
Ember Burger Menu Ember Burger MenuはCSS transitionsを使用したハンバーガーメニューです。アニメーションはtympanusの記事を参考にしているものだそうで、モダンなエフェクトのオフキャ...
誤った使い方のHTMLソースをハイライトしてくれるスタイルシート・「debugCSS」
debugCSS debugCSSは誤った使い方をしたHTMLソースの箇所をハイライトしてくれるスタイルシートです。その名の通りデバッグ用のCSSです。実用的かどうかよりも面白いアイデアだなーと思ったので備忘録。ソース見ていろいろ感心...
波状の動きの背景を作成できるライブラリ・「Wavie.js」
Wavie.js Wavie.jsは波のような動きの背景を作成出来るライブラリです。canvasでオブジェクトを描いて一定の動きを付与する、みたいなシンプルなもの。方向やオブジェクトのサイズの設定等が可能なので多用な動きを表現する事が...
jQueryライクに使える5kbほどの軽量ライブラリ・「Selector」
Selector SelectorはjQueryライクに使えるユーティリティな軽量ライブラリです。5kbほどでjQueryと同じような書き方 が出来ます。セレクタも結構同じものがサポートされています。jQuery代替と言えるかどうか...