vrembem

Vrembem

Perpustakaan komponen berdasarkan metodologi BEM.

Tentang

Vrembem adalah pustaka komponen front-end yang ditulis untuk menyediakan pola antarmuka web umum. Hal ini memungkinkan pengembang dan desainer untuk menerapkan komponen yang kuat ke dalam proyek web mereka sambil tetap fleksibel dan dapat disesuaikan melalui penggunaan metodologi BEM dan bahasa ekstensi CSS SASS.

Repositori Vrembem ini dikelola sebagai monorepo yang berisi semua komponen yang tersedia. Sertakan semua komponen menggunakan paket Vrembem all-in-one yang nyaman.

Tautan cepat

• Dokumentasi
• Komponen
• Changelog

Memulai

Menggunakan CDN

Jika Anda ingin menggunakan Vrembem untuk membuat prototipe atau hanya ingin mengambilnya untuk test drive, Anda dapat memanfaatkan versi CDN UNPKG dari komponen atau seluruh perpustakaan Vrembem.

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

Juga lihat example.html untuk demo kerja yang lebih komprehensif menggunakan Vrembem melalui CDN.

Referensi CDN

Paket Vrembem Semua bundel di dua area, dist berisi semua bundel siap produksi terkompresi dan dev berisi versi yang tidak terkompresi (semua menggunakan nama file yang sama). Komponen yang dikirimkan dengan JavaScript mencakup 4 bundel:

Jenis	Perpanjangan	Keterangan
Umd	.umd.js	Bundel definisi modul universal yang dapat digunakan langsung di browser melalui tag <script> . Ini adalah file default dari pkg.unpkg yang menunjuk ke scripts.umd.js .
Esm	.esm.js	Bundel modul ES yang dimaksudkan untuk digunakan dengan bundler modern seperti Webpack 2 atau Rollup. Ini adalah file default dari pkg.module yang menunjuk ke scripts.esm.js .
CJS	.js	Bundel CommonJs yang ditujukan untuk bundler yang lebih tua seperti Browserify atau Webpack 1. Ini adalah file default dari pkg.main yang menunjuk ke scripts.js .
Modern	.modern.js	Bundel modern yang dirancang khusus untuk bekerja di semua browser modern. Secara khusus menyusun ke peramban yang mendukung <script type="module"> yang lebih kecil dan lebih cepat untuk dieksekusi daripada bundel esm .

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

Misalnya, jika Anda ingin memasukkan gaya dan skrip untuk komponen @vrembem/drawer , Anda dapat menggunakan tautan dan tag skrip berikut:

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

Menggunakan NPM

Untuk menggunakan komponen Vrembem, pertama -tama Anda harus menginstalnya sebagai ketergantungan. Untuk contoh ini kita akan menggunakan komponen modal:

npm install @vrembem/modal

CSS

Sertakan komponen dalam file manifes sass build Anda:

 @use " @vrembem/modal " ;

Vrembem menggunakan sistem modul sass, lulus dalam variabel khusus menggunakan kata kunci with .

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

Javascript

Beberapa paket juga telah menyertakan modul untuk fungsionalitasnya. Anda dapat memasukkan ini ke dalam file JavaScript Anda dengan mengimpor, instantiate dan menginisialisasi:

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

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

Atau, Anda dapat menggunakan opsi autoInit untuk menginisialisasi otomatis dan secara opsional menghilangkan menyimpan instance ke variabel jika API yang dikembalikan tidak akan diperlukan nanti.

 new Modal ( { autoInit : true } ) ; 

Html

Sertakan markup komponen ke dalam proyek Anda. Gunakan dokumen online untuk informasi dan contoh kode seperti markup dan pengubah yang tersedia untuk setiap komponen.

 < 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

Dimungkinkan juga untuk memasukkan semua komponen Vrembem menggunakan paket vrembem all-in-one tunggal:

npm install vrembem

Melalui file manifes sass proyek Anda:

 @use " vrembem " ;

Override variabel default menggunakan sistem modul sass dan kata kunci with . Variabel diawali dengan nama komponennya. Anda juga dapat menyesuaikan variabel inti yang semua komponen mewarisi dari menggunakan awalan $core- .

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

Melalui file manifes javascript proyek Anda:

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

Perhatikan bahwa pembantu core tidak perlu diinisialisasi karena mereka hanya satu set fungsi utilitas yang bermanfaat.

Hak Cipta dan Lisensi

Dokumentasi Vrembem dan Vrembem Hak Cipta (C) 2024 Sebastian Nitu. Vrembem dirilis di bawah lisensi MIT dan dokumentasi Vrembem dirilis di bawah Creative Commons.