ユーティリティクラス
Startify-UIのユーティリティクラス
Startify-UIでは、全てのクラス名がsu-[CLASS_NAME]の命名規則に基づき、su-というプレフィックスを採用しています。これは、他のCSSフレームワークと併用する場合でも、クラス名が重複しないようにするための設計です。異なるフレームワーク間での競合を防ぎ、より安全にスタイルを適用できるように工夫されています。このため、他のフレームワークとの共存が必要なプロジェクトでも、安心して使用することが可能です。
ブレークポイント
一部のユーティリティクラスには、メディアクエリを使って特定のブレークポイントによって異なるスタイルが設定されているバリエーションを提供しているものもあります。Startify-UIでは各ブレークポイントのデフォルト値は以下のように設定しています。
| ブレークポイント名称 | 単位 | ビューポート幅の閾値 |
|---|---|---|
| モバイル（小） | mobile-s | 400px |
| モバイル（中） | mobile-m | 576px |
| モバイル（大） | mobile-l | 768px |
| デスクトップ（小） | desktop-s | 992px |
| デスクトップ（中） | desktop-m | 1280px |
| デスクトップ（大） | desktop-l | 1440px |
メディアクエリ
上記のブレークポイントはメディアクエリによってビューポートの幅に合わせてスタイルを最適化させたり、異なるスタイルを適用させることができます。以下にあるメディアクエリのサンプルで、現在のビューポート幅に合わせて実際に表示が切り替わるのを確認できます。
|
@media (width <= 400px) { ... }
@media (max-width: calc(400px - 0.02px)) { ... }
400px（mobile-s）以下 |
@media (400px <= width) { ... }
@media (min-width: 400px) { ... }
400px（mobile-s）以上 |
|
@media (width <= 576px) { ... }
@media (max-width: calc(576px - 0.02px)) { ... }
576px（mobile-m）以下 |
@media (576px <= width) { ... }
@media (min-width: 576px) { ... }
576px（mobile-m）以上 |
|
@media (width <= 768px) { ... }
@media (max-width: calc(768px - 0.02px)) { ... }
768px（mobile-l）以下 |
@media (768px <= width) { ... }
@media (min-width: 768px) { ... }
768px（mobile-l）以上 |
|
@media (width <= 992px) { ... }
@media (max-width: calc(992px - 0.02px)) { ... }
992px（desktop-s）以下 |
@media (992px <= width) { ... }
@media (min-width: 992px) { ... }
992px（desktop-s）以上 |
|
@media (width <= 1280px) { ... }
@media (max-width: calc(1280px - 0.02px)) { ... }
1280px（desktop-m）以下 |
@media (1280px <= width) { ... }
@media (min-width: 1280px) { ... }
1280px（desktop-m）以上 |
|
@media (width <= 1440px) { ... }
@media (max-width: calc(1440px - 0.02px)) { ... }
1440px（desktop-l）以下 |
@media (1440px <= width) { ... }
@media (min-width: 1440px) { ... }
1440px（desktop-l）以上 |