PRESENTATION

Découvrez la philosophie et les avantages de SassSwing.

SassSwing est un micro-framework CSS moderne et complet de conception de page internet, propre et léger. Il utilise les dernières spécificités CSS et SCSS.

Son objectif est de permettre une expérience utilisateur unifiée avec un design cohérent et d'améliorer l'accessibilité au maximum, en utilisant autant que possible les éléments sémantique HTML natifs tout en tenant compte des bonnes pratiques générales.

Une conception web, gracieuse, rapide simplement et facilement.

SassSwing est totalement responsive et adaptatif. Il se base sur une conception de page en mobile-first. Il s'aura adapter automatiquement vos sites web quelque soit l'appareil de l'utilisateur et le niveau de zoom de l'affichage. Les meilleurs pratiques de mise en page sont gérées afin que vous ayez à faire le moins de modifications, pour permettre un développement accéléré.

Afin d'avoir une lecture la plus fluide possible, le rythme vertical entre les différents éléments constituant une page est automatique. La taille des polices, des images, ainsi que les marges internes et externes sont dynamiques et sauront s'adapter en toute circonstance.

SassSwing utilise la méthodologie BEM pour le nommage des classes. A l'instar de nombreux framework CSS tel que Bootstrap, Tailwind ou autres, SassSwing contient que très peu de classe utilitaires. Il est livré avec 2 thèmes cohérents : Light & Dark qui permettent de personnaliser l'affichage de nombreux éléments natifs comme les boutons, les liens, les formulaires, les tableaux ect...

Dans le but, de rester le plus léger possible, SassSwing comprend des composants réactifs n'utlisant pas de scripts Javascript, tel que les barres de navigation, les carrousels, des éléments rétractable ect...

Des composants supplémentaires pour aller encore plus loin.

En complément, SassSwing fournit des composants additionnels qui ne sont pas inclus dans la version de base par défaut. Vous aurez par exemple accès à un fil d'arianne, un menu de pagination, des badges, des panneaux de notification, des classes d'animations ect...

Certains de ces composants utilisent une ou plusieurs classes Javascript pour assurer leur bon fonctionnement. Pour les utiliser vous devrez les importer, dans votre fichier SCSS ou importer le fichier CSS disponible en sus.

Des fonctionnalités Javascript, pratiques et inédites

Pour augmenter l'expérience utilisateur et facilité le développement d'applications moderne, SassSwing propose quelques classes Javascript sous forme de module ESM configurables dans votre code HTML au format JSON simplement et directement gràce à des attributs spécifiques.

Afin d'ajouter de l'interactivité, ces scripts, vous permettront entre autres, de paginer, trier, et filtrer des tableaux. De gérer des animations au scroll. D'afficher des notifications utilisateurs. De faire des glisser/déposer (drag & drop). D'étendre l'élément "Select" ect...

LICENCE

Sass Swing est distribué sous la licence MIT

Copyright (c) 2021-2022 Jérôme Delauney et autres contributeurs

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

COMMENCER A UTILISER SASS SWING

Sélectionnez ci-dessous, la solution que vous souhaitez en fonction de vos préférences.

SOLUTION N°1

Utiliser Sass Swing directement dans vos productions via le serveur CDN unpkg ou js-deliver.

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.

  <link rel="stylesheet" href="https://unpkg.com/sass-swing@latest/dist/css/sass-swing-basic.min.css">

Version complète

  <link rel="stylesheet" href="https://unpkg.com/sass-swing@latest/dist/css/sass-swing.min.css">

Inclure le javascript

  <script src="https://unpkg.com/sass-swing@latest/dist/js/sass-swing.min.js" defer>

SOLUTION N°2

Vous pouvez également installer les sources de Sass Swing directement via NPM

  npm install sass-swing

Importations

Dans votre fichier SCSS

@use "sass-swing";

Dans votre code Javascript

import * as SassSwing from "sass-swing";

Modèle de page

Vous pouvez également cloner le Starter Kit pour débuter à utiliser Sass Swing et développer vos pages web.

SOLUTION N°3

PREREQUIS

• npm

  npm install npm@latest -g

Téléchargez, ou clonez les sources pour nous aider et contribuer au développement de Sass Swing.

  git clone https://github.com/jdelauney/sass-swing.git

Installation

npm install

Build

npm run build

Build documentation

npm run build:docs

CREDITS

👤 Jérôme Delauney

• Website: https://jdelauney.github.io
• Github: @jdelauney
• LinkedIn: @Jérôme Delauney
• Twitter: #Jérôme Delauney

SOUTENEZ NOUS

Donnez nous une étoile ⭐️ si vous trouvez ce projet intéressant ou qu'il vous aide !

CONTRIBUEZ

Les contributions sont ce qui fait de la communauté open source un endroit incroyable pour apprendre, inspirer et créer.

Toutes les contributions que vous faites sont grandement appréciées.

Si vous avez une suggestion qui améliorerait cela, veuillez "forker" le dépôt et créer une "pull request". Vous pouvez également simplement ouvrir une "issue" avec la balise 'amélioration' ou autre.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/TheFeature)
   • Or switch to existing branch (git checkout feature/TheFeatureToFix)
3. Commit your Changes
   • Commit a new feature (git commit -m 'feat: do something')
   • Or commit a fix (git commit -m 'fix: Correct something')
4. Push to the Branch (git push origin feature/TheFeature)
5. Open a Pull Request

N'oubliez pas de mettre une étoile ⭐️ au projet !

Merci encore !

some part of this README was generated with ❤️ by readme-md-generator