bem components
v5.1.1
bem-components é uma biblioteca de código aberto que fornece um conjunto de componentes visuais prontos para criar interfaces da Web.
A biblioteca fornece temas de design. Esta versão apresenta o tema islands , que implementa o novo design de Yandex. Os recursos incluem suportar vários temas de uma só vez e criar novos temas.
Informações adicionais
common.blocks - Apoio a quaisquer dispositivos e navegadores.desktop.blocks - Suporte aos navegadores de mesa.touch.blocks - Implementação de recursos específicos para plataformas de toque.touch-phone.blocks -Implementação de recursos específicos para smartphones.touch-pad.blocks -Implementação de recursos específicos para tablets.design/<common|desktop|touch|touch-phone|touch-pad>.blocks -Implementação de vários designs (temas). Desktop
Tocar
Para apoiar o Internet Explorer 8, você deve adicionar:
*.ie.styl para a página. Para fazer isso, especifique -os na configuração do Build (consulte este exemplo) e adicione comentários na seção page (consulte este exemplo). Você também pode ativar os estilos para o Internet Explorer 8 no nível do modelo. Montadores
Otimizadores
Análise de código
Outro
Existem várias maneiras de começar a usar bem-components . A melhor abordagem depende dos requisitos do seu projeto e de sua compatibilidade com as tecnologias e ferramentas da biblioteca, bem como em sua experiência com projetos BEM.
Escolha o método mais adequado para o seu projeto:
| Dist | Fonte | Compilado |
|---|---|---|
| CSS pré-montado e modelos de código e biblioteca JavaScript. Integrado pela ligação à página. Não requer montagem ou compatibilidade com seu projeto. | O código -fonte completo da biblioteca. Requer montagem. Seu projeto deve ser totalmente compatível com as tecnologias e ferramentas da biblioteca. | O código -fonte completo da biblioteca. Requer montagem. Difere do método de origem, pois o PostCSS é compilado em CSS. Adequado para projetos onde o PostCSS não é usado. |
A maneira como você está usando a biblioteca determina como integrá -la ao seu projeto:
Recomendamos o uso do ENB ou BEM-Tools para integrar a biblioteca.
Como exemplo, você pode usar o Project-Stub, onde a biblioteca está ativada por padrão. Você também pode criar um projeto e usar o gerador Yo para conectar a biblioteca (isso permite criar a configuração do projeto necessária).
A maneira mais fácil de conectar a biblioteca ao projeto é baixar os arquivos de biblioteca pré-montados e usar elementos <link> e <script> para adicioná-los às páginas HTML. Existem várias maneiras de fazer isso:
Para obter informações sobre como usar os arquivos da biblioteca conectada, consulte Trabalhando com a biblioteca.
Estrutura da biblioteca pré-montada
Existem conjuntos separados de arquivos disponíveis para três plataformas:
Cada conjunto inclui:
bem-components.css -estilos;bem-components.ie.css -Styles for IE8 (mais informações);bem-components.js -JavaScript;bem-components.bemhtml.js -modelos de beMhtml;bem-components.bh.js -MODELOS BH;bem-components.js+bemhtml.js -combina código JavaScript e modelos BEMHTML para usar modelos no navegador;bem-components.js+bh.js -combina o código JavaScript e os modelos BH para usar modelos no navegador;bem-components.no-autoinit.js -javascript sem inicialização automática. Use-o se precisar escrever seu próprio código no i-bem.js ;bem-components.no-autoinit.js+bemhtml.js ;bem-components.no-autoinit.js+bh.jsCada conjunto também inclui as versões de desenvolvimento dos mesmos arquivos (preservando a formatação e comentários originais).
A maneira mais rápida e fácil de conectar a biblioteca ao projeto é adicionar os elementos <link> e <script> às páginas HTML:
< link rel =" stylesheet " href =" https://yastatic.net/bem-components/latest/desktop/bem-components.css " >
< script src =" https://yastatic.net/bem-components/latest/desktop/bem-components.js+bemhtml.js " > </ script > Padrão para conectar um arquivo do cdn: //yastatic.net/library-name/version/platform/file-name .
Exemplo: //yastatic.net/bem-components/latest/desktop/bem-components.dev.js+bemhtml.js .
Selecione a versão da biblioteca apropriada e faça o download do arquivo. Descompactá -lo. Adicione os arquivos à página usando elementos <link> e <script> :
< link rel =" stylesheet " href =" desktop/bem-components.css " >
< script src =" desktop/bem-components.js+bemhtml.js " > </ script > O código da biblioteca está no github: https://github.com/bem/bem-comptonents.
Para executar a construção, use estes comandos:
# Clone the library source code
git clone https://github.com/bem/bem-components.git
# Switch to the library folder
cd bem-components
# Install the required dependencies
npm install
# Build Dist
npm run dist
Como resultado da compilação, os arquivos estarão disponíveis na pasta bem-components-dist . Conecte os arquivos no HTML da página:
< link rel =" stylesheet " href =" bower_components/bem-components-dist/desktop/bem-components.css " >
< script src =" bower_components/bem-components-dist/desktop/bem-components.js+bemhtml.js " > </ script > Desde que o Bower já esteja em seu projeto, execute o seguinte comando:
bower i bem/bem-components-dist
Como resultado da compilação, os arquivos estarão disponíveis na pasta bem-components-dist . Conecte os arquivos da mesma maneira que o método anterior:
< link rel =" stylesheet " href =" bower_components/bem-components-dist/desktop/bem-components.css " >
< script src =" bower_components/bem-components-dist/desktop/bem-components.js+bemhtml.js " > </ script > Existem duas etapas para trabalhar com a biblioteca:
O primeiro passo é sempre o mesmo. O segundo passo pode ser realizado de três maneiras diferentes, que você pode combinar como desejar:
Método 1. Copie o HTML do exemplo. Para fazer isso, vá para a guia HTML no cabeçalho do exemplo.
Essa é a abordagem mais fácil, mas se os modelos forem atualizados em versões futuras da biblioteca, você deverá fazer as alterações manualmente em cada bloco atualizado.
Método 2. Use o modelo no navegador. A montagem da biblioteca Dist inclui modelos pré-montados BEMHTML e BH para escolher.
Para fazer isso, copie o código da amostra da documentação e cole -o no código HTML da página. Use a guia BEMJSON no cabeçalho do exemplo.
O código HTML da página ficará assim:
<!DOCTYPE html >
< html >
< head >
< meta charset =" utf-8 " >
< title > bem-components as a library </ title >
< link rel =" stylesheet " href =" https://yastatic.net/bem-components/latest/desktop/bem-components.css " >
</ head >
< body class =" page page_theme_islands " >
< form class =" form " action =" / " > </ form >
< script src =" https://yastatic.net/bem-components/latest/desktop/bem-components.no-autoinit.js+bemhtml.js " > </ script >
< script >
modules . require ( [ 'i-bem__dom' , 'BEMHTML' , 'jquery' , 'i-bem__dom_init' ] , function ( BEMDOM , BEMHTML , $ , init ) {
var html = BEMHTML . apply ( {
block : 'select' ,
mods : { mode : 'check' , theme : 'islands' , size : 'm' } ,
name : 'select1' ,
val : [ 2 , 3 ] ,
text : 'Conference programme' ,
options : [
{ val : 1 , text : 'Report' } ,
{ val : 2 , text : 'Master class' } ,
{ val : 3 , text : 'Round Table' }
]
} ) ;
BEMDOM . append ( $ ( '.form' ) , html ) ;
// NOTE: explicitly call `init();` if you need to initialize blocks from HTML markup
} ) ;
</ script >
</ body >
</ html >Em contraste com o primeiro método, esse código não exigirá alterações na marcação quando a biblioteca for atualizada para uma nova versão. No entanto, a marcação gerada pelo cliente também pode não ser indexada pelos mecanismos de pesquisa.
Método 3 . Execute {BEMHTML,BH}.apply() em node.js e dê ao navegador o html preparado:
var BEMHTML = require ( './dist/desktop/bem-components.bemhtml.js' ) . BEMHTML ;
BEMHTML . apply ( {
block : 'select' ,
mods : { mode : 'check' , theme : 'islands' , size : 'm' } ,
name : 'select1' ,
val : [ 2 , 3 ] ,
text : 'Conference programme' ,
options : [
{ val : 1 , text : 'Report' } ,
{ val : 2 , text : 'Master class' } ,
{ val : 3 , text : 'Round Table' }
]
} ) ; // returns HTML line A biblioteca consiste em blocos, que você pode ver representado visualmente na vitrine bem-components . Os blocos têm estados que determinam o modelo comportamental. O estado de um bloco é expresso através de modificadores e campos especializados. Alterar um modificador cria um evento que pode ser usado para trabalhar com o bloco.
Não há necessidade de criar um evento SEDE especial se você puder trabalhar com o evento Modificador Alterar. Dependendo do que é usado para alterar o estado de um componente (um modificador ou um campo), diferentes eventos são usados:
value , o evento change é usado.bem-components Os controles nos bem-components podem ser usados como base para a criação de outros componentes da biblioteca. Tais controles não têm modelos como no HTML e podem ser usados para tarefas que não exigem a semântica de um modelo HTML específico.
Como exemplo, pense no "Modelo Comportamental" para o HtmlinputElement, que é uma interface de nível superior projetada especificamente para editar dados. O que é diferente nos blocos bem-components é que eles podem ser usados como base de um bloco em outra biblioteca que resolverá o mesmo problema. Mas, junto com isso, eles podem servir a outros propósitos na interface que não requerem semântica HTML input .
focused Os controles nos componentes do BEM têm dois tipos de foco, que são definidos usando os modificadores focused e focused-hard . O tipo de foco determina a aparência do controle.
O modificador é escolhido automaticamente com base em como o foco está definido:
focused - definido para um clique no mouse no controle.focused-hard definido quando o controle é selecionado usando o teclado ou através de JavaScript. Ele destaca o componente mais obviamente quando obtém o foco. Por exemplo, no tema Islands , a maioria dos controles recebe uma borda extra quando é definido focused-hard . Obtenha fontes:
$ git clone git://github.com/bem/bem-components.git
$ cd bem-componentsInstale dependências (das ferramentas):
$ npm install Para executar ferramentas instaladas localmente, use export PATH=./node_modules/.bin:$PATH ou qualquer método alternativo.
Instale bibliotecas dependentes:
$ bower installCrie exemplos e testes:
$ npm run build-allInicie o servidor de desenvolvimento:
$ npm start
$ open http://localhost:8080/Nota: Para obter informações sobre como montar blocos individuais, consulte os testes da seção para modelos.
Análise de código:
$ npm run lint O comando npm run test-specs inicia testes de unidade no JS.
Para iniciar a montagem baseada em pontos, use o comando enb make specs desktop.specs/<block-name> (por exemplo, enb make specs desktop.specs/input ).
Os testes serão executados automaticamente no Travis para cada solicitação de tração.
Hermione é usado para testes de layout.
Os testes para cada bloco são armazenados em um arquivo separado block-name.hermione.js no diretório hermione/ . Localmente, o teste é executado manualmente. No Travis, os testes são executados automaticamente. Para grade de selênio, o serviço de saucelabs é usado.
Para executar testes localmente, você precisa:
SAUCE_USERNAME e SAUCE_ACCESS_KEY ).sc (sauceConnect) e aguarde a abertura do túnel.hermione .hermione gui .Ao desenvolver novos testes para acelerar a execução local:
.hermione.conf.js , altere a opção gridUrl para http://localhost:4444/ . Para obter mais informações sobre o uso de Hermione com vários back -ends, leia o artigo Hermione Quick Start.
NOTA: Você precisa salvar capturas de tela dos saucelabs no repositório. Isso ajuda a evitar discrepâncias ao renderizar fontes.
Antes de cometer imagens de referência novas ou modificadas, você deve:
As ferramentas de criação da biblioteca permitem criar e executar testes nos modelos BEMHTML e BH Block.
Adicione um teste para um bloco
[block name].tmpl-specs no diretório do bloco no nível necessário. Os arquivos de teste serão armazenados neste diretório.Vários testes podem ser gravados para um bloco e, portanto, cada teste consiste em dois arquivos (Bemjson e HTML) com o mesmo nome.
desktop.blocks
└── myblocks
├── myblock.bemhtml.js
├── myblock.bh.js
├── ...
└── myblock.tmpl-specs
├── 10-default.bemjson.js
├── 10-default.html
├── 20-advanced.bemjson.js
└── 20-advanced.html
Para construir e executar testes, use:
magic run tmpl-specsPara criar testes no nível de definição necessário, use:
magic make desktop.tmpl-specsPara criar testes apenas para um bloco específico, use:
magic make desktop.tmpl-specs/buttonSe o procedimento de construção for bem -sucedido, os testes serão executados automaticamente e você verá todos os resultados dos testes. Se o resultado da aplicação do modelo não corresponder com a amostra de bloco no HTML, você verá um erro no log indicando como ele difere da amostra de bloco.
Todos os testes são executados automaticamente usando o Travis em cada solicitação de tração.
As tarefas atuais estão listadas em um conselho ágil especial.
Status da tarefa:
Código e documentação © 2012 Yandex LLC. Código liberado sob a licença pública de Mozilla 2.0.
