@lesscouts/template-unite NPM

Thème pour les sites d’unité Les Scouts

Les Scouts asbl propose ce thème à l’usage de ses membres pour créer le site de leur unité scoute.

Dans ce dépôt, tu trouveras :

des feuilles de styles CSS reposant sur Bootstrap qui intègrent la charte graphique des Scouts
les polices recommandées
nos logos et images d’illustration

Documentation

Pour savoir comment télécharger le template, l’ajouter à ton site et contribuer, continue la lecture ci-dessous.

Si tu veux voir les possibilités offertes par le template et les exemples, consulte la documentation.

Qu’y a-t-il là-dedans ?

Les dossiers sont organisés comme suit :

Dossier	Description
`css`	Feuilles de styles CSS compilées à partir des feuilles de styles du dossier `scss`.
`documentation`	Code source de la documentation du template)
`exemples`	Quelques exemples de mise en œuvre du template
`fonts`	Fichiers des polices utilisées par le template
`images`	Logos et images d’illustration
`scss`	Feuilles de styles CSS originales au format LESS

Dans le dossier css/, le fichier base.css est un fichier compilé qui contient :

le code CSS de Bootstrap v1.5.3.
le code CSS du template Les Scouts

Pas de Javascript dans le template ?

Nous n’avons pas inclus le code Javascript de Bootstrap car le template Les Scouts n’ajoute aucune fonctionnalité Javascript. Nous te conseillons donc de charger le code JS de Bootstrap directement depuis un CDN (voir les exemples ou la section Comment démarrer ci-dessous).

Comment démarrer

Télécharger le template

Plusieurs options de téléchargement sont possibles :

télécharge le fichier zip de la version la plus récente du template
installe le template dans ton projet avec composer : composer require lesscouts/template-unite
clone le dépôt git : git clone https://github.com/lesscouts/template-unite.git

👉 La méthode la plus simple est de télécharger le fichier zip.

Installer le template pour Wordpress, Drupal, …

Nous n’avons pas encore prévu de thème clé sur porte pour les CMS grand public.

Si tu prépares un site avec une plateforme comme Wordpress, Drupal ou un autre CMS, n’hésite pas à partager ta méthode d’intégration pour aider les autres unités (voir la section « Contribuer au projet » ci-dessous).

Installer le template pour un site statique

Si tu as téléchargé le fichier zip, décompresse-le dans un dossier dédié, par exemple template/ à la racine de ton site.

👍 Ne mélange pas les fichiers de ton site et ceux du template. Ça t’évitera de perdre des cheveux plus tard si tu veux mettre à jour le template.

Créer ta première page web

Pour démarrer, recopie un exemple de page (voir le dossier exemples/ pour les sources ou sur https://template.lesscouts.be/) et mets-le à ta sauce ou pars d’une page blanche en recopiant ce squelette HTML :

<!DOCTYPE html>
<html lang="fr-BE">
<head>
    <meta charset="UTF-8">
    <title>Squelette minimaliste d’une page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- Ci-dessous, le lien vers la feuille CSS de base du template Les Scouts -->
    <link href="template/css/base.css" rel="stylesheet">
    
    <!-- Si tu veux utiliser les icônes de Bootstrap, laisse la ligne ci-dessous. Elles sont utilisées dans les exemples -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    
    <!-- Ajoute ensuite ci-dessous la feuille de styles CSS que tu vas utiliser pour personnaliser le template pour ton site -->
    
</head>
<body>
    <!-- Ici, c’est à toi de jouer. Fais preuve de créativité ou inspire-toi des exemples fournis avec le template -->
    
    
    
    <!-- 
    Et tout en bas du corps de la page, ajoute le code Javascript de Bootstrap 
    pour bénéficier des composants animés (menus déroulants, accordéons, …) 
    -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

👉 Si tu souhaites créer tes propres classes CSS, crée ton propre fichier CSS et ajoute-le après la déclaration du template Les Scouts. Ceci étendra les paramétrages du template Les Scouts sans toucher au code. C’est une bonne pratique pour faciliter le suivi des mises à jour du template.

Aller plus loin

Si tu as l’esprit joueur ou les compétences pour le faire, tu peux aussi étendre le fichier SCSS du template et le compiler toi-même dans un unique fichier CSS.

Regarde la section Compiler le SCSS en CSS plus bas pour en savoir plus.

Contribuer au projet

Le template est une source d’inspiration pour toutes les unités de la fédération. Toi aussi tu peux contribuer au projet :

signale les bugs
propose tes améliorations, améliore la documentation, …
si tu découvres une faille de sécurité, préviens-nous

Compiler le SCSS en CSS

Cette section est destinée aux utilisateurs avancés qui ne se contentent pas du fichier CSS fourni avec le template.

Tu ne dois compiler le template que si tu contribues au code du template ou si tu veux rassembler Bootstrap, le template Les Scouts et ton code CSS dans un même fichier CSS.

Pour cela, tu auras besoin d’installer Node.js, npm et SASS.

Installer les dépendances

$ npm install

Compiler les fichiers en CSS

Le fichier package.json contient deux scripts pour compiler tous les fichiers du dossier scss et produire leur équivalent en CSS dans le dossier css.

Pour la production (source compressée) :

$ npm run compile-prod

Pour le développement (source non compressée et source map pour le débogage) :

$ npm run compile-dev

En savoir plus

Différents outils permettent de compiler les sources SCSS en CSS. Tu trouveras plus d’infos sur les sites suivants (en anglais) :

Licences

Le code CSS et la documentation du template sont diffusés sous licence MIT.

Les photos d’illustration présentes dans le template sont la propriété de la fédération Les Scouts asbl et ne peuvent pas être utilisées, diffusées ou modifiées sans autorisation préalable de la fédération Les Scouts asbl.

Les logos Les Scouts, les logos des branches et les illustrations sont la propriété de la fédération Les Scouts asbl et peuvent uniquement être utilisés par ses membres.

Les composants du template fournis par des tiers sont distribués selon leurs licences respectives présentées ci-dessous.

Bootstrap

Bootstrap et les icônes Bootstrap sont publiés sous licence MIT et la documentation de Bootstrap est publiée sous licence Creative Commons.

Polices

Caveat Brush, par Impallari Type, sous licence Open Font
Housepaint, par NicholasJudy456, gratuite pour un usage non commercial
Mali, par Cadson Demak, sous licence Open Font
Muli, par Vernon Adams, sous licence Open Font.
RobotoMono, par Christian Robertson, sous licence Apache v2.0

bootstrap

@everything-registry/sub-chunk-544

1.0.0

2 years ago