119 lines
3.3 KiB
Markdown
119 lines
3.3 KiB
Markdown
# Structure LESS pour BoL
|
|
|
|
Ce dossier contient tous les fichiers LESS qui sont compilés en CSS pour le système BoL.
|
|
|
|
## Structure des fichiers
|
|
|
|
```
|
|
styles/
|
|
├── bol.less # Fichier principal (importe tous les autres)
|
|
├── global/ # Styles globaux
|
|
│ ├── typography.less # Fonts et styles de texte
|
|
│ ├── foundry-overrides.less # Overrides Foundry VTT
|
|
│ ├── flex.less # Utilitaires Flexbox
|
|
│ ├── forms.less # Styles de formulaires
|
|
│ ├── item-list.less # Listes d'items
|
|
│ ├── colors.less # Couleurs pré-définies
|
|
│ └── chat.less # Messages de chat
|
|
└── components/ # Composants spécifiques
|
|
├── common.less # Styles communs aux sheets
|
|
├── actor.less # Feuilles d'acteurs
|
|
└── item.less # Feuilles d'items
|
|
```
|
|
|
|
## Compilation
|
|
|
|
### Commande unique
|
|
```bash
|
|
npm run css
|
|
```
|
|
|
|
### Mode watch (recompile automatiquement)
|
|
```bash
|
|
gulp
|
|
```
|
|
ou
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
## Modification des styles
|
|
|
|
1. **NE PAS modifier** directement `css/bol.css`
|
|
2. Modifier les fichiers `.less` appropriés dans `styles/`
|
|
3. Compiler avec `npm run css`
|
|
4. Le fichier `css/bol.css` sera régénéré automatiquement
|
|
|
|
## Organisation
|
|
|
|
### Global (`styles/global/`)
|
|
|
|
- **typography.less** : Définition des @font-face et styles de texte de base
|
|
- **foundry-overrides.less** : Overrides des styles Foundry (pause, scrollbar, etc.)
|
|
- **flex.less** : Classes utilitaires flexbox (.flexrow, .flexcol, etc.)
|
|
- **forms.less** : Tous les styles de formulaires (inputs, selects, labels, etc.)
|
|
- **item-list.less** : Styles des listes d'items (.items-list)
|
|
- **colors.less** : Classes de couleurs pré-définies (.red, .bg-red, etc.)
|
|
- **chat.less** : Styles des messages de chat et résultats de dés
|
|
|
|
### Components (`styles/components/`)
|
|
|
|
- **common.less** : Styles communs à toutes les sheets (.bol.sheet)
|
|
- Window header/content
|
|
- Sheet header avec banner
|
|
- Tabs
|
|
- Sheet body
|
|
|
|
- **actor.less** : Styles spécifiques aux feuilles d'acteurs
|
|
- Dimensions et layout
|
|
- Images d'attributs (vigor, agility, etc.)
|
|
- Footer
|
|
- Stats, resources
|
|
- HUD et tooltips
|
|
|
|
- **item.less** : Styles spécifiques aux feuilles d'items
|
|
- Dimensions
|
|
- Properties list
|
|
- Dialog
|
|
|
|
## Avantages de LESS
|
|
|
|
1. **Variables** : Réutilisables dans tout le code
|
|
2. **Nesting** : Code plus lisible et maintenable
|
|
3. **Mixins** : Réutilisation de blocs de styles
|
|
4. **Imports** : Organisation modulaire
|
|
5. **Opérations** : Calculs CSS (calc() amélioré)
|
|
|
|
## Exemple d'utilisation
|
|
|
|
### Avant (CSS)
|
|
```css
|
|
.bol.sheet.actor .window-content form .sidebar .profile-img {
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
```
|
|
|
|
### Après (LESS)
|
|
```less
|
|
.bol.sheet.actor {
|
|
.window-content {
|
|
form {
|
|
.sidebar {
|
|
.profile-img {
|
|
cursor: pointer;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Notes importantes
|
|
|
|
- La compilation LESS → CSS se fait automatiquement avec gulp
|
|
- Le fichier `css/bol.css` est généré et ne doit pas être modifié manuellement
|
|
- Tous les imports sont dans `styles/bol.less`
|
|
- Les chemins des images/fonts sont relatifs au fichier CSS final dans `css/`
|