radix.shoalwave.net
The Common HTML,
CSS and JS Library for Responsive Website.
Radixは HTML、CSS, javascript によるレスポンシブwebページ作成用のライブラリです。
許可のない商業利用、また個人利用を超えた無断改変、二次配布を禁じます。
バージョンによる違い
ファイル名の radix.a.b.c の a.b.c でバージョンを表します。基本的には a は互換や言語仕様の準拠基準を表しており、過去のバージョンからの互換が切られます。
b は機能追加や重大なバグ修正が行われた場合の更新です。
c はバグ修正や軽微な機能調整が行われた更新です。
例として、 2.1.0 を利用して作成された web サイトの本フレームワークをアップデートする場合、2系列の最終版である 2.3.0 へのアップデートは行えますが、3.0.0へのアップデートの際は宣言文の仕様変更等が影響する為、完成されたサイトの見た目・機能が崩れる場合があります。
1.x.x 系列jQuery に依存。
2.x.x 系列ES5 準拠、IE を含めたレガシーブラウザにも一応対応した仕様に。
3.x.x 系列IE の終了、Edge の chromium 化を受けレガシーブラウザを削除、 ES6 仕様に。
CSS reset のみの最小限度のフレームワークでは機能として不十分、しかし、デザイン・レイアウトをそのフレームワークでの設計思想でがんじがらめにしてしまうことは開発者の自由をうばってしまう。という考えから「誰もが使い回す機能を意識せずとも実装でき、個々の設計には自由を」という方針で作成しています。フレームワーク依存でないネイティブな開発をベースとして、最低限のユーティリティクラスと基本的なJS機能をまとめたものです。
仮想DOMを用いたコンポーネント単位での開発のようなものに対し最適化しているわけではありません。あくまでフロントベースで静的なWEBサイトに対して、ピュアなCSSよりも楽な開発を可能にすることが目的です。 (仮想DOM環境でも、副作用フックに都度インスタンスの init メソッドを実行することで利用すること自体は可能です)
UPDATE LOG
- 2022.03.063.1.6
・ToggleNav の trigger, target それぞれのセレクタ対象を複数のエレメントに指定しても動作するように変更
・FlexFix のダミーエレメント追加の最小個数を設定できるオプション機能を追加 - 2022.03.043.1.5
・scroll appear の reset オプションの既定値を false から true に変更(実用上 reset する場面の方が多かったため)
・パッケージリリースで読み込んでいる外部のアイコンライブラリを Font Awesome から Google Material Icons に変更(テスト変更、元に戻す可能性あり) - 2022.02.213.1.4
・a, .rdx-modal-source を cursor: pointer になるように修正
・.fb-brackets が、ラッパーの高さに対し内部のコンテンツの高さが足りない場合に間延びしてしまう問題を修正 - 2022.02.013.1.3
minify 版の css の不具合を修正
JS を react 対応版の記述に修正 - 2021.11.023.1.2
css reset を新しい方式に変更
マニュアルを react で作成 - 2021.08.263.1.1
バージョン管理の利便性のため、ファイル名からバージョン番号を削除
バージョン表記は radix.css と radix.js の内部のみに
minify したファイル(radix.min.css、radix.min.js)を作成するように
その他軽微なバグ修正 - 2021.06.183.1.0
hamburger のスペルを今までずっと間違えていたのを修正
line-height
をデフォルト1.4に(pタグのみ1.8).centering
クラスの代替となる.fb-brackets
を追加。.full-bleed
と併せてフルブリードレイアウトに対応
svg アイコンに angle 4種類を追加
就活のため一応 github 上で公開 - 2020.11.103.0.2
オブジェクト宣言時に引数を渡さないとエラーが出るバグを修正
- 2020.10.153.0.1
モーダルウィンドウ機能の微調整、 fit プロパティを追加
- 2020.10.063.0.0
js を ES6 仕様に更新(class, let, constの使用)その他微調整
radix.js をプロトタイプ型からクラス型変更、それに伴いオプションの宣言方法を変更
【新機能】
イージング関数を Robert Penner’s Easing Functions に
スクロール表示機能を追加
preload 機能を追加
【CSS】
CSS variables の項目を調整
body 要素にtext-size-adjust: 100%
を追加
【モーダルウィンドウ】
モーダルウィンドウのリサイズ機能周りを改善、リサイズのオンオフ機能を追加、宣言属性を変更.modal-visible
クラスを追加
【ドラッグスクロール】
horizontalScroll 機能の名称を dragScroll に変更
【ナビゲーション開閉】preventScroll
オプションの追加
【以下開発者向け】
radix インスタンスから toggleNav の開閉状態を取得できるように
関数を追加し、開閉機能の外部スクリプトからの実行を可能に
radix インスタンスに modalParts プロパティを追加、モーダルウィンドウに利用されているエレメントノードが取得されている状態に - 2020.03.162.3.0
モーダルウィンドウ機能を追加
js で出力される css クラス名をrdx-
から始まるものに統一 - 2020.03.122.2.2
水平スクロール領域を1ページに複数作成した際にスクロールヒントが一つしか表示されないバグを修正
- 2020.03.112.2.1
雛形のJS記述が連想配列になっていなかったのを修正
flex fix の修正
リストスタイルの CSS クラス名がおかしかったのを修正 - 2020.02.272.2.0
js の機能に、flexbox の修正クラスの作成を追加
img のデフォルトのobject-fit
を cover に変更、containクラスを作成
p のデフォルトのtext-align
を justify に設定
js 書き出しの SVG ハンバーガーのデザインを修正 - 2020.02.052.1.0
CSS Variables を解禁( IE をサポート対象外に)
radix.css 内でのメディアクエリを廃止し、 style.css 内への記述のみに変更
js の機能に、横スクロール領域クラスの作成を追加
フォントサイズの可変を廃止し、デフォルトで 16px に固定するように
style.css 内に固定ページ化用のスタイルをコメントアウトでの記述で追加 - 2020.01.222.0.2
js での SVG ハンバーガーの書き出しの不具合を修正
- 2020.01.102.0.1
js の微修正
- 2020.01.042.0.0
jQuery に依存しない radix.js の実装。最低限の機能としてスムーススクロールと auto target blank のみ
実装レベルは ES5 準拠(きっちり確認はしていないため一部 ES6 の可能性あり) - 2019.11.141.5.1
html グローバル属性
[hidden]
に対応 - 2019.09.251.5.0
印刷画面への対応( Chrome のみ。現状では全ブラウザへの包括的な対応は不可能)
その他、mさんが追加してくれた IE-fix の反映 - 2019.08.291.4.0
個人利用からフレームワーク化して公開
- 20181.0.0 ~ 1.3.0
「css reset と最適化スタイルで自分用の基底化をする」ライブラリということで、radix.css と命名した(root.css だと既にどこかにありそうだったから)。
当初は自己満足的な構成でとても他人に公開しようと思うレベルのものでなく、特に管理もしていなかった。いつからナンバリングをしていたのかのログもなく、1.0.0 ~ 1.3.0 のデータは現在は消失している。 - 2017alpha
cssの最適化に有名ライブラリのやり方が気に入らなかった為、自分用ライブラリとして作成を始めた。この頃は css のみで js は独立して「よく使うコード集」みたいなものをまとめていた(というかまだ js を習得しておらず、コピペコードしか使えなかった)。