Before you bend a component
- Look in its doc for a prop or variant that does it.
- Put the layout on a wrapper and leave the component as it is. To hide a button on phones, hide what holds it:
<div class="max-sm:tw-hidden"><BaseButton … /></div>. To place it, use the parent'sDsStackortw-flex. - If the design really needs the component to look or behave differently, force it with
!tw-…and tell the designer. The handoff lists it under Deviations from the library, where designers and devs decide: a one-off, a change to the mockup, or a library change (/new-proposal).
✓ Do
Wrap a library component to place, size or hide it. Its own look stays the library's.
✕ Don't
Use !tw- on a library component to match a screenshot of the live site. Check the table below first: production may be the one that's off.
Production isn't the standard
wikicasa-nuxt restyles some library components with its own CSS. Mockups show the library as it is, so these parts look different from the live site. That's intended: the difference is drift between production and the library, and designers and devs settle it.
| Component | Library (mockups) | Production |
|---|---|---|
BaseBreadcrumb |
Black links | Blue links, 12px |
BaseButton with uikit-btn-transparent |
Black text | Blue text ("Accedi" in the top bar) |
BaseCard |
Image and text side by side on phones too | The listing card (InsertionRealEstateCard) puts the image above the text on phones, with !tw-flex-col |
When a mockup needs production's look:
- For every product: it's the library that should change. Propose it with
/new-proposal. - For this mockup only: force it, and it's listed as a deviation in the handoff.
A difference you find that isn't in the table goes in it.