AsagaoUI
デジタルサービスのために設計されたシンプルで美しいUI
デジタル庁デザインシステムを基に、拡張性と汎用性を向上させて再設計されたCSSフレームワークです。カスタマイズ性の高いSassで構築され、クラスを用いた直感的な状態管理によってJS環境でのスムーズな統合を実現。さらにバニラJSコンポーネントを搭載し、各種テンプレートエンジンでもインタラクティブなUIを実現できます。
デジタル庁デザインシステムに準拠
AsagaoUIはデジタル庁デザインシステムの設計原則を継承しながら、より実践的な実装を提供します。スタイルガイドラインを踏襲しつつ、開発効率を高めるための最適化を行っています。
- デジタル庁が定める色彩システムとタイポグラフィの完全サポート
- レスポンシブデザインの統一的な実装
HTMLマークアップファースト
HTML構造を重視したUIコンポーネントを提供します。JavaScriptに依存せず、HTMLネイティブ要素の機能を最大限に活用することで、堅牢で保守性の高い実装を実現します。
Sassによる強力なカスタマイズ機能
Sassの機能を最大限に活用し、プロジェクトのニーズに合わせた柔軟なカスタマイズを可能にします。変数とミックスインを活用することで、効率的なスタイル定義とテーマのカスタマイズが可能です。
- カスタム変数による容易なテーマ調整
- ミックスインによる再利用可能なスタイル定義
- モジュール式の構成による柔軟な拡張
強力なJavaScriptで拡張
独自のJavaScriptを提供してJSフレームワークの有無に関わらず高度なUIを実現できます。各JSフレームワークと統合することも、バニラJSとして単独で使用することも可能です。
- フレームワークに依存しない柔軟なコンポーネント設計
- Web Componentsによる高い互換性と再利用性
AsagaoUIを使用した例
🤔🤔🤔
このウェブサイトはAsagaoUIを使用して作られています
😊
貢献する
AsagaoUIは、オープンソースで公開されているため、
コードの品質向上やドキュメントの改善など、さまざまな形で貢献できます。