| Version | Objectif | Domaine | Cadre | Démo |
|---|---|---|---|---|
| 2.0 | Andragogie | Développement | Laboratoire | Sass Template |
Reupload et correction du support 'Sass Template' daté d'avril 2020.
Ce projet est une ressource pédagogique qui sert d'exemple de développement avec SCSS/Sass.
Ce support était fourni aux stagiaires ayant accompli le cours "HTML/CSS".
- Apprendre la décomposition des styles CSS
- Découvrir la dynamique de développement proposée par Sass
- Respecter une structure et une organisation pertinentes de fichiers
Cours
- "WWW"
- "HTML/CSS"
- "JavaScript"
- "Node.js"
Ce projet peut être utilisé dans un cadre d'apprentissage individuel et privé. Il ne convient pas pour une utilisation publique ou professionnelle.
Clônez ce repository dans un répertoire local sur votre machine.
Installez :
npm install -g sassAjoutez les extensions VS Code :
- Sélection linguistique Page de sélection linguistique
- Textes Exemples typographiques, titres, paragraphes, listes et autres implémentations textuelles
- Éléments Boutons, liens, blocs dédiés ou conceptuels
- Formulaire Éléments de formulaire
- Indisponible Page d'erreur interne
sass
├── base/ : "Structure fondamentale de l'interface"
│ ├── _base.scss : "forwards pour la compilation"
│ ├── _composition.scss
│ ├── _normalize.scss
│ ├── _typography.scss
├── components/ : "Structure des blocs et éléments spécifiques"
│ ├── _classical.scss
│ ├── _components.scss : "forwards pour la compilation"
│ ├── _evolved.scss
├── themes/ : "Couleurs, esthétisme, stylisation"
│ ├── _base.scss
│ ├── _components.scss
│ ├── _theme.scss : "forwards pour la compilation"
├── utils/ : "Développements réutilisables, variables, fonctions, etc."
│ ├── _mixins.scss
│ ├── _placeholders.scss
│ ├── _utils.scss : "forwards pour la compilation"
│ ├── _variables.scss
├── index.scss : "styles dédiés à la page racine"
├── unavailable.scss : "styles dédiés à la page d'erreur"
├── * : "fichiers d'import pour la compilation"La syntaxe BEM – bloc - element - modificator – n'est pas respectée car elle engendre des noms de classes bien trop longs. Ce template n'est pas conçu pour une utilisation industrielle.
Le <footer id="uifoot"> ne permet pas l'intégration d'une structure de sous-menu (.navigation.expand).
Les ressources externes JavaScript sont à votre disposition gracieusement et leur utilisation est autorisée. Mais notez bien que ces ressources sont susceptibles d'évoluer sans avertissement car elles ne font pas l'objet d'une librairie publique.
En revanche, l'utilisation des ressources externes .png, .jpg, .svg figurant dans /trademark est formellement interdite. Si vous souhaitez utiliser et publier ce projet, veuillez replacer ces images par vos logos et icônes.