Open Source Ecosystems

Proposer une Feature

PRESENTATION

Dcouvrez la philosophie et les avantages de SassSwing.

SassSwing est un micro-framework CSS moderne et complet de conception de page internet, propre et lger. Il utilise les dernires spcificits CSS et SCSS.

Son objectif est de permettre une exprience utilisateur unifie avec un design cohrent et d'amliorer l'accessibilit au maximum, en utilisant autant que possible les lments smantique HTML natifs tout en tenant compte des bonnes pratiques gnrales.

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 gres afin que vous ayez faire le moins de modifications, pour permettre un dveloppement acclr.

Afin d'avoir une lecture la plus fluide possible, le rythme vertical entre les diffrents lments 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 mthodologie BEM pour le nommage des classes. A l'instar de nombreux framework CSS tel que Bootstrap, Tailwind ou autres, SassSwing contient que trs peu de classe utilitaires. Il est livr avec 2 thmes cohrents : Light & Dark qui permettent de personnaliser l'affichage de nombreux lments natifs comme les boutons, les liens, les formulaires, les tableaux ect...

Dans le but, de rester le plus lger possible, SassSwing comprend des composants ractifs n'utlisant pas de scripts Javascript, tel que les barres de navigation, les carrousels, des lments rtractable ect...

Des composants supplmentaires pour aller encore plus loin.

En complment, SassSwing fournit des composants additionnels qui ne sont pas inclus dans la version de base par dfaut. Vous aurez par exemple accs 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 fonctionnalits Javascript, pratiques et indites

Pour augmenter l'exprience utilisateur et facilit le dveloppement d'applications moderne, SassSwing propose quelques classes Javascript sous forme de module ESM configurables dans votre code HTML au format JSON simplement et directement grce des attributs spcifiques.

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

LICENCE

Sass Swing est distribu sous la licence MIT

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

Slectionnez ci-dessous, la solution que vous souhaitez en fonction de vos prfrences.

SOLUTION N1

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 minifis et non minifis. 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 complte

  <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 N2

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";

Modle de page

Vous pouvez galement cloner le Starter Kit pour dbuter utiliser Sass Swing et dvelopper vos pages web.

SOLUTION N3

PREREQUIS

npm
```
npm install npm@latest -g
```

Tlchargez, ou clonez les sources pour nous aider et contribuer au dveloppement 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

Jrme Delauney

SOUTENEZ NOUS

Donnez nous une toile si vous trouvez ce projet intressant ou qu'il vous aide !

CONTRIBUEZ

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

Toutes les contributions que vous faites sont grandement apprcies.

Si vous avez une suggestion qui amliorerait cela, veuillez "forker" le dpt et crer une "pull request". Vous pouvez galement simplement ouvrir une "issue" avec la balise 'amlioration' ou autre.

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