Usage
Découvrez comment utiliser facilement Sass Swing pour créer des sites web responsive.Téléchargement
Sass Swing se présente sous deux formes différentes.
Sélectionnez ci-dessous, la version que vous souhaitez en fonction de vos préférences.
CSS
Il s'agit de la version standard avec les fichiers CSS minifiés et non minifiés. Contient également une version de base, contenant juste les composants de base.
Pour les utiliser il vous suffira de lier sass-swing.min.css
dans le <head>
de votre page HTML. Le fichier sass-swing.min.css
et le fichier sass-swing.min.js
se trouvent respectivement dans le dossier dist/css
et dist/js
de l'archive à télécharger
<link rel="stylesheet" href="sass-swing.min.css">
<script src="sass-swing.min.js" defer</script>
SASS
Vous avez deux possibilités. Elles contiennent les fichiers sources SCSS. En choisissant une de ces deux versions, vous pourrez choisir les composants à inclure et vous aurez un controle total sur la personnalisation.
Générez un modèle, à partir de notre "Starter Kit" pour commencer à utiliser Sass Swing directement pour construire votre site web (nécessite un compte Github)
Téléchargez ou clonez les sources pour nous aider et contribuer au développement de Sass Swing (contient les fichiers source de cette documentation).
>> git clone https://github.com/jdelauney/sass-swing.git
CDN
Vous pouvez utiliser Sass Swing directement dans vos productions via le serveur CDN unpkg ou js-deliver
<link rel="preconnect" href="https://unpkg.com">
<!-- Version complète avec tous les addons -->
<link rel="preload" href="https://unpkg.com/sass-swing@latest/dist/css/sass-swing.min.css" as="style">
<link rel="stylesheet" href="https://unpkg.com/sass-swing@latest/dist/css/sass-swing.min.css">
<!-- Version basique SANS les addons -->
<link rel="preload" href="https://unpkg.com/sass-swing@latest/dist/css/sass-swing-basic.min.css" as="style">
<link rel="stylesheet" href="https://unpkg.com/sass-swing@latest/dist/css/sass-swing-basic.min.css">
<!-- Javascript -->
<script src="https://unpkg.com/sass-swing@latest/dist/js/sass-swing.min.js" defer></script>
NPM
Vous pouvez également installer les sources de Sass Swing via NPM
>> npm install sass-swing
Mise en place CSS
Cette section est pertinente que si vous avez choisi de télécharger la version CSS de Sass SwingStructure du projet
Si vous avez téléchargé, les fichiers CSS, il vous faut extraire les fichiers dans le dossier où est situé votre projet.
La structure de votre dossier devrait ressembler à ceci :
Mon-site-web/
|--styles/
| |--sass-swing.min.css
|
|--assets/
| |--images/
| |--mon-image.jpg
| |--icons/
| |--fonts/
| |--roboto
|
|--scripts/
| |--sass-swing.min.js
|
|--index.html
Il existe deux ensembles de fichiers CSS. Le .min.css
signifie que le fichier est 'compressé' pour réduire les temps de chargement. Ces fichiers minifiés sont généralement utilisés en production alors qu'il est préférable d'utiliser les fichiers non minifiés lors du développement.
Configuration HTML
Il vous suffit de vous assurer que les fichiers soient correctement liés à votre page Web. Il est recommandé d'importer les fichiers javascript en bas de page (avant la balise fermante </body>
) afin de réduire le temps de chargement de la page.
Suivez l'exemple ci-dessous :
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=1.0">
<title>Mon site web</title>
<meta name="Description" content="Mon super site web"/>
<meta name="robots" content="index, follow">
<link rel="preload" href="./styles/css/sass-swing.min.css" as="style">
<link rel="stylesheet" href="./styles/sass-swing.min.css">
<script src="./scripts/sass-swing.min.js" defer>
<!-- Ou chargement via le CDN -->
<!--
<link rel="preconnect" href="https://unpkg.com">
<link rel="preload" href="https://unpkg.com/sass-swing@latest/dist/css/sass-swing.min.css" as="style">
<link rel="stylesheet" href="https://unpkg.com/sass-swing@latest/dist/css/sass-swing.min.css">
<link rel="stylesheet" href="your-custom-stylesheet.css">
<script src="https://unpkg.com/sass-swing@latest/dist/js/sass-swing.min.js" defer></script>
-->
<link rel="shortcut icon" href="./assets/icons/favicon.svg" type="image/svg">
</head>
<body>
<main class="container">
<h1>Hello, world!</h1>
</main>
</body>
</html>
Mise en place SASS
Cette section est pertinente que si vous avez choisi de télécharger une des versions SASS de Sass SwingSi vous avez choisi de générer le model, vous devrez impérativement cloner votre dépôt Github en local sur votre ordinateur
>> git clone https://github.com/username/repository
Après avoir choisi, une des deux versions SASS de Sass Swing, vous devez installer les dépendances NPM pour pouvoir compiler les fichiers SCSS en fichiers CSS exploitables par vos pages HTML avec les commandes adequate ou avec votre bundler préférer (Webpack, Parcel, Vite...)
>> npm install
Comment inclure Sass Swing dans votre projet ?
Pour inclure Sass Swing dans votre propre fichier SCSS il vous faudra l'importer comme ceci : @use"sass-swing";
Pour importer les fonctionnalités Javascript, faites comme ceci : import * as SassSwing from "sass-swing";
Le modèle de projet
Structure du projet
Mon-site-web/
|--dist/
| |--public
| |--assets
| | |--icons
| | |--images
| | |--fonts
| |--styles
| |--scripts
|--src
|--assets
| |--icons
| |--images
| |--fonts
|--styles
| |--scss
| |-index.scss
|--scripts
| |-script_index.js
|--index.html
Les fichiers sources de Sass Swing que vous allez utiliser, se trouvent dans les dossiers src/
.
Le dossier ./dist
contiendra vos fichiers compilés
Commandes disponibles
-
Compilation
Les fichiers seront compilés, optimisés et minifiés.
Seules les classes utilisées dans vos pages HTML, seront ajoutés au(x) fichier(s) css, final. Puis enfin le(s) fichier(s) seront minifiés>> npm run build
Les sources
Cette distribution, contient uniquement les fichiers sources de Sass Swing ainsi que les fichiers de cette documentation
Commandes disponibles
-
Compilation de Sass Swing
Les fichiers compilés et compressés se trouveront dans le dossier
./dist
>> npm run build
-
Génération des fichiers de la documentation
Les fichiers compilés et compressés se trouveront dans le dossier
./documentation/styles/css
>> npm run build:doc
Modèles de page
Nous avons créé des modèles de démarrage afin que vous puissiez facilement er rapidement commencer à concevoir votre site Web avec un temps de configuration minimal. Ceux-ci sont basés sur la version SASS (modèle) de Sass Swing
Découvrez tous nos modèles de page