|
1 | 1 |
|
2 | | -# Code Guidelines |
3 | | - |
| 2 | +# UI Coding Guidelines |
4 | 3 |
|
5 | 4 | ## General |
6 | 5 | - Close your tag - Leaving some tags open is simply a bad practice. Only self-closing tags are valid. Normal elements can never have self-closing tags. |
|
10 | 9 | ## Components |
11 | 10 | - Organize files and components in a folder structure like this. This makes it easy to find the code related to a page, without having to browse the entire file explorer. Try, as much as possible, to respect the SOLID principles. Mainly by creating autonomous and extensible components: inject the smallest possible service or parameter, manage all the possibilities offered by the component. For example, a data modification page should display the data, check their values and save the data at the end of the process. |
12 | 11 |
|
13 | | -## UI |
14 | | -# Responsiveness |
| 12 | + |
| 13 | +## Responsiveness |
15 | 14 | - Use the bootstrap grid and it's column classes to have easy and responsive design. [Bootstrap](https://getbootstrap.com/docs/5.3/layout/columns/) |
16 | | -- Decide if you want to develop mobile or desktop design first and test respectively. |
| 15 | +- Decide if you want to develop mobile or desktop design first and test respectively. |
| 16 | + |
| 17 | +## CSS Guidelines for Clean Design |
| 18 | + |
| 19 | +There are no mandatory CSS attributes for all divs, but some conventions help keep designs clean and consistent: |
| 20 | +- Reset/normalize styles: Apply a reset or use box-sizing: border-box; universally (often via * { box-sizing: border-box; }). |
| 21 | +- Spacing: Apply margins/paddings only where needed. Don’t force every div to have them. |
| 22 | +- Flexbox/Grid: If a div is used as a layout container, give it display: flex; or display: grid;. |
| 23 | +- Width & max-width: Constrain large content areas with something like: |
| 24 | +```css |
| 25 | +.container { |
| 26 | + max-width: 1200px; |
| 27 | + margin: 0 auto; |
| 28 | + padding: 0 1rem; |
| 29 | +} |
| 30 | +``` |
| 31 | +- Consistent typography: Use global font rules in body, not in every div. |
| 32 | +- Avoid redundancy: Don’t apply generic attributes (e.g., color, font-size) on all divs—cascade from body or semantic wrappers instead. |
| 33 | + |
| 34 | +### Recommended Practices |
| 35 | +- Use classes, not bare div styles: class="card", class="section", etc. |
| 36 | +- Keep base styles minimal. For example: |
| 37 | +```css |
| 38 | +div { |
| 39 | + display: block; /* default, often unnecessary */ |
| 40 | +} |
| 41 | +``` |
| 42 | +is redundant and shouldn’t be forced on all divs. |
| 43 | +- Leverage utility-first CSS (like Tailwind) or your own utility classes to keep styles DRY. |
| 44 | +- Semantic HTML first: div should be a fallback, not your default. |
0 commit comments