シンプルで直感的なSCSSフレームワーク・「FICTOAN」
FICTOAN FICTOANは直感的に使えるシンプルなSCSSフレームワークです。horizontal-center-thisなどといった分かりやすさ重視のclass命名、モジュール式で必要なものを必要な時に読み込むことでライトに使...
Resource - フレームワーク
BootstrapベースのシンプルなUIのオープンソース管理画面テンプレート・「tabler」
tabler tablerはBootstrap 4ベースのシンプルなUIの管理画面テンプレートです。多くの場合は左カラムにメニューを配置するケースが多かった気がしますが、こちらは上部に配置されていますので操作性よりは視認性に優れている...
エキセントリックなエフェクトを付与できるユニークなCSSアニメーションライブラリ・「Woah.css」
Woah.css Woah.cssはエキセントリックなエフェクトを要素に付与できるCSSアニメーションライブラリです。ちょっとネタに近いというか多分ネタだと思う程度には奇抜な動作をします。用途は・・個人的にはなさそうです。ただ、CSS...
軽量でモバイルファーストなCSSフレームワーク・「Beauter」
Beauter Beauterは軽量でモバイルファーストなCSSフレームワークです。従来品と異なるのはBOLという実験的な命名規則を導入している点です。BOLは.base(基本クラス)、.-object(オブジェクトクラス)、._la...
非依存で軽量の、Webサイト内をハイライトで案内するWebサイトツアー実装スクリプト・「Driver」
Driver DriverはWebページを案内するページツアーを実装するスクリプトです。たまに見かける、任意の場所をハイライトしてユーザーにWebページの使い方等を教える、というもの。単純にハイライトするだけ、ハイライトせずツール...
デフォルトのスタイルを最小限に抑えられたシンプルなclassで管理する事を目指したCSSフレームワーク・「InvisCss」
InvisCss InvisCssはデフォルトのスタイルを最小限に抑えた、シンプルな命名規則で付けられたclassで管理できるCSSフレームワークです。Bootstrapを意識し、スタイルを作りこまないようにしつつもテーマを用意、cl...
スクロールに応じて任意のCSSアニメーションを要素に付与するスクリプト・「Delighters.JS」
Delighters.JS Delighters.JSはページスクロールに応じて要素に任意のCSSアニメーションを付与できるスクリプトです。よく見かけるやつです。個人的には多くの場合、嫌でも目にしっかり入ってくるくらいの派手なエフェク...
FlexboxベースのレスポンシブなWebサイトを構築するプロジェクトの開発をサポートするCSSフレームワーク・「Frow CSS」
Frow CSS Frow CSSはFlexboxベースのRWDなWebサイト構築の開発スピードを上げるためのフレームワークです。様々なグリッドに対応、フォームやユーティリティも揃えられています。npmやBower、CDNも対応、SA...
マルチレベルに対応したドリルダウンのハンバーガーメニューを実装できるスクリプト・「mlStackNav」
mlStackNav mlStackNavはマルチレベルに対応したハンバーガーメニューです。jQueryに依存します。ドリルダウンでマルチレベルナビゲーションに対応していますので省スペースに大量のナビゲーションを詰め込むことができます...
CSS変数を利用したパララックスエフェクトをサポートするライブラリ・「basicScroll」
basicScroll See the Pen basicScroll Default Demo by Tobias Reich (@electerious) on CodePen. basicScrollはCSS変数を利用して...
項目数が多くなったリストやテーブルを自動で複数ページに分割し、ページネーションを加えるスクリプト・「paginathing.js」
paginathing.js paginathing.jsは長くなったリストやテーブルを複数ページに分割するスクリプトです。jQueryに依存します。ページネーションも自動で付与します。オプションで1ページに表示するアイテム数やリ...
フォームのHTML/CSSのboilerplateとして提供する・「Boilerform」
Boilerform See the Pen Boilerform: Card payment example by Andy Bell (@hankchizljaw) on CodePen. Boilerformは送信フォームの雛...
必要なものだけ揃えられたベーシックなCSSのboilerplate・「roolith」
roolith roolithは必要最低限のものだけ揃えたCSSのboilerplateです。タイポグラフィやボタン、カラースキーム、グリッドやRWDの為のブレークポイント、各ナビゲーションやフォームからヘルパークラスまで、分かりやす...
3本線のメニューアイコンのアニメーションパターンをいろいろ集めたサンプル集・「Half Second Hamburger Helper」
Half Second Hamburger Helper See the Pen Half Second Hamburger Helper by Kurt Petrek (@KPCodes) on CodePen. Half Sec...
iPhone Xや8、Galaxy S8、MacBookやApple Watchなど様々なデバイスのモックアップを作れるスタイルシート・「Devices.css」
Devices.css Devices.cssはiPhone Xや8、Galaxy S8、MacBookやApple Watch、Surfaceなどモダンなデバイスのモックアップを表現できるCSSのセットです。かなり大昔にご紹介したの...
カンバンツールを作成する為のスクリプト・「jKanban」
jKanban See the Pen jKanban - Javascript plugin for Kanban boards by kachibito (@kachibito) on CodePen. ※ドラッグ&ドロップが動...
沢山のコンポーネントを持ったVue.js向けのUIツールキット・「Fish-UI」
Fish-UI Fish-UIはVue.js向けのUIコンポーネント集です。グリッドやボタン、メニュ－、ポップアップ、フォームなどの基本的なUIやカレンダー、日付ピッカー、時間ピッカー、タイムラインなどのコンポーネントも備えられていま...
他のミニマルなCSSフレームワークを参考にして作られた超軽量CSSフレームワーク・「lit」
lit litはSkeletonやMilligramなど、他のミニマルなCSSフレームワークの良い点を参考に作られたCSSフレームワークです。現段階で世界最小（398 bytes）だそうです。良い点を持った、というのは僕の勝手な解釈な...
スクロールに応じて指定した要素に任意のclassを付与できるスクリプト・「scrollClass」
scrollClass scrollClassはスクロールの挙動に応じて任意の要素にclassを付与するためのスクリプトです。jQueryに依存しています。上に動作サンプルを用意しました。初期は文字が赤、下にスクロールすると途中で...
WYSIWYGモードも備わったOSSのライブプレビュー機能付きMarkdownエディタ・「TOAST UI Editor」
TOAST UI Editor TOAST UI EditorはWYSIWYGモードも備わったライブプレビュー機能付きMarkdownエディタです。MarkdownモードとWYSIWYGモードとのスイッチが可能、リアルタイムでプレビュ...
画像にインスタグラムのようなフィルターを付与できるスタイルシート・「Instagram.css」
Instagram.css Instagram.cssはインスタグラムのようなフィルターを画像に付与できるスタイルシートです。以前ご紹介したCSSフレームワークのSpectre.cssと同じ開発者の方が公開したCSSで、CSSgram...
30秒で理解できるものだけを集めたJavaScriptコードスニペット集・「30 seconds of code」
30 seconds of code 30 seconds of codeは「30秒で理解できるJavaScriptコード」をまとめたスニペット集です。理解力に欠ける自分の脳では30秒は難しかったですが、シンプルながら便利そうなコード...