bem components
v5.1.1
bem-components es una biblioteca de código abierto que proporciona un conjunto de componentes visuales (bloques) preparados para crear interfaces web.
La biblioteca proporciona temas de diseño. Esta versión presenta el tema islands , que implementa el nuevo diseño de Yandex. Las características incluyen admitir múltiples temas a la vez y crear nuevos temas.
Información adicional
common.blocks : soporte de cualquier dispositivo y navegador.desktop.blocks - Soporte de navegadores de escritorio.touch.blocks : implementación de características específicas para plataformas táctiles.touch-phone.blocks : implementación de características específicas para teléfonos inteligentes.touch-pad.blocks : implementación de características específicas para tabletas.design/<common|desktop|touch|touch-phone|touch-pad>.blocks -Implementación de varios diseños (temas). De oficina
Tocar
Para admitir Internet Explorer 8, debe agregar:
*.ie.styl a la página. Para hacer esto, especifíquelos en la configuración de compilación (consulte este ejemplo) y agregue comentarios en la sección page (ver este ejemplo). También puede habilitar Styles for Internet Explorer 8 a nivel de plantilla. Ensambladores
Optimizadores
Análisis de código
Otro
Hay varias formas de comenzar a usar bem-components . El mejor enfoque depende de los requisitos de su proyecto y su compatibilidad con las tecnologías y herramientas de la biblioteca, así como de su experiencia con los proyectos BEM.
Elija el método más adecuado para su proyecto:
| Distrito | Fuente | Compilado |
|---|---|---|
| Código CSS y JavaScript previamente ensamblado y plantillas de biblioteca. Integrado mediante vinculación a la página. No requiere ensamblaje o compatibilidad con su proyecto. | El código fuente completo de la biblioteca. Requiere ensamblaje. Su proyecto debe ser totalmente compatible con las tecnologías y herramientas de la biblioteca. | El código fuente completo de la biblioteca. Requiere ensamblaje. Difiere del método fuente en que PostCSS se compila en CSS. Adecuado para proyectos donde no se utiliza PostCSS. |
La forma en que está utilizando la biblioteca determina cómo integrarla en su proyecto:
Recomendamos usar las herramientas ENB o BEM para integrar la biblioteca.
Como ejemplo, puede usar Project-Stub, donde la biblioteca está habilitada de forma predeterminada. También puede crear un proyecto y usar el generador yo para conectar la biblioteca (esto le permite crear la configuración del proyecto necesaria).
La forma más fácil de conectar la biblioteca al proyecto es descargar los archivos de la biblioteca previamente ensamblados y usar <link> y <script> elementos para agregarlos a las páginas HTML. Hay varias formas de hacer esto:
Para obtener información sobre cómo usar los archivos de la biblioteca conectados, consulte Trabajar con la biblioteca.
Estructura de la biblioteca pre-ensamblada
Hay conjuntos separados de archivos disponibles para tres plataformas:
Cada conjunto incluye:
bem-components.css -estilos;bem-components.ie.css -estilos para IE8 (más información);bem-components.js -javascript;bem-components.bemhtml.js -plantillas bemhtml;bem-components.bh.js -plantillas BH;bem-components.js+bemhtml.js -combina el código JavaScript y las plantillas Bemhtml para usar plantillas en el navegador;bem-components.js+bh.js : combina el código JavaScript y las plantillas BH para usar plantillas en el navegador;bem-components.no-autoinit.js -JavaScript sin inicialización automática. Úselo si necesita escribir su propio código en i-bem.js ;bem-components.no-autoinit.js+bemhtml.js ;bem-components.no-autoinit.js+bh.js .Cada conjunto también incluye las versiones de desarrollo de los mismos archivos (preservando el formato original y los comentarios).
La forma más rápida y fácil de conectar la biblioteca al proyecto es agregar los elementos <link> y <script> a las 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 > Patrón para conectar un archivo desde el cdn: //yastatic.net/library-name/version/platform/file-name .
Ejemplo: //yastatic.net/bem-components/latest/desktop/bem-components.dev.js+bemhtml.js .
Seleccione la versión de biblioteca apropiada y descargue el archivo. Descózalo. Agregue los archivos a la página usando <link> y <script> elementos:
< link rel =" stylesheet " href =" desktop/bem-components.css " >
< script src =" desktop/bem-components.js+bemhtml.js " > </ script > El código de la biblioteca está en GitHub: https://github.com/bem/bem-components.
Para ejecutar la compilación, use estos 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 de la compilación, los archivos estarán disponibles en la carpeta bem-components-dist . Conecte los archivos en el HTML de la 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 > Siempre que Bower ya esté en su proyecto, ejecute el siguiente comando:
bower i bem/bem-components-dist
Como resultado de la compilación, los archivos estarán disponibles en la carpeta bem-components-dist . Conecte los archivos de la misma manera que para el 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 > Hay dos pasos para trabajar con la biblioteca:
El primer paso es siempre el mismo. El segundo paso se puede realizar de tres maneras diferentes, que puede combinar como desee:
Método 1. Copie el HTML del ejemplo. Para hacer esto, vaya a la pestaña HTML en el encabezado del ejemplo.
Este es el enfoque más fácil, pero si las plantillas se actualizan en futuras versiones de la biblioteca, deberá realizar los cambios manualmente en cada bloque actualizado.
Método 2. Use la plantilla en el navegador. El ensamblaje de la biblioteca Dist incluye plantillas de Bemhtml y BH pre-ensambladas para elegir.
Para hacer esto, copie el código Bemjson de muestra de la documentación y péguelo en el código HTML de la página. Use la pestaña BEMJSON en el encabezado del ejemplo.
El código HTML de la página se verá así:
<!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 >A diferencia del primer método, este código no requerirá ningún cambio en el marcado cuando la biblioteca se actualice a una nueva versión. Sin embargo, el marcado generado por el cliente podría no ser indexado también por los motores de búsqueda.
Método 3 . Ejecutar {BEMHTML,BH}.apply() en node.js y dar al navegador el 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 La biblioteca consta de bloques, que puede ver representados visualmente en el escaparate bem-components . Los bloques tienen estados que determinan el modelo de comportamiento. El estado de un bloque se expresa a través de modificadores y campos especializados. Cambiar un modificador crea un evento que se puede usar para trabajar con el bloque.
No es necesario crear un evento BEM especial si puede trabajar con el evento de cambio de modificador. Dependiendo de lo que se use para cambiar el estado de un componente (un modificador o un campo), se utilizan diferentes eventos:
value , se utiliza el evento change .bem-components Los controles en bem-components pueden usarse como base para crear otros componentes de la biblioteca. Dichos controles no tienen modelos como en HTML, y pueden usarse para tareas que no requieren la semántica de un modelo HTML específico.
Como ejemplo, piense en el "modelo de comportamiento" para el htmlinputelement, que es una interfaz de nivel superior diseñada específicamente para editar datos. Lo diferente de los bloques bem-components es que pueden usarse como base de un bloque en otra biblioteca que resolverá el mismo problema. Pero junto con eso, pueden servir otros fines en la interfaz que no requieren semántica HTML input .
focused Los controles en componentes BEM tienen dos tipos de enfoque, que se establecen utilizando los modificadores focused y focused-hard . El tipo de enfoque determina la apariencia del control.
El modificador se elige automáticamente en función de cómo se establece el enfoque:
focused : configurado para un clic del mouse en el control.focused-hard : establezca cuando el control se seleccione usando el teclado o a través de JavaScript. Destaca el componente más obviamente cuando se enfoca. Por ejemplo, en el tema Islands , la mayoría de los controles obtienen un borde adicional cuando se establece focused-hard . Obtener fuentes:
$ git clone git://github.com/bem/bem-components.git
$ cd bem-componentsInstalar dependencias (de herramientas):
$ npm install Para ejecutar las herramientas instaladas localmente, use export PATH=./node_modules/.bin:$PATH o cualquier método alternativo.
Instalar bibliotecas dependientes:
$ bower installCree ejemplos y pruebas:
$ npm run build-allInicie el servidor de desarrollo:
$ npm start
$ open http://localhost:8080/Nota: Para obtener información sobre el ensamblaje de bloques individuales, consulte las pruebas de sección para plantillas.
Análisis de código:
$ npm run lint El comando npm run test-specs inicia pruebas unitarias en JS.
Para iniciar el ensamblaje basado en el punto, use el comando enb make specs desktop.specs/<block-name> (por ejemplo, enb make specs desktop.specs/input ).
Las pruebas se ejecutarán automáticamente en Travis para cada solicitud de extracción.
Hermione se usa para las pruebas de diseño.
Las pruebas para cada bloque se almacenan en un archivo de bloqueo block-name.hermione.js separado.hermione.js en el directorio hermione/ . A nivel local, la prueba se ejecutan manualmente. En Travis, las pruebas se ejecutan automáticamente. Para la cuadrícula de selenio, se utiliza el servicio Saucelabs.
Para ejecutar pruebas localmente, debe:
SAUCE_USERNAME y SAUCE_ACCESS_KEY ).sc (sauceconnect) y espere a que se abra el túnel.hermione .hermione gui .Al desarrollar nuevas pruebas para acelerar la ejecución local:
.hermione.conf.js , cambie la opción gridUrl a http://localhost:4444/ . Para obtener más información sobre el uso de Hermione con varios backends, lea el artículo Hermione Quick Start.
Nota: Debe guardar capturas de pantalla de Saucelabs en el repositorio. Esto ayuda a evitar discrepancias al hacer fuentes.
Antes de cometer imágenes de referencia nuevas o modificadas, debe:
Las herramientas de compilación para la biblioteca le permiten construir y ejecutar pruebas en plantillas de bloques BEMHTML y BH.
Agregue una prueba para un bloque
[block name].tmpl-specs en el directorio del bloque en el nivel necesario. Los archivos de prueba se almacenarán en este directorio.Se pueden escribir múltiples pruebas para un bloque y, en consecuencia, cada prueba consta de dos archivos (Bemjson y HTML) con el mismo nombre.
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 y ejecutar pruebas, use:
magic run tmpl-specsPara crear pruebas en el nivel de definición requerido, use:
magic make desktop.tmpl-specsPara construir pruebas solo para un bloque específico, use:
magic make desktop.tmpl-specs/buttonSi el procedimiento de compilación es exitoso, las pruebas se ejecutan automáticamente y verá todos los resultados de las pruebas. Si el resultado de aplicar la plantilla no coincide con la muestra de bloque en HTML, verá un error en el registro que indica cómo difiere de la muestra de bloque.
Todas las pruebas se ejecutan automáticamente usando Travis en cada solicitud de extracción.
Las tareas actuales se enumeran en un tablero ágil especial.
Estado de la tarea:
Código y documentación © 2012 Yandex LLC. Código publicado bajo la Licencia Pública de Mozilla 2.0.
