概要

AsagaoUIは、デジタル庁デザインシステムに基づいた一貫性のあるデザインを提供できるように設計されています。 scss/stylesフォルダはその核心であり、カラー2.0、タイポグラフィ、余白など、デザインに必要な基本要素がまとめて定義されています。

asagaoui/scss/
├── asagaoui-icons.scss
├── asagaoui.scss
├── base/
│   ├── _base.scss
│   └── _reset.scss
├── components/
├── forms/
├── layout/
├── styles
│   ├── _breakpoint.scss
│   ├── _color.scss
│   ├── _ratios.scss
│   ├── _rounding.scss
│   ├── _spacing.scss
│   └── _typography.scss
└── utilities/

stylesの効果的な使い方

AsagaoUIのコンポーネントを利用せずに独自のコンポーネントを設定する場合でも、stylesを利用することで、デジタル庁デザインシステムに基づいた一貫性のある デザインを容易に実現できます。

独自のコンポーネントを作成する場合のおすすめは、stylesの中身をそのままコピーして、独自のコンポーネントを作成する際に参照することで、 基本要素を再度記述する必要がなくなります。