Sass Swing le framework CSS moderne et complet de conception de page internet

Un framework CSS moderne, complet et modulaire

Une expérience utilisateur unifiée et augmentée avec un design cohérent et une meilleure prise en charge de l'accessibilité.

Deux thèmes de couleur cohérents de base : Light & Dark facilement modifiable sont disponibles.

Respect des bonnes pratiques d'écriture du code HTML en suivant la spécification WAI-ARIA.

Des composants additionnels et des fonctionnalités Javascript pratiques et inédites.

100% adaptatif et responsive

Conçu pour le mobile first et uniquement en utilisant les unités em, vh, vw rendant ainsi l'adaptation de manière fluide à toutes les résolutions possible et par rapport à la valeur de zoom de l'affichage.

Des variations de design intégrées ajustables, permettent d'obtenir un rythme vertical et des tailles de police dynamique cohérent et automatique

Augmentez la complexité simplement, pour une interface réactive complète, avec l'aide des @mixins SCSS inclus pour la gestion des points d'arrêts et des prefixes adequats de classes disponibles pour certains éléments comme les grilles.

Design 100% personnalisable

Doté d'un système de variables SCSS et CSS basé sur le format de couleur HSL. Vous avez le choix de configurer vos couleurs soit en écrasant les valeurs par défaut des variables SCSS ou bien directement en modifiant les variables CSS.

En plus des couleurs, vous pourrez aisément modifier les styles des polices, les tailles des marges, les ombres ect...

Grâce à l'utilisation des variables CSS vous pourrez tester dynamiquement vos valeurs dans les outils de développement intégrés de votre navigateur.

Concentrez vous sur l'expérience utilisateur

Gagnez du temps avec la mise en page et la mise en place des bonnes pratiques en UI/UX.
Améliorez l'accessibilité pour les utilisateurs de lecteurs d'écran.

Ajustez rapidement votre UI

En plus des nombreux composants vous simplifiant la mise en page. Des variables CSS dîtes utilitaires permettant d'ajuster rapidement et avec précision certaines propriétés sont disponibles.

Editez l'attribut style directement dans votre code HTML et de faites bien plus encore.

Prenez le contrôle total de votre design et de votre mise en page en toute simplicité.

Utilisez des composants avancés

Ajoutez facilement des boites à onglet, des boites de dialogue, des éléments cachés basculables, des notifications, des info-bulles, des diaporamas, et bien plus encore.

Configurez les composants exploitants le javascript directement dans votre HTML dans un format JSON. Un simple attribut data-js-??? suffit !

Améliorez l'accessibilité

En France, c'est plus de 4 millions de personnes qui sont touchées par une perte de vision de légère à grave
Source : www.statista.com.

Une documentation détaillée ainsi que des exemples de code spécifiques et des astuces sont présents pour aider tous utilisateurs à démarrer.

Cette documentation vous aidera à créer des pages web accessibles pour les personnes avec un handicap de qualité en respectant les bonnes pratiques.

Exploitez les outils en Javascript

Gagnez du temps, pas besoin de réinventer la roue grâce aux fonctions utiles intégrées comme clamp, randomBetween, waitForDOMEvent, debounce ect...

Accélérez le développement de vos composants et autres comportements dynamique grâce à cette boite à outils complémentaire.

Quelques exemples de pages minimalistes

Servez vous de ces exemples pour découvrir Sass Swing en action.

CLASS-LESS

Exemple minimaliste Class-Less avec mode mobile light du framework css Sass Swing

Exemple minimaliste Class-Less avec mode mobile dark du framework css Sass Swing

Exemple minimaliste Class-Less avec mode tablette light du framework css Sass Swing

Exemple minimaliste Class-Less avec mode tablette dark du framework css Sass Swing

PERSONNALISATION

Exemple minimaliste personalisation Class-Less avec mode desktop light du framework css Sass Swing

Exemple minimaliste personalisation Class-Less avec mode desktop dark du framework css Sass Swing

Exemple minimaliste personalisation Class-Less avec mode mobile light du framework css Sass Swing

Exemple minimaliste personalisation Class-Less avec mode mobile dark du framework css Sass Swing

Exemple minimaliste personalisation Class-Less avec mode tablette light du framework css Sass Swing

Exemple minimaliste personalisation Class-Less avec mode tablette dark du framework css Sass Swing

COMPOSANTS

Exemple minimaliste composants avec mode mobile light du framework css Sass Swing

Exemple minimaliste composants avec mode mobile dark du framework css Sass Swing

Exemple minimaliste composants avec mode tablette light du framework css Sass Swing

Exemple minimaliste composants avec mode tablette dark du framework css Sass Swing

VUE D'ENSEMBLE COMPLETE

Exemple minimaliste vue d'ensemble avec mode desktop light du framework css Sass Swing

Exemple minimaliste vue d'ensemble avec mode desktop dark du framework css Sass Swing

Exemple minimaliste vue d'ensemble avec mode mobile light du framework css Sass Swing

Exemple minimaliste vue d'ensemble avec mode mobile dark du framework css Sass Swing

Exemple minimaliste vue d'ensemble avec mode tablette light du framework css Sass Swing

Exemple minimaliste vue d'ensemble avec mode tablette dark du framework css Sass Swing

Rejoignez la communauté

Nous sommes ouverts aux commentaires et nous pouvons répondre à toutes les questions que vous pouvez vous poser à propos de Sass Swing.
Rejoignez nous dès à présent dans notre salon de discussion.

Vous avez trouver un bug, un mauvais comportement ou autre ?
N'hésitez pas postez un ticket.

Vous avez corrigé un de bug ? Vous avez codé un nouveau composant avec ou sans Javascript ? Vous voulez participer à la rédaction de la documentation ?

Forkez le projet et soumettez vos changements via une pull-request.
Toutes les informations sont disponibles sur le dépôt de Sass Swing

Supportez nous

Des modèles de pages pour bien commencer

Commencez vos projets en toute simplicité avec l'aide des modèles de Sass Swing

Les modèles sont en cours de réalisation, ils arrivent très prochainement....

Merci de patienter.