Rules Hub
Coding Rules Library
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Use Grid for page-scale layout, Flexbox for inline UI
Choose CSS Grid for larger two-dimensional layouts and keep Flexbox for small one-dimensional inline arrangements.
Bad example
| 1 | <div className="flex flex-1 justify-center"> |
| 2 | <div className="flex w-full justify-center gap-4"> |
| 3 | <Sidebar /> |
| 4 | <Main /> |
| 5 | <Sidebar /> |
| 6 | </div> |
| 7 | </div> |
Explanation (EN)
Building a multi-column page region with nested Flex containers needs extra wrappers and makes centering and sizing the columns fiddly.
Objašnjenje (HR)
Gradnja visekolonske regije stranice s ugnijezdenim Flex kontejnerima trazi dodatne omotace i cini centriranje i dimenzioniranje stupaca nezgodnim.
Good example
| 1 | <div className="grid grid-cols-[320px_minmax(0,1fr)_320px] justify-center gap-4"> |
| 2 | <Sidebar /> |
| 3 | <Main /> |
| 4 | <Sidebar /> |
| 5 | </div> |
Explanation (EN)
A single grid container expresses the column structure directly, removing nested wrappers and making column sizing explicit.
Objašnjenje (HR)
Jedan grid kontejner izravno izrazava strukturu stupaca, uklanjajuci ugnijezdene omotace i cineci dimenzioniranje stupaca eksplicitnim.
Exceptions / Tradeoffs (EN)
Flexbox is the right tool for one-dimensional inline groups (toolbars, button rows, tag lists) and where content-driven wrapping is desired.
Iznimke / Tradeoffi (HR)
Flexbox je pravi alat za jednodimenzionalne inline grupe (alatne trake, redove gumba, liste tagova) i gdje je pozeljno prelamanje vodeno sadrzajem.