Usage

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.

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>

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

Structure 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

Si 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

Supportez Sass Swing