Scampi

Une biliothèque légère de composants Sass, html, js respectant la Charte Pidila

Télécharger Scampi v0.1.1 beta Voir les sources sur gitlab

En quatre mots

Robuste

Le cœur de Scampi constitue une base solide pour tous les projets.

Modulaire

Doté de styles minimaux, chaque composant peut être utilisé indépendamment des autres et personnalisé en fonction de votre projet.

Accessible

Le cœur et chaque composants sont conformes à la Charte Pidila. La documentation spécifie les points d'attention pour l'accessibilité.

Adaptable

Un module, rwd-utils, permet d’adapter la taille de base des caractères et la largeur des éléments en fonction des largeurs d’écran.

Caractéristiques

Liberté de présentation

Les styles attachés aux modules sont volontairement dépouillés, ce qui permet une personnalisation facile sans devoir surcharger.

Aucun système de grille n’est fourni afin de laisser le libre choix aux développeurs et intégrateurs d’utiliser celui de leur choix.

Compatibilité navigateur

Les composants ont un comportement et un aspect identiques sur Firefox, Chrome, Safari, IE 10+.

La gestion des préfixes est assurée par Autoprefixer (que nous utilisons en interne via une tâche Gulp lors de la compilation).

Une option de configuration permet de générer une feuille spécifique pour les vieux navigateurs et un module affiche une recommandation de mise à jour du navigateur. (module à venir fin 2016)

Modules disponibles

Nom et description des modules de Scampi
nom Description
adobe-blank À ajouter en complément du module fonticon pour cacher des alternatives aux icônes si elles sont utilisées en fonte d’icônes.
alert Messages d’alertes (information, succès, warning, danger/erreur).
blockquote Blocs de citation.
breadcrumb Fil d’ariane
browsehappy Affichage et styles d’un bloc recommandant la mise à jour des versions obsolètes d’Internet Explorer.
buttons Boutons et groupes de boutons.
fontface Gestion des webfonts.
fonticon Règles pour la mise en œuvre de fonte d’icônes ; à utiliser en parallèle avec le module adobe-blank pour l’accessibilité.
forms Formulaires.
grid Choix et mise en œuvre d’un système de grilles.
collapse Affichage/masquage de blocs de contenu.
rwd-utils Fonctions, mixins et styles utilitaires pour le responsive.
skip-links Liens d’évitement, aussi appelés liens d’accès rapides.
tables Tableaux (dont responsive).
u-comments Afficher/masquer des "post-it" de commentaires pendant la phase de développement.
u-debug Divers utilitaires de debug : points de rupture, maps, rythme horizontal.
u-palette Création automatique d’une palette des couleurs principales d’un site en fonction des valeurs renseignées dans les settings du projet.

Licence

Scampi et Scampi-Twig sont sous licence CeCILL-B (compatible GPL et MIT).

Générer des pages statiques avec Scampi-Twig

Scampi-Twig est un outil de création de pages statiques ou de gabarits d’intégration utilisant la bibliothèque de composants Scampi pour les CSS et Twig et Markdown (versions nodejs) pour la génération des pages html.

Nous l’utilisons pour fabriquer nos gabarits d'intégration html/css/js et pour la réalisation de petits sites comme celui-ci.

Aidez Scampi à s'améliorer : Liste mail - Signaler un bug - Contribuer