bem components
v5.1.1
bem-components est une bibliothèque open source qui fournit un ensemble de composants visuels (blocs) prêts à l'emploi pour créer des interfaces Web.
La bibliothèque fournit des thèmes de conception. Cette version présente le thème islands , qui met en œuvre le nouveau design Yandex. Les fonctionnalités incluent la prise en charge de plusieurs thèmes à la fois et la création de nouveaux thèmes.
Informations Complémentaires
common.blocks - Prise en charge de tous les appareils et navigateurs.desktop.blocks - Prise en charge des navigateurs de bureau.touch.blocks - Implémentation de fonctionnalités spécifiques pour les plates-formes tactiles.touch-phone.blocks - Implémentation de fonctionnalités spécifiques pour les smartphones.touch-pad.blocks - Implémentation de fonctionnalités spécifiques pour les tablettes.design/<common|desktop|touch|touch-phone|touch-pad>.blocks - Implémentation de divers conceptions (thèmes). Bureau
Touche
Pour prendre en charge Internet Explorer 8, vous devez ajouter:
*.ie.styl de la page. Pour ce faire, spécifiez-les dans la configuration de construction (voir cet exemple) et ajoutez des commentaires dans la section page (voir cet exemple). Vous pouvez également activer les styles pour Internet Explorer 8 au niveau du modèle. Assembleurs
Optimisateurs
Analyse du code
Autre
Il existe plusieurs façons de commencer à utiliser bem-components . La meilleure approche dépend des exigences de votre projet et de sa compatibilité avec les technologies et les outils de la bibliothèque, ainsi que de votre expérience avec les projets BEM.
Choisissez la méthode la plus appropriée pour votre projet:
| Distr | Source | Compilé |
|---|---|---|
| Modèles de code et de bibliothèque JavaScript pré-assemblé et JavaScript. Intégré en liant à la page. Ne nécessite pas d'assemblage ou de compatibilité avec votre projet. | Le code source complet de la bibliothèque. Nécessite l'assemblage. Votre projet doit être entièrement compatible avec les technologies et les outils de la bibliothèque. | Le code source complet de la bibliothèque. Nécessite l'assemblage. Diffère de la méthode source en ce que POSTCSS est compilé en CSS. Convient aux projets où PostCSS n'est pas utilisé. |
La façon dont vous utilisez la bibliothèque détermine comment l'intégrer dans votre projet:
Nous vous recommandons d'utiliser ENB ou BEM-Tools pour intégrer la bibliothèque.
Par exemple, vous pouvez utiliser Project-Stub, où la bibliothèque est activée par défaut. Vous pouvez également créer un projet et utiliser le générateur YO pour connecter la bibliothèque (cela vous permet de créer la configuration du projet nécessaire).
La façon la plus simple de connecter la bibliothèque au projet est de télécharger les fichiers de bibliothèque pré-assemblés et d'utiliser des éléments <link> et <script> pour les ajouter aux pages HTML. Il existe plusieurs façons de le faire:
Pour plus d'informations sur la façon d'utiliser les fichiers de bibliothèque connectés, voir en travaillant avec la bibliothèque.
Structure de la bibliothèque pré-assemblée
Il existe des ensembles distincts de fichiers disponibles pour trois plates-formes:
Chaque ensemble comprend:
bem-components.css - styles;bem-components.ie.css - Styles pour IE8 (plus d'informations);bem-components.js - javascript;bem-components.bemhtml.js - modèles bemhtml;bem-components.bh.js - modèles BH;bem-components.js+bemhtml.js - combine des modèles de code JavaScript et de bemhtml pour utiliser des modèles dans le navigateur;bem-components.js+bh.js - combine des modèles de code JavaScript et BH pour utiliser des modèles dans le navigateur;bem-components.no-autoinit.js - javascript sans initialisation automatique. Utilisez-le si vous avez besoin d'écrire votre propre code dans i-bem.js ;bem-components.no-autoinit.js+bemhtml.js ;bem-components.no-autoinit.js+bh.jsChaque ensemble comprend également les versions de développement des mêmes fichiers (préservant le formatage et les commentaires d'origine).
Le moyen le plus rapide et le plus simple de connecter la bibliothèque au projet est d'ajouter les éléments <link> et <script> aux pages 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 > Modèle de connexion d'un fichier à partir du cdn: //yastatic.net/library-name/version/platform/file-name .
Exemple: //yastatic.net/bem-components/latest/desktop/bem-components.dev.js+bemhtml.js .
Sélectionnez la version de la bibliothèque appropriée et téléchargez l'archive. Décompressez-le. Ajoutez les fichiers dans la page à l'aide des éléments <link> et <script> :
< link rel =" stylesheet " href =" desktop/bem-components.css " >
< script src =" desktop/bem-components.js+bemhtml.js " > </ script > Le code de la bibliothèque est sur GitHub: https://github.com/bem/bem-components.
Pour exécuter la construction, utilisez ces commandes:
# 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
À la suite de la version, les fichiers seront disponibles dans le dossier bem-components-dist . Connectez les fichiers dans le HTML de la page:
< 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 > Bower fourni est déjà dans votre projet, exécutez la commande suivante:
bower i bem/bem-components-dist
À la suite de la version, les fichiers seront disponibles dans le dossier bem-components-dist . Connectez les fichiers de la même manière que pour la méthode précédente:
< 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 > Il y a deux étapes pour travailler avec la bibliothèque:
La première étape est toujours la même. La deuxième étape peut être effectuée de trois manières différentes, que vous pouvez combiner comme vous le souhaitez:
Méthode 1. Copiez le HTML à partir de l'exemple. Pour ce faire, accédez à l'onglet HTML dans l'en-tête de l'exemple.
C'est l'approche la plus simple, mais si les modèles sont mis à jour dans les futures versions de la bibliothèque, vous devrez apporter les modifications manuellement dans chaque bloc mis à jour.
Méthode 2. Utilisez des modèles dans le navigateur. L'assemblage de la bibliothèque Dist comprend des modèles BEMHTML et BH pré-assemblés.
Pour ce faire, copiez l'exemple de code Bemjson à partir de la documentation et collez-le dans le code HTML de la page. Utilisez l'onglet BEMJSON dans l'en-tête de l'exemple.
Le code HTML de la page ressemblera à ceci:
<!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 >Contrairement à la première méthode, ce code ne nécessitera aucune modification du balisage lorsque la bibliothèque est mise à jour vers une nouvelle version. Cependant, le balisage généré par le client pourrait ne pas être également indexé par les moteurs de recherche.
Méthode 3 . Exécuter {BEMHTML,BH}.apply() dans node.js et donner au navigateur le html préparé:
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 bibliothèque se compose de blocs, que vous pouvez voir représentés visuellement dans la vitrine bem-components . Les blocs ont des états qui déterminent le modèle comportemental. L'état d'un bloc est exprimé par des modificateurs et des champs spécialisés. Le changement d'un modificateur crée un événement qui peut être utilisé pour travailler avec le bloc.
Il n'est pas nécessaire de créer un événement BEM spécial si vous pouvez travailler avec l'événement de changement de modificateur. Selon ce qui est utilisé pour modifier l'état d'un composant (un modificateur ou un champ), différents événements sont utilisés:
value , l'événement change est utilisé.bem-components Les commandes dans bem-components peuvent être utilisées comme base pour créer d'autres composants de la bibliothèque. Ces contrôles n'ont pas de modèles comme dans HTML, et ils peuvent être utilisés pour des tâches qui ne nécessitent pas la sémantique d'un modèle HTML spécifique.
À titre d'exemple, pensez au "modèle comportemental" pour le HTMLinPutellement, qui est une interface de niveau supérieur conçu spécifiquement pour l'édition de données. Ce qui est différent dans les blocs bem-components c'est qu'ils peuvent être utilisés comme base d'un bloc dans une autre bibliothèque qui résoudra le même problème. Mais avec cela, ils peuvent servir d'autres fins dans l'interface qui ne nécessitent pas de sémantique HTML input .
focused Les commandes dans les composants BEM ont deux types de focus, qui sont définis en utilisant les modificateurs focused et focused-hard . Le type de focus détermine l'apparence du contrôle.
Le modificateur est choisi automatiquement en fonction de la façon dont la mise au point est définie:
focused - Définissez pour une souris cliquez sur le contrôle.focused-hard - Définissez lorsque le contrôle est sélectionné à l'aide du clavier ou via JavaScript. Il met en évidence le composant plus évidemment lorsqu'il se concentre. Par exemple, dans le thème Islands , la plupart des commandes obtiennent une frontière supplémentaire en cas focused-hard . Obtenez des sources:
$ git clone git://github.com/bem/bem-components.git
$ cd bem-componentsInstallez les dépendances (des outils):
$ npm install Pour ensuite exécuter des outils installés localement, utilisez export PATH=./node_modules/.bin:$PATH ou toute autre méthode.
Installez les bibliothèques dépendantes:
$ bower installConstruisez des exemples et des tests:
$ npm run build-allDémarrer le serveur de développement:
$ npm start
$ open http://localhost:8080/Remarque: Pour plus d'informations sur l'assemblage de blocs individuels, consultez les tests de section pour les modèles.
Analyse du code:
$ npm run lint La commande npm run test-specs lance des tests unitaires sur JS.
Pour lancer un assemblage basé sur des points, utilisez la commande enb make specs desktop.specs/<block-name> (par exemple, enb make specs desktop.specs/input ).
Les tests seront exécutés automatiquement sur Travis pour chaque demande de traction.
Hermione est utilisée pour les tests de disposition.
Les tests pour chaque bloc sont stockés dans un fichier de block-name.hermione.js séparé dans le répertoire hermione/ . Localement, les tests sont exécutés manuellement. Sur Travis, les tests sont exécutés automatiquement. Pour la grille de sélénium, le service Saucelabs est utilisé.
Pour exécuter des tests localement, vous devez:
SAUCE_USERNAME et SAUCE_ACCESS_KEY ).sc (SauceConnect) et attendez que le tunnel soit ouvert.hermione .hermione gui Command.Lors du développement de nouveaux tests pour accélérer l'exécution locale:
.hermione.conf.js , modifiez l'option gridUrl en http://localhost:4444/ . Pour plus d'informations sur l'utilisation Hermione avec divers backends, lisez l'article Hermione rapide à démarrer.
Remarque: vous devez enregistrer des captures d'écran de Saucelabs dans le référentiel. Cela aide à éviter les écarts lors de la rendu des polices.
Avant de commander des images de référence nouvelles ou modifiées, vous devez:
Les outils de construction de la bibliothèque vous permettent de créer et d'exécuter des tests sur les modèles de bloc BEMHTML et BH.
Ajouter un test pour un bloc
[block name].tmpl-specs dans le répertoire du bloc au niveau nécessaire. Les fichiers de test seront stockés dans ce répertoire.Plusieurs tests peuvent être écrits pour un bloc et, en conséquence, chaque test se compose de deux fichiers (Bemjson et HTML) avec le même nom.
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
Pour construire et exécuter des tests, utilisez:
magic run tmpl-specsPour construire des tests au niveau de définition requis, utilisez:
magic make desktop.tmpl-specsPour créer des tests uniquement pour un bloc spécifique, utilisez:
magic make desktop.tmpl-specs/buttonSi la procédure de construction est réussie, les tests sont exécutés automatiquement et vous verrez tous les résultats des tests. Si le résultat de l'application du modèle ne correspond pas à l'échantillon de bloc dans HTML, vous verrez une erreur dans le journal indiquant comment elle diffère de l'échantillon de bloc.
Tous les tests sont exécutés automatiquement à l'aide de Travis sur chaque demande de traction.
Les tâches actuelles sont répertoriées sur une planche agile spéciale.
Status de tâche:
Code et documentation © 2012 Yandex LLC. Code publié sous la licence publique de Mozilla 2.0.
