vrembem

Vrembem

Uma biblioteca de componentes baseada na metodologia BEM.

Sobre

O VREMBEM é uma biblioteca de componentes front-end escrita para disponibilizar padrões de interface da Web comuns. Isso permite que desenvolvedores e designers implementem componentes robustos em seus projetos da Web, mantendo -os flexíveis e personalizáveis ​​através do uso da metodologia BEM e da linguagem de extensão SASS CSS.

Este repositório VREMBEM é gerenciado como um monorepo que contém todos os componentes disponíveis. Inclua todos os componentes usando o conveniente pacote vrembem all-in-one.

Links rápidos

• Documentação
• Componentes
• Changelog

Começando

Usando CDN

Se você deseja usar o VREMBEM para prototipagem ou apenas desejar fazê -lo para uma unidade de teste, pode aproveitar a versão CDN UNSPKG de um componente ou toda a biblioteca 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 >

Consulte também example.html para uma demonstração de trabalho mais abrangente do uso do VREMBEM via CDN.

Referências de CDN

Pacotes VREMBEM Todos os pacotes em duas áreas, dist contém todos os pacotes de produção compactados e dev contém versões não compactadas (todas usando os mesmos nomes de arquivos). Os componentes que são enviados com JavaScript incluem 4 pacotes:

Tipo	Extensão	Descrição
Umd	.umd.js	Pacotes de definição de módulo universal que podem ser usados ​​diretamente no navegador por meio de uma tag <script> . Este é o arquivo padrão de pkg.unpkg apontando para scripts.umd.js .
Esm	.esm.js	Pacotes de módulos ES destinados ao uso com pacotes modernos como Webpack 2 ou Rollup. Este é o arquivo padrão do pkg.module apontando para scripts.esm.js .
CJS	.js	Pacotes Commonjs destinados a pacotes mais velhos como BrowSerify ou Webpack 1. Este é o arquivo padrão do pkg.main apontando para scripts.js .
Moderno	.modern.js	Pacotes modernos especialmente projetados para trabalhar em todos os navegadores modernos. Compila especificamente aos navegadores que suportam <script type="module"> que são menores e mais rápidos para executar que o pacote esm .

Formato de link 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

Por exemplo, se você quiser incluir os estilos e scripts para o componente @vrembem/drawer , pode usar as seguintes tags de link e script:

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

Usando NPM

Para usar um componente vrembem, você primeiro precisará instalá -lo como uma dependência. Para este exemplo, usaremos o componente modal:

npm install @vrembem/modal

CSS

Inclua o componente no arquivo manifesto SASS da sua compilação:

 @use " @vrembem/modal " ;

O VREMBEM usa o sistema de módulos Sass ', passe em variáveis ​​personalizadas usando a palavra -chave with a palavra -chave.

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

JavaScript

Alguns pacotes também incluíram módulos para sua funcionalidade. Você pode incluí -los em seus arquivos JavaScript, importando, instanciados e inicializando:

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

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

Como alternativa, você pode usar a opção autoInit para inicializar automaticamente e opcionalmente omitir salvar a instância em uma variável se a API retornada não for necessária posteriormente.

 new Modal ( { autoInit : true } ) ; 

Html

Inclua a marcação do componente em seu projeto. Use os documentos on -line para obter exemplos de informações e código, como marcação e modificadores disponíveis para cada componente.

 < 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

Também é possível incluir todos os componentes do VREMBEM usando o pacote Single All-In-One vrembem :

npm install vrembem

Através do arquivo de manifesto SASS do seu projeto:

 @use " vrembem " ;

Substitua as variáveis ​​padrão usando o sistema de módulos do SASS e a with -chave. As variáveis ​​são prefixadas pelo nome do componente. Você também pode personalizar variáveis ​​principais que todos os componentes herdam do uso do $core- prefixo.

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

Através do arquivo de manifesto JavaScript do seu projeto:

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

Observe que core ajudantes não precisam ser inicializados, pois são apenas um conjunto de funções úteis.

Direitos autorais e licença

Documentação de Vrembem e Vrembem Copyright (c) 2024 Sebastian Nitu. O VREMBEM é divulgado sob a licença do MIT e a documentação do VREMBEM é divulgada no Creative Commons.