Fundamentals
utility-first is a design approach prioritizing functional CSS classes for layout and styling. It enhances consistency and modularity. Use frameworks like Architect CSS for efficient utility-first development.
Setup Architect CSS:
-
Configure your project files or get starter template.
Include Architect Classes:
Start applying utility classes directly in your HTML. Use classes like `text`, `bg`, `p`, `m`, etc., to style elements.
Responsive Design:
Leverage Architect's responsive classes (`xs`, `sm`, `md`, `lg`, `xl`) to adapt styles for different screen sizes.
Component Styling:
Assemble larger components using utility classes. Combine classes for more complex styles while keeping modularity.
Understand Architect Responsive
Architect's grid system is also mobile-first and responsive, and you're able to customize and specifying CSS Media Query breakpoints.
| Key | CSS Media Query | Devices | Breakpoints |
|---|---|---|---|
| None | None | Aways | None |
| xs | @media screen and (min-width: 375px) | >=375px | xs:<classname> |
| sm | @media screen and (min-width: 544px) | >=544px | sm:<classname> |
| md | @media screen and (min-width: 768px) | >=768px | md:<classname> |
| lg | @media screen and (min-width: 920px) | >=920px | lg:<classname> |
| xl | @media screen and (min-width: 920px) | >=920px | xl:<classname> |
| xxl | @media screen and (min-width: 1440px) | >=1440px | xxl:<classname> |
Understand Architect Classes
Enhances modularity and simplifies styling. Utilize classes like `text`, `bg`, `p`, `m`, etc. to efficiently style elements.
| Key | Apply to | Property |
|---|---|---|
| text | text style |
|
| bg | background |
|
| p | padding |
|
| m | margin |
|
Understand Architect pseudo-class reference
Architect's pseudo-classes references are classes (`hover`, `active`, `focus`) that target a specific HTML element and are used to style elements based on their state.
| Key | Applies on | Test | Breakpoints |
|---|---|---|---|
| hover | Mouse hover | hover:<classname> | hover:bg-green |
| active | Mouse click | active:<classname> | active:bg-green |
| focus | eg: input writing | focus:<classname> | focus:bg-green |