vrembem

Vrembem

Eine Komponentenbibliothek basierend auf der BEM -Methodik.

Um

VREMBEM ist eine Front-End-Komponentenbibliothek, die geschrieben wurde, um gemeinsame Weboberflächenmuster verfügbar zu machen. Auf diese Weise können Entwickler und Designer robuste Komponenten in ihre Webprojekte implementieren, während sie durch die Verwendung der BEM -Methodik und der SASS -CSS -Erweiterungssprache flexibel und anpassbar bleiben.

Dieses VREMBEM -Repository wird als Monorepo verwaltet, das alle verfügbaren Komponenten enthält. Fügen Sie alle Komponenten mit dem praktischen All-in-One-VremBem-Paket ein.

Schnelle Links

• Dokumentation
• Komponenten
• Changelog

Erste Schritte

Mit CDN

Wenn Sie VREMBEM für Prototyping verwenden möchten oder nur für eine Testfahrt mitnehmen möchten, können Sie die UNPKG -CDN -Version einer Komponente oder die gesamte VremBem -Bibliothek nutzen.

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

Siehe auch example.html für eine umfassendere funktionierende Demo der Verwendung von VremBem über CDN.

CDN -Referenzen

Vrembem -Pakete Alle Bündel in zwei Bereichen, dist enthält alle komprimierten Produktionsbündel und dev enthält unkomprimierte Versionen (alle verwenden dieselben Dateinamen). Komponenten, die mit JavaScript versandt werden, umfassen 4 Bündel:

Typ	Verlängerung	Beschreibung
Umd	.umd.js	Universal Modul Definitionsbündel, die direkt im Browser über ein <script> -Tag verwendet werden können. Dies ist die Standarddatei von pkg.unpkg , die auf scripts.umd.js verweist.
ESM	.esm.js	ES -Modulbündel, die für die Verwendung mit modernen Bundlern wie Webpack 2 oder Rollup bestimmt sind. Dies ist die Standarddatei von pkg.module , die auf scripts.esm.js zeigt.
CJS	.js	CommonJS -Bündel, die für ältere Bundler wie Browserify oder Webpack bestimmt sind. Dies ist die Standarddatei von pkg.main , die auf scripts.js hinweisen.
Modern	.modern.js	Moderne Bündel, die speziell für alle modernen Browser ausgestattet sind. Kompiliert speziell für Browser, die <script type="module"> unterstützen, die kleiner und schneller ausführen können als das esm -Bündel.

CDN -Linkformat

# 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

Wenn Sie beispielsweise die Stile und Skripte für die @vrembem/drawer Komponente einfügen möchten, können Sie die folgenden Link- und Skript -Tags verwenden:

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

Verwenden von NPM

Um eine VREMBEM -Komponente zu verwenden, müssen Sie sie zunächst als Abhängigkeit installieren. In diesem Beispiel verwenden wir die modale Komponente:

npm install @vrembem/modal

CSS

Fügen Sie die Komponente in die Sass Manifest -Datei Ihres Builds ein:

 @use " @vrembem/modal " ;

VremBem verwendet das Sass -Modulsystem und übergibt benutzerdefinierte Variablen mit dem with Keyword.

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

JavaScript

Einige Pakete haben auch Module für ihre Funktionalität enthalten. Sie können diese in Ihre JavaScript -Dateien aufnehmen, indem Sie importieren, instanziieren und initialisieren:

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

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

Alternativ können Sie die Option autoInit verwenden, um das automatische Initialisieren und optional wegzulassen, um die Instanz in einer Variablen zu speichern, wenn die zurückgegebene API nicht später benötigt wird.

 new Modal ( { autoInit : true } ) ; 

Html

Fügen Sie das Markup der Komponente in Ihr Projekt ein. Verwenden Sie die Online -Dokumente für Informationen und Code -Beispiele wie Markup und verfügbare Modifikatoren für jede Komponente.

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

All-in-One

Es ist auch möglich, alle VREMBEM-Komponenten mit dem einzelnen All-in-One- vrembem -Paket einzubeziehen:

npm install vrembem

Über die Sass Manifest -Datei Ihres Projekts:

 @use " vrembem " ;

Überschreiben Sie Standardvariablen mit dem Sass -Modulsystem und dem with Schlüsselwort. Variablen werden durch ihren Komponentennamen vorangestellt. Sie können auch Kernvariablen anpassen, die alle Komponenten mithilfe des $core- Präfixs erben.

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

Über die JavaScript -Manifestdatei Ihres Projekts:

 // 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 } ) ;

Beachten Sie, dass core nicht initialisiert werden müssen, da sie nur eine Reihe hilfreicher Nutzfunktionen sind.

Urheberrecht und Lizenz

VREMBEM- und VREMBEM -Dokumentation Copyright (C) 2024 Sebastian Nitu. Vrembem wird unter der MIT -Lizenz veröffentlicht und die VremBem -Dokumentation wird unter Creative Commons veröffentlicht.