vrembem

Vrassement

Une bibliothèque de composants basée sur la méthodologie BEM.

À propos

Vrembem est une bibliothèque de composants frontaux écrite pour rendre disponible les modèles d'interface Web courants. Cela permet aux développeurs et aux concepteurs de mettre en œuvre des composants robustes dans leurs projets Web tout en les gardant flexibles et personnalisables grâce à l'utilisation de la méthodologie BEM et du langage d'extension CSS SASS.

Ce référentiel Vrembem est géré comme un monorepo qui contient tous les composants disponibles. Incluez tous les composants à l'aide du package Vrembem tout-en-un pratique.

Liens rapides

• Documentation
• Composants
• Changelog

Commencer

Utilisation de CDN

Si vous souhaitez utiliser Vrembem pour le prototypage ou si vous souhaitez simplement le prendre pour un essai routier, vous pouvez tirer parti de la version CDN UNPKG d'un composant ou de la bibliothèque Vrembem entière.

 <!-- Include Vrembem styles -->
< link rel =" stylesheet " href =" https://unpkg.com/vrembem/dist/styles.css " >

<!-- Render a component -->
< button data-modal-open =" modal-id " class =" link " > Open modal </ button >
< div id =" modal-id " class =" modal modal_size_sm " >
  < div class =" modal__dialog dialog " role =" dialog " aria-modal =" true " >
    < p > Hello, world! </ p >
    < button data-modal-close class =" link " > Close </ button >
  </ div >
</ div >

<!-- Include Vrembem JavaScript -->
< script src =" https://unpkg.com/vrembem " > </ script >

<!-- Instantiate the component rendered in the document -->
< script >
  const modal = new vrembem . Modal ( ) ;
  modal . init ( ) ;
</ script >

Voir également example.html pour une démo de travail plus complète de l'utilisation de Vrembem via CDN.

Références CDN

Vrembem emballe tous les faisceaux dans deux zones, dist contient tous les bundles et dev Ready Prêt compressés contient des versions non compressées (toutes en utilisant les mêmes noms de fichiers). Les composants qui sont expédiés avec JavaScript comprennent 4 paquets:

Taper	Extension	Description
Umd	.umd.js	Bundles de définition du module universel qui peuvent être utilisés directement dans le navigateur via une balise <script> . Il s'agit du fichier par défaut de pkg.unpkg pointant vers scripts.umd.js .
ESM	.esm.js	Bundles de module ES qui sont destinés à être utilisés avec des bundlers modernes comme WebPack 2 ou Rollup. Il s'agit du fichier par défaut de pkg.module pointant vers scripts.esm.js .
Cjs	.js	Les groupes CommonJS qui sont destinés aux bundlers plus anciens comme Browserify ou WebPack 1. Il s'agit du fichier par défaut de pkg.main pointant vers scripts.js .
Moderne	.modern.js	Bundles modernes spécialement conçus pour fonctionner dans tous les navigateurs modernes. Compile spécifiquement vers les navigateurs qui prennent en charge <script type="module"> qui sont plus petits et plus rapides à exécuter que le bundle esm .

Format de liaison CDN

# Styles
Uncompressed: https://unpkg.com/[COMPONENT]/dev/styles.css
Compressed:   https://unpkg.com/[COMPONENT]/dist/styles.css

# Scripts
Uncompressed: https://unpkg.com/[COMPONENT]/dev/scripts.umd.js
Compressed:   https://unpkg.com/[COMPONENT]/dist/scripts.umd.js

Par exemple, si vous vouliez inclure les styles et scripts pour le composant @vrembem/drawer , vous pouvez utiliser les balises de lien et de script suivantes:

 <!-- Component specific styles (expanded or compressed) -->
< link rel =" stylesheet " href =" https://unpkg.com/@vrembem/drawer/dev/styles.css " >
< link rel =" stylesheet " href =" https://unpkg.com/@vrembem/drawer/dist/styles.css " >

<!-- Component specific scripts -->
< script src =" https://unpkg.com/@vrembem/drawer/dev/scripts.umd.js " > </ script >
< script src =" https://unpkg.com/@vrembem/drawer/dist/scripts.umd.js " > </ script >

<!-- A modern bundle specially designed to work in all modern browsers with UMD fallback -->
< script type =" module " src =" https://unpkg.com/@vrembem/drawer/dist/scripts.modern.js " > </ script >
< script nomodule src =" https://unpkg.com/@vrembem/drawer/dist/scripts.umd.js " > </ script >

Utilisation de NPM

Pour utiliser un composant Vrembem, vous devrez d'abord l'installer comme dépendance. Pour cet exemple, nous utiliserons le composant modal:

npm install @vrembem/modal

CSS

Incluez le composant dans le fichier SASS Manifest de votre build:

 @use " @vrembem/modal " ;

Vrembem utilise le système de module SASS, transmettez des variables personnalisées à l'aide du mot-clé with .

 @use " @vrembem/modal " with (
  $background : #fff ,
  $background-alpha : 0.9
);

Javascrip

Certains packages ont également inclus des modules pour leurs fonctionnalités. Vous pouvez les inclure dans vos fichiers JavaScript en importation, instancier et initialiser:

 // Import your component
import Modal from "@vrembem/modal" ;

// Instantiate and initialize
const modal = new Modal ( ) ;
modal . init ( ) ;

Alternativement, vous pouvez utiliser l'option autoInit pour initialiser automatiquement et omettre éventuellement de l'enregistrement de l'instance dans une variable si l'API retourné ne sera pas nécessaire plus tard.

 new Modal ( { autoInit : true } ) ; 

Html

Incluez le balisage du composant dans votre projet. Utilisez les documents en ligne pour des informations et des exemples de code tels que le balisage et les modificateurs disponibles pour chaque composant.

 < button data-modal-open =" [unique-id] " > Modal </ button >
< div id =" [unique-id] " class =" modal " >
  < div class =" modal__dialog " role =" dialog " aria-modal =" true " >
    < button data-modal-close > Close </ button >
    ...
  </ div >
</ div > 

Tout-en-un

Il est également possible d'inclure tous les composants Vrembem en utilisant le package vrembem tout-en-un unique:

npm install vrembem

Via le fichier Sass Manifest de votre projet:

 @use " vrembem " ;

Remplacez les variables par défaut à l'aide du système de module SASS et du mot-clé with . Les variables sont préfixées par le nom de leur composant. Vous pouvez également personnaliser les variables centrales que tous les composants héritent de l'utilisation du préfixe $core- .

 @use " vrembem " with (
  $core-prefix-block : " vb- " ,
  $modal-background : #fff ,
  $modal-background-alpha : 0.9
);

Via le fichier manifeste JavaScript de votre projet:

 // Import all under the vb namespace
import * as vb from "vrembem" ;
const drawer = new vb . Drawer ( { autoInit : true } ) ;

// Or import individual components
import { Drawer } from "vrembem" ;
const drawer = new Drawer ( { autoInit : true } ) ;

Notez que les aides core n'ont pas besoin d'être initialisés car ce ne sont qu'un ensemble de fonctions utilitaires utiles.

Copyright et licence

Documentation Vrembem et Vrembem Copyright (C) 2024 Sebastian Nitu. Vrembem est publié sous la licence MIT et la documentation Vrembem est publiée sous Creative Commons.