2023-12-15 17:34:50 +03:00
|
|
|
# Frontend Developer guidelines
|
|
|
|
|
|
|
|
|
|
Styling conventions
|
2024-03-15 12:34:41 +03:00
|
|
|
|
2023-12-15 17:34:50 +03:00
|
|
|
- static > conditional static > props. All dynamic styling should go in styles props
|
|
|
|
|
- dimensions = rectangle + outer layout
|
|
|
|
|
|
|
|
|
|
<details>
|
2024-03-15 12:34:41 +03:00
|
|
|
<summary>clsx className grouping and order</summary>
|
2023-12-15 17:34:50 +03:00
|
|
|
<pre>
|
|
|
|
|
- layer: z-position
|
|
|
|
|
- outer layout: fixed bottom-1/2 left-0 -translate-x-1/2
|
2023-12-19 02:21:44 +03:00
|
|
|
- rectangle: mt-3 min-w-fit min-w-10 flex-grow shrink-0
|
2023-12-19 11:18:28 +03:00
|
|
|
- inner layout: px-3 py-2 flex flex-col gap-3 justify-between items-center
|
2024-05-02 21:34:47 +03:00
|
|
|
- overflow behavior: overflow-scroll overscroll-contain
|
2023-12-15 17:34:50 +03:00
|
|
|
- border: borer-2 outline-none shadow-md
|
|
|
|
|
- colors: clr-controls
|
|
|
|
|
- text: text-start text-sm font-semibold whitespace-nowrap
|
|
|
|
|
- behavior modifiers: select-none disabled:cursor-not-allowed
|
|
|
|
|
- transitions:
|
|
|
|
|
</pre>
|
2024-03-15 12:34:41 +03:00
|
|
|
</details>
|
