├── .bem ├── configs │ ├── current │ ├── development.js │ └── production.js ├── level.js ├── levels │ ├── blocks.js │ ├── bundles.js │ ├── examples-set.js │ ├── examples.js │ ├── specs-set.js │ ├── tests-set.js │ └── tests.js └── make.js ├── .bowerrc ├── .editorconfig ├── .enb └── make.js ├── .githooks └── pre-commit │ └── lint ├── .gitignore ├── .jscsrc ├── .jshint-groups.js ├── .travis.yml ├── CONTRIBUTING.md ├── CONTRIBUTING.ru.md ├── README.md ├── README.ru.md ├── bower.json ├── common.blocks ├── .bem │ └── level.js ├── blockquote │ ├── blockquote.bemhtml │ ├── blockquote.bh.js │ ├── blockquote.deps.js │ ├── blockquote.en.md │ ├── blockquote.examples │ │ ├── .bem │ │ │ └── level.js │ │ └── simple.bemjson.js │ ├── blockquote.ru.md │ └── blockquote.tmpl-specs │ │ ├── .bem │ │ └── level.js │ │ ├── 10-simple.bemjson.js │ │ └── 10-simple.html ├── calc │ ├── __font │ │ ├── calc__font.deps.js │ │ └── calc__font.styl │ ├── __rem │ │ ├── calc__rem.deps.js │ │ └── calc__rem.styl │ ├── calc.en.md │ └── calc.ru.md ├── heading │ ├── heading.bemhtml │ ├── heading.bh.js │ ├── heading.deps.js │ ├── heading.en.md │ ├── heading.examples │ │ ├── .bem │ │ │ └── level.js │ │ └── simple.bemjson.js │ ├── heading.ru.md │ └── heading.tmpl-specs │ │ ├── .bem │ │ └── level.js │ │ ├── 10-simple.bemjson.js │ │ └── 10-simple.html ├── list │ ├── _type │ │ ├── list_type_ordered.bemhtml │ │ └── list_type_ordered.bh.js │ ├── list.bemhtml │ ├── list.bh.js │ ├── list.deps.js │ ├── list.en.md │ ├── list.examples │ │ ├── .bem │ │ │ └── level.js │ │ └── simple.bemjson.js │ ├── list.ru.md │ └── list.tmpl-specs │ │ ├── .bem │ │ └── level.js │ │ ├── 10-simple.bemjson.js │ │ └── 10-simple.html ├── paragraph │ ├── paragraph.bemhtml │ ├── paragraph.bh.js │ ├── paragraph.deps.js │ ├── paragraph.en.md │ ├── paragraph.examples │ │ ├── .bem │ │ │ └── level.js │ │ └── simple.bemjson.js │ ├── paragraph.ru.md │ └── paragraph.tmpl-specs │ │ ├── .bem │ │ └── level.js │ │ ├── 10-simple.bemjson.js │ │ └── 10-simple.html ├── typo │ ├── typo.deps.js │ ├── typo.en.md │ ├── typo.ru.md │ └── typo.styl └── variables │ ├── variables.en.md │ ├── variables.ru.md │ └── variables.styl ├── design ├── common.blocks │ ├── .bem │ │ └── level.js │ ├── heading │ │ ├── heading.deps.js │ │ └── heading.styl │ ├── paragraph │ │ └── _type │ │ │ ├── paragraph_type_lead.deps.js │ │ │ └── paragraph_type_lead.styl │ └── print │ │ ├── print.en.md │ │ ├── print.ru.md │ │ └── print.styl ├── desktop.blocks │ └── .bem │ │ └── level.js └── touch.blocks │ └── .gitkeep ├── desktop.blocks └── .bem │ └── level.js ├── desktop.bundles ├── .bem │ └── level.js └── index │ └── index.bemjson.js ├── package.json ├── test.blocks └── .gitkeep ├── touch.blocks └── .gitkeep └── www ├── favicon.ico ├── humans.txt └── robots.txt /.bem/configs/current: -------------------------------------------------------------------------------- 1 | process.env.BEMHTML_ENV = 'development'; 2 | 3 | module.exports = {}; 4 | -------------------------------------------------------------------------------- /.bem/configs/development.js: -------------------------------------------------------------------------------- 1 | process.env.BEMHTML_ENV = 'development'; 2 | 3 | module.exports = {}; 4 | -------------------------------------------------------------------------------- /.bem/configs/production.js: -------------------------------------------------------------------------------- 1 | process.env.YENV = 'production'; 2 | 3 | module.exports = {}; 4 | -------------------------------------------------------------------------------- /.bem/level.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('bem/lib/levels/project'); 2 | -------------------------------------------------------------------------------- /.bem/levels/blocks.js: -------------------------------------------------------------------------------- 1 | var environ = require('bem-environ'), 2 | getTechResolver = environ.getTechResolver, 3 | 4 | BEMCORE_TECHS = environ.getLibPath('bem-core', '.bem/techs'), 5 | BEMPR_TECHS = environ.getLibPath('bem-pr', 'bem/techs'); 6 | 7 | exports.getTechs = function() { 8 | var techs = { 9 | 'blocks' : 'level-proto', 10 | 'examples' : 'level-proto', 11 | 'specs' : 'level-proto', 12 | 'tests' : 'level-proto', 13 | 'bemjson.js' : 'v2/bemjson.js', 14 | 'bemdecl.js' : 'v2/bemdecl.js', 15 | 'deps.js' : 'v2/deps.js', 16 | 'css' : 'v2/css', 17 | 'stylus' : 'v2/styl.js', 18 | 'js' : 'v2/js-i' 19 | }; 20 | 21 | [ 22 | 'browser.js', 23 | 'bemhtml', 24 | 'vanilla.js', 25 | 'md' 26 | ].forEach(getTechResolver(techs, BEMCORE_TECHS)); 27 | 28 | [ 29 | 'spec.js', 30 | 'spec.js+browser.js+bemhtml', 31 | 'spec.bemjson.js' 32 | ].forEach(getTechResolver(techs, BEMPR_TECHS)); 33 | 34 | return techs; 35 | }; 36 | 37 | exports.defaultTechs = ['stylus', 'browser.js', 'bemhtml', 'md']; 38 | -------------------------------------------------------------------------------- /.bem/levels/bundles.js: -------------------------------------------------------------------------------- 1 | var environ = require('bem-environ'), 2 | BEMCORE_TECHS = environ.getLibPath('bem-core', '.bem/techs'), 3 | BEMPR_TECHS = environ.getLibPath('bem-pr', 'bem/techs'), 4 | getTechResolver = environ.getTechResolver; 5 | 6 | exports.baseLevelPath = require.resolve('./blocks'); 7 | 8 | exports.getTechs = function() { 9 | var techs = this.__base(); 10 | 11 | ['browser.js+bemhtml', 'html'].forEach(getTechResolver(techs, BEMCORE_TECHS)); 12 | 13 | ['phantomjs', 'spec.bemjson.js'].forEach(getTechResolver(techs, BEMPR_TECHS)); 14 | 15 | return techs; 16 | }; 17 | 18 | exports.defaultTechs = ['bemjson.js']; 19 | -------------------------------------------------------------------------------- /.bem/levels/examples-set.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('./bundles'); 2 | -------------------------------------------------------------------------------- /.bem/levels/examples.js: -------------------------------------------------------------------------------- 1 | var BEM = require('bem'); 2 | 3 | exports.baseLevelPath = require.resolve('bem/lib/levels/simple'); 4 | 5 | exports.getTechs = function() { 6 | 7 | return BEM.util.extend(require('./blocks').getTechs(), { 8 | 'blocks' : 'level-proto', 9 | 'title.txt' : 'bem/lib/tech/v2', 10 | 'bemjson.js' : 'bem/lib/tech/v2' 11 | }); 12 | 13 | }; 14 | -------------------------------------------------------------------------------- /.bem/levels/specs-set.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('./bundles'); 2 | -------------------------------------------------------------------------------- /.bem/levels/tests-set.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('./bundles'); 2 | -------------------------------------------------------------------------------- /.bem/levels/tests.js: -------------------------------------------------------------------------------- 1 | var BEM = require('bem'); 2 | 3 | exports.baseLevelPath = require.resolve('bem/lib/levels/simple'); 4 | 5 | exports.getTechs = function() { 6 | 7 | return BEM.util.extend(require('./blocks').getTechs(), { 8 | 'blocks' : 'level-proto' 9 | }); 10 | 11 | }; 12 | -------------------------------------------------------------------------------- /.bem/make.js: -------------------------------------------------------------------------------- 1 | /* global MAKE:false */ 2 | 3 | var environ = require('bem-environ')(__dirname); 4 | 5 | require('bem-tools-autoprefixer').extendMake(MAKE); 6 | 7 | try { 8 | require(environ.getLibPath('bem-pr', 'bem/nodes'))(MAKE); 9 | } catch(e) { 10 | if(e.code !== 'MODULE_NOT_FOUND') 11 | throw e; 12 | require('bem/lib/logger').warn('\'bem-pr\' is not installed'); 13 | } 14 | 15 | MAKE.decl('Arch', { 16 | 17 | blocksLevelsRegexp : /^.+?\.blocks$/, 18 | bundlesLevelsRegexp : /^.+?\.pages$/, 19 | 20 | createCustomNodes : function() { 21 | var SetsNode = MAKE.getNodeClass('SetsNode'); 22 | 23 | if(typeof SetsNode.createId === 'undefined') { 24 | return; 25 | } 26 | 27 | return SetsNode 28 | .create({ root : this.root, arch : this.arch }) 29 | .alterArch(); 30 | } 31 | 32 | }); 33 | 34 | MAKE.decl('SetsNode', { 35 | 36 | getSets : function() { 37 | return { 38 | 'common' : [ 39 | 'common.blocks', 40 | 'accessibility.blocks', 41 | 'design/common.blocks', 42 | 'test.blocks' 43 | ] 44 | }; 45 | }, 46 | 47 | getSourceTechs : function() { 48 | return ['examples', 'tests', 'specs']; 49 | } 50 | 51 | }); 52 | 53 | MAKE.decl('BundleNode', { 54 | 55 | getTechs : function() { 56 | return [ 57 | 'bemjson.js', 58 | 'bemdecl.js', 59 | 'deps.js', 60 | 'stylus', 61 | 'css', 62 | 'bemhtml', 63 | 'browser.js+bemhtml', 64 | 'html' 65 | ]; 66 | }, 67 | 68 | getForkedTechs : function() { 69 | return this.__base().concat(['browser.js+bemhtml', 'stylus']); 70 | }, 71 | 72 | getLevels : function() { 73 | return [ 74 | 'libs/bem-core/common.blocks', 75 | 'libs/bem-components/common.blocks', 76 | 'libs/bem-components/desktop.blocks', 77 | 'libs/bem-social/common.blocks', 78 | 'libs/bem-social/design/common.blocks', 79 | 'common.blocks', 80 | 'design/common.blocks', 81 | 'accessibility.blocks', 82 | 'promo.blocks', 83 | 'design/promo.blocks' 84 | ]; 85 | }, 86 | 87 | 'create-css-node' : function(tech, bundleNode, magicNode) { 88 | var source = this.getBundlePath('stylus'); 89 | if(this.ctx.arch.hasNode(source)) { 90 | return this.createAutoprefixerNode(tech, this.ctx.arch.getNode(source), bundleNode, magicNode); 91 | } 92 | } 93 | 94 | }); 95 | 96 | MAKE.decl('AutoprefixerNode', { 97 | 98 | getBrowsers : function() { 99 | return [ 100 | 'last 2 versions', 101 | 'ie 10', 102 | 'ff 24', 103 | 'opera 12.16', 104 | 'android 4', 105 | 'ios 6' 106 | ]; 107 | } 108 | 109 | }); 110 | 111 | MAKE.decl('SpecNode', { 112 | 113 | getTechs : function() { 114 | return [ 115 | 'bemjson.js', 116 | 'bemdecl.js', 117 | 'deps.js', 118 | 'stylus', 119 | 'css', 120 | 'spec.js+browser.js+bemhtml', 121 | 'bemhtml', 122 | 'html', 123 | 'phantomjs' 124 | ]; 125 | }, 126 | 127 | getForkedTechs : function() { 128 | return ['bemhtml', 'spec.js+browser.js+bemhtml', 'phantomjs']; 129 | }, 130 | 131 | getLevels : function() { 132 | return this.__base.apply(this, arguments) 133 | .concat(environ.getLibPath('bem-pr', 'spec.blocks')); 134 | } 135 | 136 | }); 137 | -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "libs", 3 | "storage": { 4 | "packages": ".libs-cache", 5 | "registry": ".libs-registry" 6 | }, 7 | "tmp": ".libs-tmp" 8 | } 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.enb/make.js: -------------------------------------------------------------------------------- 1 | var DEFAULT_LANGS = ['ru', 'en'], 2 | BEM_TEMPLATE_ENGINE = process.env.BEM_TEMPLATE_ENGINE || 'BEMHTML', 3 | fs = require('fs'), 4 | path = require('path'), 5 | naming = require('bem-naming'), 6 | levels = require('enb-bem-techs/techs/levels'), 7 | levelsToBemdecl = require('enb-bem-techs/techs/levels-to-bemdecl'), 8 | provide = require('enb/techs/file-provider'), 9 | depsByTechToBemdecl = require('enb-bem-techs/techs/deps-by-tech-to-bemdecl'), 10 | bemdecl = require('enb-bem-techs/techs/bemjson-to-bemdecl'), 11 | deps = require('enb-bem-techs/techs/deps-old'), 12 | files = require('enb-bem-techs/techs/files'), 13 | css = require('enb-stylus/techs/css-stylus'), 14 | autoprefixer = require('enb-autoprefixer/techs/css-autoprefixer'), 15 | js = require('enb-diverse-js/techs/browser-js'), 16 | ym = require('enb-modules/techs/prepend-modules'), 17 | bemhtml = require('enb-bemxjst/techs/bemhtml'), 18 | html = require('enb-bemxjst/techs/html-from-bemjson'), 19 | bh = require('enb-bh/techs/bh-server'), 20 | bhServerInclude = require('enb-bh/techs/bh-server-include'), 21 | bhYm = require('enb-bh/techs/bh-client-module'), 22 | bhHtml = require('enb-bh/techs/html-from-bemjson'), 23 | copyFile = require('enb/techs/file-copy'), 24 | mergeFiles = require('enb/techs/file-merge'), 25 | mergeBemdecl = require('enb-bem-techs/techs/merge-bemdecl'), 26 | borschik = require('enb-borschik/techs/borschik'), 27 | PLATFORMS = { 28 | 'desktop' : ['common'], 29 | 'touch-phone' : ['common'], 30 | 'touch-pad' : ['common'] 31 | }, 32 | SETS = { 33 | 'desktop' : ['common'], 34 | 'touch' : ['common'] 35 | }; 36 | 37 | module.exports = function(config) { 38 | var platforms = Object.keys(PLATFORMS), 39 | sets = Object.keys(SETS), 40 | langs = process.env.BEM_I18N_LANGS; 41 | 42 | config.includeConfig('enb-bem-examples'); 43 | config.includeConfig('enb-bem-specs'); 44 | config.includeConfig('enb-bem-tmpl-specs'); 45 | 46 | config.setLanguages(langs? langs.split(' ') : [].concat(DEFAULT_LANGS)); 47 | 48 | configureBundles(platforms); 49 | configureSets(sets, { 50 | tests : config.module('enb-bem-examples').createConfigurator('tests'), 51 | examples : config.module('enb-bem-examples').createConfigurator('examples'), 52 | specs : config.module('enb-bem-specs').createConfigurator('specs'), 53 | tmplSpecs : config.module('enb-bem-tmpl-specs').createConfigurator('tmpl-specs') 54 | }); 55 | 56 | function configureBundles(platforms) { 57 | platforms.forEach(function(platform) { 58 | var nodes = [platform + '.bundles/*']; 59 | 60 | config.nodes(nodes, function(nodeConfig) { 61 | nodeConfig.addTech([provide, { target : '?.bemjson.js' }]); 62 | }); 63 | 64 | configureNodes(platform, nodes); 65 | }); 66 | } 67 | 68 | function configureNodes(platform, nodes) { 69 | configureLevels(platform, nodes); 70 | configureAutoprefixer(platform, nodes); 71 | 72 | config.nodes(nodes, function(nodeConfig) { 73 | var langs = config.getLanguages(); 74 | 75 | // Base techs 76 | nodeConfig.addTechs([ 77 | [bemdecl], 78 | [deps], 79 | [files] 80 | ]); 81 | 82 | // Client techs 83 | nodeConfig.addTechs([ 84 | [css, { target : '?.noprefix.css' }], 85 | [js, { 86 | filesTarget : '?.js.files' 87 | }], 88 | [mergeFiles, { 89 | target : '?.pre.js', 90 | sources : [BEM_TEMPLATE_ENGINE === 'BH'? '?.browser.bh.js' : '?.browser.bemhtml.js', '?.browser.js'] 91 | }], 92 | [ym, { 93 | source : '?.pre.js', 94 | target : '?.js' 95 | }] 96 | ]); 97 | 98 | // js techs 99 | nodeConfig.addTechs([ 100 | [depsByTechToBemdecl, { 101 | target : '?.js-js.bemdecl.js', 102 | sourceTech : 'js', 103 | destTech : 'js' 104 | }], 105 | [mergeBemdecl, { 106 | sources : ['?.bemdecl.js', '?.js-js.bemdecl.js'], 107 | target : '?.js.bemdecl.js' 108 | }], 109 | [deps, { 110 | target : '?.js.deps.js', 111 | bemdeclFile : '?.js.bemdecl.js' 112 | }], 113 | [files, { 114 | depsFile : '?.js.deps.js', 115 | filesTarget : '?.js.files', 116 | dirsTarget : '?.js.dirs' 117 | }] 118 | ]); 119 | 120 | // Client Template Engine 121 | nodeConfig.addTechs([ 122 | [depsByTechToBemdecl, { 123 | target : '?.template.bemdecl.js', 124 | sourceTech : 'js', 125 | destTech : 'bemhtml' 126 | }], 127 | [deps, { 128 | target : '?.template.deps.js', 129 | bemdeclFile : '?.template.bemdecl.js' 130 | }], 131 | [files, { 132 | depsFile : '?.template.deps.js', 133 | filesTarget : '?.template.files', 134 | dirsTarget : '?.template.dirs' 135 | }], 136 | BEM_TEMPLATE_ENGINE === 'BH'? [bhYm, { 137 | target : '?.browser.bh.js', 138 | filesTarget : '?.template.files', 139 | jsAttrName : 'data-bem', 140 | jsAttrScheme : 'json', 141 | mimic : 'BEMHTML' 142 | }] : [bemhtml, { 143 | target : '?.browser.bemhtml.js', 144 | filesTarget : '?.template.files', 145 | devMode : false 146 | }] 147 | ]); 148 | 149 | // Build htmls 150 | nodeConfig.addTechs(BEM_TEMPLATE_ENGINE === 'BH'? [ 151 | [bh, { 152 | jsAttrName : 'data-bem', 153 | jsAttrScheme : 'json' 154 | }], 155 | [bhHtml] 156 | ] : [ 157 | [bemhtml, { devMode : false }], 158 | [html] 159 | ]); 160 | 161 | langs.forEach(function(lang) { 162 | var destTarget = '?.' + lang + '.html'; 163 | 164 | nodeConfig.addTech([copyFile, { source : '?.html', target : destTarget }]); 165 | nodeConfig.addTarget(destTarget); 166 | }); 167 | 168 | nodeConfig.addTargets([ 169 | '?.min.css', '?.min.js', '?.html' 170 | ]); 171 | }); 172 | 173 | config.mode('development', function() { 174 | config.nodes(nodes, function(nodeConfig) { 175 | nodeConfig.addTechs([ 176 | [copyFile, { source : '?.css', target : '?.min.css' }], 177 | [borschik, { source : '?.js', target : '?.borschik.js', minify : false, freeze : false }], 178 | [copyFile, { source : '?.borschik.js', target : '?.min.js' }] 179 | ]); 180 | }); 181 | }); 182 | 183 | config.mode('production', function() { 184 | config.nodes(nodes, function(nodeConfig) { 185 | nodeConfig.addTechs([ 186 | [borschik, { source : '?.css', target : '?.min.css', freeze : true, tech : 'cleancss' }], 187 | [borschik, { source : '?.js', target : '?.min.js', freeze : true }] 188 | ]); 189 | }); 190 | }); 191 | } 192 | 193 | function configureLevels(platform, nodes) { 194 | config.nodes(nodes, function(nodeConfig) { 195 | var nodeDir = nodeConfig.getNodePath(), 196 | blockSublevelDir = path.join(nodeDir, '..', '.blocks'), 197 | sublevelDir = path.join(nodeDir, 'blocks'), 198 | extendedLevels = [].concat(getTestLevels(platform)); 199 | 200 | if(fs.existsSync(blockSublevelDir)) { 201 | extendedLevels.push(blockSublevelDir); 202 | } 203 | 204 | if(fs.existsSync(sublevelDir)) { 205 | extendedLevels.push(sublevelDir); 206 | } 207 | 208 | nodeConfig.addTech([levels, { levels : extendedLevels }]); 209 | }); 210 | } 211 | 212 | function configureAutoprefixer(platform, nodes) { 213 | config.nodes(nodes, function(nodeConfig) { 214 | nodeConfig.addTechs([ 215 | [autoprefixer, { 216 | sourceTarget : '?.noprefix.css', 217 | destTarget : '?.css', 218 | browserSupport : getBrowsers(platform) 219 | }] 220 | ]); 221 | }); 222 | } 223 | 224 | function configureSets(platforms, sets) { 225 | platforms.forEach(function(platform) { 226 | sets.examples.configure({ 227 | destPath : platform + '.examples', 228 | levels : getLibLevels(platform), 229 | techSuffixes : ['examples'], 230 | fileSuffixes : ['bemjson.js', 'title.txt'], 231 | inlineBemjson : true, 232 | processInlineBemjson : wrapInPage 233 | }); 234 | 235 | sets.tests.configure({ 236 | destPath : platform + '.tests', 237 | levels : getLibLevels(platform), 238 | techSuffixes : ['tests'], 239 | fileSuffixes : ['bemjson.js', 'title.txt'] 240 | }); 241 | 242 | sets.specs.configure({ 243 | destPath : platform + '.specs', 244 | levels : getLibLevels(platform), 245 | sourceLevels : getSpecLevels(platform), 246 | jsSuffixes : ['vanilla.js', 'browser.js', 'js'] 247 | }); 248 | 249 | sets.tmplSpecs.configure({ 250 | destPath : platform + '.tmpl-specs', 251 | levels : getLibLevels(platform), 252 | sourceLevels : getSpecLevels(platform), 253 | engines : { 254 | bh : { 255 | tech : 'enb-bh/techs/bh-server', 256 | options : { 257 | jsAttrName : 'data-bem', 258 | jsAttrScheme : 'json' 259 | } 260 | }, 261 | 'bemhtml-dev' : { 262 | tech : 'enb-bemxjst/techs/bemhtml-old', 263 | options : { devMode : true } 264 | }, 265 | 'bemhtml-prod' : { 266 | tech : 'enb-bemxjst/techs/bemhtml-old', 267 | options : { devMode : false } 268 | } 269 | } 270 | }); 271 | 272 | configureNodes(platform, [platform + '.tests/*/*', platform + '.examples/*/*']); 273 | }); 274 | } 275 | }; 276 | 277 | function getLibLevels(platform) { 278 | return (PLATFORMS[platform] || SETS[platform]).map(function(level) { 279 | return level + '.blocks'; 280 | }); 281 | } 282 | 283 | function getSourceLevels(platform) { 284 | var platformNames = (PLATFORMS[platform] || SETS[platform]); 285 | var levels = []; 286 | 287 | platformNames.forEach(function(name) { 288 | levels.push( 289 | { path : path.join('libs', 'bem-core', name + '.blocks'), check : false } 290 | ); 291 | }); 292 | 293 | platformNames.forEach(function(name) { 294 | levels.push({ path : name + '.blocks', check : true }); 295 | }); 296 | 297 | platformNames.forEach(function(name) { 298 | levels.push({ path : path.join('design', name + '.blocks'), check : true }); 299 | }); 300 | 301 | return levels; 302 | } 303 | 304 | function getTestLevels(platform) { 305 | return [].concat( 306 | getSourceLevels(platform), 307 | 'test.blocks' 308 | ); 309 | } 310 | 311 | function getSpecLevels(platform) { 312 | return [].concat( 313 | { path : path.join('libs', 'bem-pr', 'spec.blocks'), check : false }, 314 | getSourceLevels(platform) 315 | ); 316 | } 317 | 318 | function getBrowsers(platform) { 319 | switch(platform) { 320 | case 'desktop': 321 | return [ 322 | 'last 2 versions', 323 | 'ie 10', 324 | 'ff 24', 325 | 'opera 12.16' 326 | ]; 327 | case 'touch': 328 | return [ 329 | 'android 4', 330 | 'ios >= 5', 331 | 'ie 10' 332 | ]; 333 | case 'touch-pad': 334 | return [ 335 | 'android 4', 336 | 'ios 5' 337 | ]; 338 | case 'touch-phone': 339 | return [ 340 | 'android 4', 341 | 'ios 6', 342 | 'ie 10' 343 | ]; 344 | } 345 | } 346 | 347 | function wrapInPage(bemjson, meta) { 348 | var basename = '_' + path.basename(meta.filename, '.bemjson.js'); 349 | return { 350 | block : 'page', 351 | title : naming.stringify(meta.notation), 352 | head : [{ elem : 'css', url : basename + '.css' }], 353 | scripts : [{ elem : 'js', url : basename + '.js' }], 354 | mods : { theme : getThemeFromBemjson(bemjson) }, 355 | content : bemjson 356 | }; 357 | } 358 | 359 | function getThemeFromBemjson(bemjson) { 360 | if(typeof bemjson !== 'object') return; 361 | 362 | var theme, key; 363 | 364 | for(key in bemjson) { 365 | if(theme = key === 'mods'? bemjson.mods.theme : 366 | getThemeFromBemjson(bemjson[key])) return theme; 367 | } 368 | } 369 | -------------------------------------------------------------------------------- /.githooks/pre-commit/lint: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | # 3 | # Check changed js files using jshint and jscs 4 | # 5 | 6 | PATCH_FILE="working-tree.patch" 7 | NPM_BIN="./node_modules/.bin" 8 | 9 | function cleanup { 10 | exit_code=$? 11 | if [ -f "$PATCH_FILE" ]; then 12 | patch -p0 < "$PATCH_FILE" 13 | rm "$PATCH_FILE" 14 | fi 15 | exit $exit_code 16 | } 17 | 18 | trap cleanup EXIT SIGINT SIGHUP 19 | 20 | # Cancel any changes to the working tree that are not going to be committed 21 | git diff --no-prefix > "$PATCH_FILE" 22 | git checkout -- . 23 | 24 | git_cached_files=$(git diff --cached --name-only --diff-filter=ACMR | xargs echo) 25 | if [ "$git_cached_files" ]; then 26 | $NPM_BIN/jshint-groups $git_cached_files || exit 1 27 | $NPM_BIN/jscs $git_cached_files || exit 1 28 | fi -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .*.swp 2 | 3 | .project 4 | .settings/ 5 | .idea/ 6 | 7 | .bem/cache 8 | .bem/snapshots 9 | .enb/tmp 10 | node_modules 11 | npm-debug.log 12 | libs 13 | .libs-* 14 | 15 | *.bundles/*/* 16 | !*.bundles/.bem/* 17 | !*.bundles/*/blocks 18 | !*.bundles/*/*.bemjson.js 19 | *.bundles/*/_*.bemjson.js 20 | 21 | /coverage 22 | /coverage.json 23 | /gemini-report/ 24 | 25 | /dist 26 | /*.docs 27 | /*.examples 28 | /*.specs 29 | /*.tests 30 | /*.sets 31 | /*.tmpl-specs 32 | -------------------------------------------------------------------------------- /.jscsrc: -------------------------------------------------------------------------------- 1 | { 2 | "excludeFiles": [ 3 | ".bem/cache/**", 4 | ".enb/tmp/**", 5 | ".git/**", 6 | "*.docs/**", 7 | "*.examples/**", 8 | "*.specs/**", 9 | "*.tmpl-specs/**", 10 | "*.tests/**", 11 | "*.bundles/**", 12 | "**/*.i18n/**", 13 | "libs/**", 14 | ".libs-cache/**", 15 | ".libs-registry/**", 16 | ".libs-tmp/**", 17 | "node_modules/**" 18 | ], 19 | "fileExtensions": [".js", ".bemtree", ".bemhtml"], 20 | "requireSpaceAfterKeywords": ["do", "else"], 21 | "disallowSpaceAfterKeywords": ["if", "for", "while", "switch"], 22 | "disallowSpacesInFunctionExpression": { 23 | "beforeOpeningRoundBrace": true 24 | }, 25 | "disallowSpacesInsideArrayBrackets": true, 26 | "requireSpacesInsideObjectBrackets": "all", 27 | "requireSpaceAfterObjectKeys": true, 28 | "disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"], 29 | "disallowSpaceBeforePostfixUnaryOperators": ["++", "--"], 30 | "disallowSpaceBeforeBinaryOperators": [","], 31 | "requireSpaceBeforeBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<=", "&&", "||"], 32 | "requireSpaceAfterBinaryOperators": [",", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<=", "&&", "||"], 33 | "disallowKeywords": ["with"], 34 | "disallowKeywordsOnNewLine": ["else"], 35 | "requireLineFeedAtFileEnd": true, 36 | "disallowMultipleLineBreaks": true, 37 | "validateJSDoc": { 38 | "checkParamNames": true, 39 | "requireParamTypes": true 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /.jshint-groups.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | options : { 3 | boss : true, 4 | eqeqeq : true, 5 | evil : true, 6 | expr : true, 7 | forin : true, 8 | immed : true, 9 | loopfunc : true, 10 | maxdepth : 4, 11 | maxlen : 120, 12 | noarg : true, 13 | noempty : true, 14 | onecase : true, 15 | quotmark : 'single', 16 | sub : true, 17 | supernew : true, 18 | trailing : true, 19 | undef : true, 20 | unused : true 21 | }, 22 | 23 | groups : { 24 | browserjs : { 25 | options : { 26 | browser : true, 27 | predef : ['modules'] 28 | }, 29 | includes : ['*.blocks/**/*.js'], 30 | excludes : [ 31 | '**/*.i18n/*.js', 32 | '**/*.bem/*.js', 33 | '**/_*.js', 34 | '**/*.bh.js', 35 | '**/*.spec.js', 36 | '**/*.deps.js', 37 | '**/*.bemjson.js' 38 | ] 39 | }, 40 | 41 | specjs : { 42 | options : { 43 | browser : true, 44 | maxlen : 150, 45 | predef : [ 46 | 'modules', 47 | 'describe', 48 | 'it', 49 | 'before', 50 | 'beforeEach', 51 | 'after', 52 | 'afterEach' 53 | ] 54 | }, 55 | includes : ['*.blocks/**/*.spec.js'] 56 | }, 57 | 58 | bemhtml : { 59 | options : { 60 | predef : [ 61 | 'apply', 62 | 'applyCtx', 63 | 'applyNext', 64 | 'attrs', 65 | 'bem', 66 | 'block', 67 | 'cls', 68 | 'content', 69 | 'def', 70 | 'elem', 71 | 'js', 72 | 'local', 73 | 'match', 74 | 'mix', 75 | 'mod', 76 | 'mode', 77 | 'tag' 78 | ] 79 | }, 80 | includes : ['*.blocks/**/*.bemhtml'] 81 | }, 82 | 83 | bhjs : { 84 | options : { 85 | node : true 86 | }, 87 | includes : [ 88 | '*.blocks/**/*.bh.js', 89 | 'design/*.blocks/**/*.bh.js' 90 | ] 91 | }, 92 | 93 | bemjsonjs : { 94 | options : { 95 | asi : true 96 | }, 97 | includes : ['*.bundles/**/*.bemjson.js'] 98 | }, 99 | 100 | nodejs : { 101 | options : { 102 | node : true 103 | }, 104 | includes : ['**/.bem/**/*.js'], 105 | excludes : [ 106 | '.bem/cache/**', 107 | 'libs/**', 108 | ".libs-cache/**", 109 | ".libs-registry/**", 110 | ".libs-tmp/**", 111 | 'node_modules/**' 112 | ] 113 | } 114 | } 115 | }; 116 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "0.10" 5 | 6 | env: 7 | global: 8 | - GH_REF: github.com/verybigman/bem-content.git 9 | matrix: 10 | - TEST_SCOPE: lint 11 | - TEST_SCOPE: specs 12 | - TEST_SCOPE: tmpls 13 | 14 | matrix: 15 | fast_finish: true 16 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Workflow 2 | 3 | This README also available in [russian](https://github.com/verybigman/bem-typography/blob/master/CONTRIBUTING.ru.md). 4 | 5 | You can read more about workflow on GitHub [guides](http://guides.github.com/). 6 | 7 | ### How to contribute 8 | 9 | 1. [Create an issue](https://github.com/verybigman/bem-typography/issues/new) with description or take from available. 10 | 2. Create a feature-branch with an issue number based on a master branch. For example, for an issue #42: `git checkout -b feature/issue@42`. 11 | 3. Commit changes and `push` your branch. 12 | 4. Create a pull-request from your feature branch. 13 | 5. Link your pull-request with an issue number by comment. 14 | 6. Wait for your pull-request and the issue to be closed. 15 | 16 | _For pretty work with process you can use [git-extras](https://github.com/visionmedia/git-extras) - very useful tool for Git_ 17 | -------------------------------------------------------------------------------- /CONTRIBUTING.ru.md: -------------------------------------------------------------------------------- 1 | ## Рабочий процесс 2 | 3 | Подробнее почитать об этом можно на GitHub [guides](http://guides.github.com/), 4 | а также в статье на [хабре](http://habrahabr.ru/post/189046/). 5 | 6 | ### Как внести изменения 7 | 8 | 1. [Создайте новое issue](https://github.com/verybigman/bem-typography/issues/new) с описанием или возьмите существующее. 9 | 2. Создайте feature-branch с номером issue от master ветки. Например, для issue #42: `git checkout -b feature/issue@42`. 10 | 3. Зафиксируйте изменения и сделайте `push` вашей ветки. 11 | 4. Создайте pull-request. 12 | 5. Свяжите ваш pull-request с номером issue через коментарий. 13 | 6. Ждите пока ваш pull-request примут, а issue закроют. 14 | 15 | _Для продуктивной работы с таким процессом вы можете использовать [git-extras](https://github.com/visionmedia/git-extras) 16 | \- очень полезный инструмент для Git_ 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # bem-typography 2 | 3 | [![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/verybigman/bem-typography?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 4 | 5 | This README also available in [russian](https://github.com/verybigman/bem-content/blob/master/README.ru.md). 6 | 7 | Library for work with typography in BEM methodology. Inspired by [Gridlover](http://www.gridlover.net/app/). 8 | 9 | ## Dependencies 10 | 11 | - `i-bem` block from [bem-core](https//github.com/bem/bem-core) 12 | 13 | ## Install 14 | 15 | Take way like connecting with [bem-core](https//github.com/bem/bem-core) 16 | and [bem-components](https//github.com/bem/bem-components) libraries. 17 | Use [bower-npm-install](https://github.com/arikon/bower-npm-install) to install bem-components from GitHub or Bower register. 18 | 19 | ## Easy example 20 | 21 | Example for heading and paragpaph. 22 | 23 | ``` javascript 24 | { block : 'heading', content : 'This is heading of level 1' }, 25 | { 26 | block : 'paragraph', 27 | content : [ 28 | 'Simple text' 29 | ] 30 | } 31 | ``` 32 | 33 | ## Calculating 34 | 35 | Lib have block `calc` for calculating fonts sizes. Any sizes writed in rem. It's absolutely right way for fonts. For more info about math model you can watch [here](https://github.com/verybigman/bem-content/blob/master/common.blocks/calc/calc.en.md). 36 | 37 | ## Customize 38 | 39 | Lib very simple to customize. You can configure everything. 40 | To do this you need create block `variables` on one of levels in your project and override any variable in it. So, list of variables you can watch [here](https://github.com/verybigman/bem-content/blob/master/common.blocks/variables/variables.styl). 41 | 42 | ### Authors 43 | 44 | - Anton Winogradov ([verybigman](https://github.com/verybigman)) @awinogradov 45 | 46 | ### Ideas 47 | 48 | Please, talk about your ideas by GitHub [issues](https://github.com/verybigman/bem-typography/issues). 49 | 50 | ### [MIT](http://en.wikipedia.org/wiki/MIT_License) License 51 | -------------------------------------------------------------------------------- /README.ru.md: -------------------------------------------------------------------------------- 1 | # bem-typography 2 | 3 | Библиотека для работы с типографикой в BEM терминах. Вдохновение пришло отсюда [Gridlover](http://www.gridlover.net/app/). 4 | 5 | ### [MIT](http://en.wikipedia.org/wiki/MIT_License) License 6 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bem-typography", 3 | "version": "1.1.0", 4 | "description": "Library for right work with typography in BEM methodology", 5 | "repository": { 6 | "type": "git", 7 | "url": "git://github.com/verybigman/bem-typography.git" 8 | }, 9 | "keywords": [ 10 | "bem", 11 | "stylus", 12 | "typography" 13 | ], 14 | "authors": [ 15 | "Anton Winogradov " 16 | ], 17 | "ignore": [ 18 | "node_modules", 19 | "libs" 20 | ], 21 | "dependencies": { 22 | "bem-core": "2.8.0" 23 | }, 24 | "devDependencies": { 25 | "bem-pr": "~0.10.0" 26 | }, 27 | "license": "MIT" 28 | } 29 | -------------------------------------------------------------------------------- /common.blocks/.bem/level.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('../../.bem/levels/blocks.js'); 2 | -------------------------------------------------------------------------------- /common.blocks/blockquote/blockquote.bemhtml: -------------------------------------------------------------------------------- 1 | block('blockquote')( 2 | 3 | tag()('blockquote'), 4 | 5 | content()(function() { 6 | return [ 7 | { 8 | block : 'paragraph', 9 | mix : { block : this.block, elem : 'content' }, 10 | content : this.ctx.content 11 | }, 12 | this.ctx.source && { 13 | elem : 'footer', 14 | tag : 'footer', 15 | content : this.ctx.source 16 | } 17 | ]; 18 | }) 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /common.blocks/blockquote/blockquote.bh.js: -------------------------------------------------------------------------------- 1 | module.exports = function(bh) { 2 | 3 | bh.match('blockquote', function(ctx, json) { 4 | ctx.tag('blockquote'); 5 | 6 | ctx.content([ 7 | { 8 | block : 'paragraph', 9 | mix : { block : json.block, elem : 'content' }, 10 | content : ctx.content() 11 | }, 12 | json.source && { 13 | elem : 'footer', 14 | tag : 'footer', 15 | content : json.source 16 | } 17 | ], true); 18 | }); 19 | 20 | }; 21 | -------------------------------------------------------------------------------- /common.blocks/blockquote/blockquote.deps.js: -------------------------------------------------------------------------------- 1 | [{ 2 | mustDeps : [ 3 | { block : 'i-bem' }, 4 | { block : 'paragraph' } 5 | ] 6 | }] 7 | -------------------------------------------------------------------------------- /common.blocks/blockquote/blockquote.en.md: -------------------------------------------------------------------------------- 1 | # Blockquote 2 | 3 | No comments. 4 | 5 | ## Block usage 6 | 7 | ``` js 8 | { 9 | block : 'blockquote', 10 | content : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.' 11 | }, 12 | { 13 | block : 'blockquote', 14 | source : 'Anton Winogradov', 15 | content : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.' 16 | } 17 | ``` 18 | 19 | ## Custom fields of a block 20 | 21 | The following custom fields could be specified in BEMJSON declaration of the block: 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 34 | 35 | 36 |
Custom field nameTypeDescription
source 32 | String 33 | Source of blockquote
37 | -------------------------------------------------------------------------------- /common.blocks/blockquote/blockquote.examples/.bem/level.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('../../../../.bem/levels/tests'); 2 | -------------------------------------------------------------------------------- /common.blocks/blockquote/blockquote.examples/simple.bemjson.js: -------------------------------------------------------------------------------- 1 | ({ 2 | block : 'page', 3 | title : 'bem-content: blockquote', 4 | head : [ 5 | { elem : 'css', url : '_simple.css' }, 6 | { elem : 'js', url : '_simple.js' } 7 | ], 8 | content : [ 9 | { block : 'blockquote', content : 'Default blockquote' }, 10 | { 11 | block : 'blockquote', 12 | source : 'Anton Winogradov', 13 | content : [ 14 | 'Blockquote with source' 15 | ] 16 | }, 17 | { tag : 'hr' }, 18 | { 19 | block : 'blockquote', 20 | mods : { test : 'mod' }, 21 | source : 'Anton Winogradov', 22 | content : [ 23 | 'Blockquote with mod' 24 | ] 25 | }, 26 | { 27 | block : 'blockquote', 28 | mix : { block : 'custom', elem : 'item' }, 29 | source : 'Anton Winogradov', 30 | content : [ 31 | 'Blockquote with mix' 32 | ] 33 | }, 34 | { 35 | block : 'blockquote', 36 | attrs : { 'data-title' : 'Blockquote title', title : 'Blockquote title' }, 37 | source : 'Anton Winogradov', 38 | content : [ 39 | 'Blockquote with custom attributes' 40 | ] 41 | }, 42 | { 43 | block : 'blockquote', 44 | mods : { test : 'mod' }, 45 | mix : { block : 'custom', elem : 'item' }, 46 | attrs : { 'data-title' : 'All in one', title : 'All in one' }, 47 | source : 'Anton Winogradov', 48 | content : [ 49 | 'All in one' 50 | ] 51 | } 52 | ] 53 | }) 54 | -------------------------------------------------------------------------------- /common.blocks/blockquote/blockquote.ru.md: -------------------------------------------------------------------------------- 1 | # Blockquote 2 | 3 | Блок `blockquote` используется для оформления цитат в тексте. 4 | 5 | ## Использование блока 6 | 7 | ``` js 8 | { 9 | block : 'blockquote', 10 | content : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.' 11 | }, 12 | { 13 | block : 'blockquote', 14 | source : 'Anton Winogradov', 15 | content : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.' 16 | } 17 | ``` 18 | 19 | ## Специализированные поля блока 20 | 21 | Список зарезервированных полей входного BEMJSON: 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 34 | 35 | 36 |
ПолеТипОписание
source 32 | String 33 | Источник цитаты
37 | -------------------------------------------------------------------------------- /common.blocks/blockquote/blockquote.tmpl-specs/.bem/level.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('../../../../.bem/levels/tests'); 2 | -------------------------------------------------------------------------------- /common.blocks/blockquote/blockquote.tmpl-specs/10-simple.bemjson.js: -------------------------------------------------------------------------------- 1 | ({ 2 | block : 'blockquote', 3 | mods : { test : 'mod' }, 4 | mix : { block : 'custom', elem : 'item' }, 5 | attrs : { 'data-title' : 'All in one', title : 'All in one' }, 6 | source : 'Anton Winogradov', 7 | content : [ 8 | 'All in one' 9 | ] 10 | }); 11 | -------------------------------------------------------------------------------- /common.blocks/blockquote/blockquote.tmpl-specs/10-simple.html: -------------------------------------------------------------------------------- 1 |

All in one

Anton Winogradov
2 | -------------------------------------------------------------------------------- /common.blocks/calc/__font/calc__font.deps.js: -------------------------------------------------------------------------------- 1 | [{ 2 | mustDeps : [ 3 | { block : 'calc', elem : 'rem' } 4 | ] 5 | }] 6 | -------------------------------------------------------------------------------- /common.blocks/calc/__font/calc__font.styl: -------------------------------------------------------------------------------- 1 | $int_font_size = unit($font_size, ''); 2 | $line_height = unit($line_base, '') / $int_font_size; 3 | $rem_font_size = remify($font_size); 4 | $rem_line_height = remify(unit(floor($line_height * $int_font_size), 'px')); 5 | -------------------------------------------------------------------------------- /common.blocks/calc/__rem/calc__rem.deps.js: -------------------------------------------------------------------------------- 1 | [{ 2 | mustDeps : [ 3 | { block : 'variables' } 4 | ] 5 | }] 6 | -------------------------------------------------------------------------------- /common.blocks/calc/__rem/calc__rem.styl: -------------------------------------------------------------------------------- 1 | remify(value) { 2 | u = unit(value); 3 | 4 | if (u is 'px') { 5 | return unit(value/unit($rem_base, ''), 'rem'); 6 | } else { 7 | return unit(value, u); 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /common.blocks/calc/calc.en.md: -------------------------------------------------------------------------------- 1 | # Calc 2 | 3 | Block for calculating font sizes. 4 | 5 | ## Block elements 6 | 7 | ### __rem 8 | 9 | Element for converting PX to REM. Use it by deps.js for calculating rem 10 | values in your styles. 11 | 12 | ### __font 13 | 14 | Variables with calculated base font sizes in rem from `variables` block values in px. 15 | -------------------------------------------------------------------------------- /common.blocks/calc/calc.ru.md: -------------------------------------------------------------------------------- 1 | # Calc 2 | 3 | Блок для расчета размеров шрифтов. 4 | 5 | ## Block elements 6 | 7 | ### __rem 8 | 9 | Элемент для конвертации PX в REM. Можно использовать с помощью deps.js 10 | для пересчета px в rem в любых ваших стилях. 11 | 12 | ### __font 13 | 14 | Переменные с пересчитанными в rem значениями базовых размеров шрифтов. 15 | Значения для расчета взяты из блока `variables` в px. 16 | -------------------------------------------------------------------------------- /common.blocks/heading/heading.bemhtml: -------------------------------------------------------------------------------- 1 | block('heading')( 2 | tag()('h1'), 3 | mod('size', 's').tag()('h4'), 4 | mod('size', 'm').tag()('h3'), 5 | mod('size', 'l').tag()('h2'), 6 | mod('size', 'xl').tag()('h1') 7 | ); 8 | -------------------------------------------------------------------------------- /common.blocks/heading/heading.bh.js: -------------------------------------------------------------------------------- 1 | module.exports = function(bh) { 2 | 3 | bh.match('heading', function(ctx) { 4 | ctx.tag('h1', true); 5 | }); 6 | 7 | bh.match('heading_size_s', function(ctx) { 8 | ctx.tag('h4', true); 9 | }); 10 | 11 | bh.match('heading_size_m', function(ctx) { 12 | ctx.tag('h3', true); 13 | }); 14 | 15 | bh.match('heading_size_l', function(ctx) { 16 | ctx.tag('h2', true); 17 | }); 18 | 19 | bh.match('heading_size_xl', function(ctx) { 20 | ctx.tag('h1', true); 21 | }); 22 | 23 | }; 24 | -------------------------------------------------------------------------------- /common.blocks/heading/heading.deps.js: -------------------------------------------------------------------------------- 1 | [{ 2 | mustDeps : [ 3 | { block : 'i-bem' }, 4 | { block : 'calc', elem : 'font' } 5 | ] 6 | }] 7 | -------------------------------------------------------------------------------- /common.blocks/heading/heading.en.md: -------------------------------------------------------------------------------- 1 | # Heading 2 | 3 | Block `heading` need for create h1, h2, h3, h4 tags. 4 | 5 | ## Block usage 6 | 7 | ``` js 8 | { block : 'heading', mods : { size : 'xl' }, content : 'Level 1' }, 9 | { block : 'heading', mods : { size : 'l' }, content : 'Level 2' }, 10 | { block : 'heading', mods : { size : 'm' }, content : 'Level 3' }, 11 | { block : 'heading', mods : { size : 's' }, content : 'Level 4' } 12 | ``` 13 | 14 | You can find all settings for styling in 'variables' block. 15 | 16 | ## Custom fields of a block 17 | 18 | The following custom fields could be specified in BEMJSON declaration of the block: 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 31 | 32 | 33 |
ModsTypeDescription
size 29 | String 30 | Heading level. Use on xl, l, m, or s for h1, h2, h3, h4 levels.
34 | -------------------------------------------------------------------------------- /common.blocks/heading/heading.examples/.bem/level.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('../../../../.bem/levels/tests'); 2 | -------------------------------------------------------------------------------- /common.blocks/heading/heading.examples/simple.bemjson.js: -------------------------------------------------------------------------------- 1 | ({ 2 | block : 'page', 3 | title : 'bem-content: heading', 4 | head : [ 5 | { elem : 'css', url : '_simple.css' }, 6 | { elem : 'js', url : '_simple.js' } 7 | ], 8 | content : [ 9 | { block : 'heading', content : 'Default heading' }, 10 | { block : 'heading', mods : { size : 's' }, content : 'Heading of level 1' }, 11 | { block : 'heading', mods: { size: 'm' }, content : 'Heading of level 2' }, 12 | { block : 'heading', mods: { size: 'l' }, content : 'Heading of level 3' }, 13 | { block : 'heading', mods: { size: 'xl' }, content : 'Heading of level 4' }, 14 | { tag : 'hr' }, 15 | { 16 | block : 'heading', 17 | content : [ 18 | 'Heading', 19 | ' from ', 20 | 'array' 21 | ] 22 | }, 23 | { 24 | block : 'heading', 25 | mods : { test : 'mod' }, 26 | content : 'Heading with mods' 27 | }, 28 | { 29 | block : 'heading', 30 | mix : { block : 'custom', elem : 'item' }, 31 | content : 'Heading with mix' 32 | }, 33 | { 34 | block : 'heading', 35 | attrs : { 'data-title' : 'Heading title', title : 'Heading title' }, 36 | content : 'Heading with custom attributes' 37 | }, 38 | { 39 | block : 'heading', 40 | lvl : 2, 41 | mods : { test : 'mod' }, 42 | mix : { block : 'custom', elem : 'item' }, 43 | attrs : { 'data-title' : 'All in one', title : 'All in one' }, 44 | content : 'All in one' 45 | }, 46 | ] 47 | }) 48 | -------------------------------------------------------------------------------- /common.blocks/heading/heading.ru.md: -------------------------------------------------------------------------------- 1 | # Heading 2 | 3 | Блок `heading` используется для создания h1, h2, h3, h4 тэгов. 4 | 5 | ## Использование блока 6 | 7 | ``` js 8 | { block : 'heading', mods : { size : 'xl' }, content : 'Level 1' }, 9 | { block : 'heading', mods : { size : 'l' }, content : 'Level 2' }, 10 | { block : 'heading', mods : { size : 'm' }, content : 'Level 3' }, 11 | { block : 'heading', mods : { size : 's' }, content : 'Level 4' } 12 | ``` 13 | 14 | Все настройки можно найти в блоке 'variables'. 15 | 16 | ## Специализированные поля блока 17 | 18 | Список зарезервированных полей входного BEMJSON: 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 31 | 32 | 33 |
ПолеТипОписание
size 29 | String 30 | Уровень заголовка. Доступны xl, l, m или s для h1, h2, h3 и h4 соответсвенно.
34 | -------------------------------------------------------------------------------- /common.blocks/heading/heading.tmpl-specs/.bem/level.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('../../../../.bem/levels/tests'); 2 | -------------------------------------------------------------------------------- /common.blocks/heading/heading.tmpl-specs/10-simple.bemjson.js: -------------------------------------------------------------------------------- 1 | ({ 2 | block : 'heading', 3 | mods : { test : 'mod', size : 'm' }, 4 | mix : { block : 'custom', elem : 'item' }, 5 | attrs : { 'data-title' : 'All in one', title : 'All in one' }, 6 | content : 'All in one' 7 | }); 8 | -------------------------------------------------------------------------------- /common.blocks/heading/heading.tmpl-specs/10-simple.html: -------------------------------------------------------------------------------- 1 |

All in one

2 | -------------------------------------------------------------------------------- /common.blocks/list/_type/list_type_ordered.bemhtml: -------------------------------------------------------------------------------- 1 | block('list').mod('type', 'ordered') ( 2 | tag()('ol') 3 | ); 4 | -------------------------------------------------------------------------------- /common.blocks/list/_type/list_type_ordered.bh.js: -------------------------------------------------------------------------------- 1 | module.exports = function(bh) { 2 | 3 | bh.match('list_type_ordered', function(ctx) { 4 | ctx.tag('ol'); 5 | }); 6 | 7 | }; 8 | -------------------------------------------------------------------------------- /common.blocks/list/list.bemhtml: -------------------------------------------------------------------------------- 1 | block('list') ( 2 | tag()('ul'), 3 | 4 | content()(function() { 5 | var ctx = this.ctx; 6 | 7 | return (ctx.items || []).map(function(item) { 8 | return [ 9 | { 10 | elem : 'item', 11 | tag : 'li', 12 | content : item 13 | } 14 | ]; 15 | }); 16 | }) 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /common.blocks/list/list.bh.js: -------------------------------------------------------------------------------- 1 | module.exports = function(bh) { 2 | 3 | bh.match('list', function(ctx, json) { 4 | ctx.tag('ul'); 5 | 6 | ctx.content((json.items || []).map(function(item) { 7 | return { 8 | elem : 'item', 9 | tag : 'li', 10 | content : item 11 | }; 12 | })); 13 | }); 14 | 15 | }; 16 | -------------------------------------------------------------------------------- /common.blocks/list/list.deps.js: -------------------------------------------------------------------------------- 1 | [{ 2 | mustDeps : [ 3 | { block : 'i-bem' } 4 | ], 5 | shouldDeps : [ 6 | { elem : 'item' }, 7 | { mods : { type : 'ordered' } } 8 | ] 9 | }] 10 | -------------------------------------------------------------------------------- /common.blocks/list/list.en.md: -------------------------------------------------------------------------------- 1 | # List 2 | 3 | Block `list` need for create ordered and unordered lists. 4 | 5 | ## Block usage 6 | 7 | ``` js 8 | { 9 | block : 'list', 10 | items: [ 'item 1', 'item 2' ] 11 | } 12 | ``` 13 | 14 | ## Nested lists 15 | 16 | ``` js 17 | { 18 | block : 'list', 19 | items : [ 20 | 'item 1', 21 | [ 22 | 'item 2', 23 | { 24 | block : 'list', 25 | items : [ 'nested item 1', 'nested item 2' ] 26 | } 27 | ] 28 | ] 29 | } 30 | ``` 31 | 32 | ## Custom fields of a block 33 | 34 | The following custom fields could be specified in BEMJSON declaration of the block: 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 47 | 48 | 49 |
Custom field nameTypeDescription
items 45 | Array 46 | Array of list items. Item can be string, object or array.
50 | 51 | ## Modifiers of a block 52 | 53 | ### _type 54 | 55 | - ordered list (list_type_ordered) 56 | 57 | ``` js 58 | { 59 | block : 'list', 60 | mods: { type : 'ordered' }, 61 | items: [ 'ordered item 1', 'ordered item 2' ] 62 | } 63 | ``` 64 | -------------------------------------------------------------------------------- /common.blocks/list/list.examples/.bem/level.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('../../../../.bem/levels/tests'); 2 | -------------------------------------------------------------------------------- /common.blocks/list/list.examples/simple.bemjson.js: -------------------------------------------------------------------------------- 1 | ({ 2 | block : 'page', 3 | title : 'bem-content: list', 4 | head : [ 5 | { elem : 'css', url : '_simple.css' }, 6 | { elem : 'js', url : '_simple.js' } 7 | ], 8 | content : [ 9 | { 10 | block : 'list', 11 | items : [ 12 | 'item 1', 13 | 'item 2', 14 | 'item 3' 15 | ] 16 | }, 17 | { 18 | block : 'list', 19 | items : [ 20 | 'item 1', 21 | 'item 2', 22 | 'item 3', 23 | [ 24 | { 25 | block : 'list', 26 | items : ['nested item 1', 'nested item 2'] 27 | } 28 | ] 29 | ] 30 | }, 31 | { 32 | block : 'list', 33 | items : [ 34 | 'item 1', 35 | 'item 2', 36 | 'item 3', 37 | [ 38 | 'item 4', 39 | { 40 | block : 'list', 41 | items : ['nested item 1', 'nested item 2'] 42 | } 43 | ] 44 | ] 45 | }, 46 | { 47 | block : 'list', 48 | items : [ 49 | 'item 1', 50 | 'item 2', 51 | 'item 3', 52 | [ 53 | 'item 4', 54 | { 55 | block : 'list', 56 | mods : { type : 'ordered' }, 57 | items : ['nested and ordered item 1', 'nested and ordered item 2'] 58 | } 59 | ] 60 | ] 61 | }, 62 | { 63 | block : 'list', 64 | mods : { type : 'ordered' }, 65 | items : [ 66 | 'ordered item 1', 67 | 'ordered item 2', 68 | 'ordered item 3' 69 | ] 70 | }, 71 | { 72 | block : 'list', 73 | mods : { type : 'ordered' }, 74 | items : [ 75 | 'ordered item 1', 76 | 'ordered item 2', 77 | 'ordered item 3', 78 | [ 79 | 'ordered item 4', 80 | { 81 | block : 'list', 82 | items : ['nested item 1', 'nested item 2'] 83 | } 84 | ] 85 | ] 86 | }, 87 | { 88 | block : 'list', 89 | mods : { type : 'ordered' }, 90 | items : [ 91 | 'ordered item 1', 92 | 'ordered item 2', 93 | 'ordered item 3', 94 | [ 95 | 'ordered item 4', 96 | { 97 | block : 'list', 98 | mods : { type : 'ordered' }, 99 | items : ['nested and ordered item 1', 'nested and ordered item 2'] 100 | } 101 | ] 102 | ] 103 | }, 104 | { tag : 'hr' }, 105 | { 106 | block : 'list', 107 | mods : { type : 'ordered', test : 'mod' }, 108 | items : [ 109 | 'ordered item 1', 110 | 'ordered item 2', 111 | 'ordered item 3' 112 | ] 113 | }, 114 | { 115 | block : 'list', 116 | mods : { type : 'ordered' }, 117 | mix : { block : 'custom', elem : 'item' }, 118 | items : [ 119 | 'ordered item 1', 120 | 'ordered item 2', 121 | 'ordered item 3' 122 | ] 123 | }, 124 | { 125 | block : 'list', 126 | mods : { type : 'ordered' }, 127 | attrs : { 'data-title' : 'List title', title : 'List title' }, 128 | items : [ 129 | 'ordered item 1', 130 | 'ordered item 2', 131 | 'ordered item 3' 132 | ] 133 | }, 134 | { 135 | block : 'list', 136 | mods : { type : 'ordered', test : 'mod' }, 137 | mix : { block : 'custom', elem : 'item' }, 138 | attrs : { 'data-title' : 'All in one', title : 'All in one' }, 139 | items : [ 140 | 'ordered item 1', 141 | 'ordered item 2', 142 | 'ordered item 3' 143 | ] 144 | } 145 | ] 146 | }) 147 | -------------------------------------------------------------------------------- /common.blocks/list/list.ru.md: -------------------------------------------------------------------------------- 1 | # List 2 | 3 | Используется для создания списков. 4 | 5 | # Использование блока 6 | 7 | ``` js 8 | { 9 | block : 'list', 10 | items: [ 'unordered 1', 'unordered 2' ] 11 | } 12 | ``` 13 | 14 | ## Вложенных списков 15 | 16 | ``` js 17 | { 18 | block : 'list', 19 | items : [ 20 | 'item 1', 21 | [ 22 | 'item 2', 23 | { 24 | block : 'list', 25 | items : [ 'nested item 1', 'nested item 2' ] 26 | } 27 | ] 28 | ] 29 | } 30 | ``` 31 | 32 | ## Специализированные поля блока 33 | 34 | Список зарезервированных полей входного BEMJSON: 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 47 | 48 | 49 |
ПолеТипОписание
items 45 | Array 46 | Массив элементов списка. Элемент может быть как строкой, объектом и массивом.
50 | 51 | ## Модификаторы блока 52 | 53 | ### _type 54 | 55 | - упорядоченный список (list_type_ordered) 56 | 57 | ``` js 58 | { 59 | block : 'list', 60 | mods: { type : 'ordered' }, 61 | items: [ 'ordered item 1', 'ordered item 2' ] 62 | } 63 | ``` 64 | -------------------------------------------------------------------------------- /common.blocks/list/list.tmpl-specs/.bem/level.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('../../../../.bem/levels/tests'); 2 | -------------------------------------------------------------------------------- /common.blocks/list/list.tmpl-specs/10-simple.bemjson.js: -------------------------------------------------------------------------------- 1 | ({ 2 | block : 'list', 3 | mods : { type : 'ordered', test : 'mod' }, 4 | mix : { block : 'custom', elem : 'item' }, 5 | attrs : { 'data-title' : 'All in one', title : 'All in one' }, 6 | items : [ 7 | 'ordered item 1', 8 | 'ordered item 2', 9 | 'ordered item 3', 10 | [ 11 | 'ordered item 4', 12 | { 13 | block : 'list', 14 | items : ['nested item 1', 'nested item 2'] 15 | } 16 | ] 17 | ] 18 | }); 19 | -------------------------------------------------------------------------------- /common.blocks/list/list.tmpl-specs/10-simple.html: -------------------------------------------------------------------------------- 1 |
  1. ordered item 1
  2. ordered item 2
  3. ordered item 3
  4. ordered item 4
    • nested item 1
    • nested item 2
2 | -------------------------------------------------------------------------------- /common.blocks/paragraph/paragraph.bemhtml: -------------------------------------------------------------------------------- 1 | block('paragraph')( 2 | 3 | tag()('p'), 4 | 5 | content()(function() { 6 | return [ 7 | this.ctx.mark && { 8 | elem : 'marker', 9 | tag : 'span', 10 | content : this.ctx.mark 11 | }, 12 | applyNext() 13 | ]; 14 | }) 15 | 16 | ); 17 | -------------------------------------------------------------------------------- /common.blocks/paragraph/paragraph.bh.js: -------------------------------------------------------------------------------- 1 | module.exports = function(bh) { 2 | 3 | bh.match('paragraph', function(ctx, json) { 4 | ctx.tag('p'); 5 | 6 | ctx.content([ 7 | json.mark && { 8 | elem : 'marker', 9 | tag : 'span', 10 | content : json.mark 11 | }, 12 | ctx.content() 13 | ], true); 14 | }); 15 | 16 | }; 17 | -------------------------------------------------------------------------------- /common.blocks/paragraph/paragraph.deps.js: -------------------------------------------------------------------------------- 1 | [{ 2 | mustDeps : [ 3 | { block : 'i-bem' } 4 | ] 5 | }] 6 | -------------------------------------------------------------------------------- /common.blocks/paragraph/paragraph.en.md: -------------------------------------------------------------------------------- 1 | # Paragraph 2 | 3 | Create text paragraphs 4 | 5 | ## Block usage 6 | 7 | ``` js 8 | { block : 'paragraph', content : 'Default paragraph' }, 9 | { block : 'paragraph', mark : 'nb', content : 'Paragraph with NB' } 10 | ``` 11 | 12 | ## Custom fields of a block 13 | 14 | The following custom fields could be specified in BEMJSON declaration of the block: 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 29 |
Custom field nameTypeDescription
mark 25 | String 26 | Marker for paragraph. Ex: NB
30 | 31 | ## Modifiers of a block 32 | 33 | ### _lead 34 | 35 | Leader paragraph for articles 36 | -------------------------------------------------------------------------------- /common.blocks/paragraph/paragraph.examples/.bem/level.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('../../../../.bem/levels/tests'); 2 | -------------------------------------------------------------------------------- /common.blocks/paragraph/paragraph.examples/simple.bemjson.js: -------------------------------------------------------------------------------- 1 | ({ 2 | block : 'page', 3 | title : 'bem-content: paragraph', 4 | head : [ 5 | { elem : 'css', url : '_simple.css' }, 6 | { elem : 'js', url : '_simple.js' } 7 | ], 8 | content : [ 9 | { block : 'paragraph', content : 'Default paragraph' }, 10 | { 11 | block : 'paragraph', 12 | mods : { type : 'lead' }, 13 | content : 'Lead paragraph' 14 | }, 15 | { 16 | block : 'paragraph', 17 | mark : 'nb', 18 | content : 'Paragraph with mark: nb' 19 | }, 20 | { tag : 'hr' }, 21 | { 22 | block : 'paragraph', 23 | content : [ 24 | 'Paragraph', 25 | ' from ', 26 | 'array' 27 | ] 28 | }, 29 | { 30 | block : 'paragraph', 31 | mods : { test : 'mod' }, 32 | content : 'Paragraph with mods' 33 | }, 34 | { 35 | block : 'paragraph', 36 | mix : { block : 'custom', elem : 'item' }, 37 | content : 'Paragraph with mix' 38 | }, 39 | { 40 | block : 'paragraph', 41 | attrs : { 'data-title' : 'Paragraph title', title : 'Paragraph title' }, 42 | content : 'Paragraph with custom attributes' 43 | }, 44 | { 45 | block : 'paragraph', 46 | mark : 'Ex:', 47 | mods : { type : 'lead', test : 'mod' }, 48 | mix : { block : 'custom', elem : 'item' }, 49 | attrs : { 'data-title' : 'All in one', title : 'All in one' }, 50 | content : 'All in one' 51 | }, 52 | ] 53 | }) 54 | -------------------------------------------------------------------------------- /common.blocks/paragraph/paragraph.ru.md: -------------------------------------------------------------------------------- 1 | # Paragraph 2 | 3 | Описание абзацев в тексте 4 | 5 | ## Использование блока 6 | 7 | ``` js 8 | { block : 'paragraph', content : 'Default paragraph' }, 9 | { block : 'paragraph', mark : 'nb', content : 'Paragraph with marker' } 10 | ``` 11 | 12 | ## Специализированные поля блока 13 | 14 | Список зарезервированных полей входного BEMJSON: 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 27 | 28 | 29 |
ПолеТипОписание
mark 25 | String 26 | Метка для абзаца. Например: NB
30 | 31 | ## Модификаторы блока 32 | 33 | ### _lead 34 | 35 | Заглавный параграф для текста 36 | -------------------------------------------------------------------------------- /common.blocks/paragraph/paragraph.tmpl-specs/.bem/level.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('../../../../.bem/levels/tests'); 2 | -------------------------------------------------------------------------------- /common.blocks/paragraph/paragraph.tmpl-specs/10-simple.bemjson.js: -------------------------------------------------------------------------------- 1 | ({ 2 | block : 'paragraph', 3 | mark : 'Ex:', 4 | mods : { type : 'lead', test : 'mod' }, 5 | mix : { block : 'custom', elem : 'item' }, 6 | attrs : { 'data-title' : 'All in one', title : 'All in one' }, 7 | content : 'All in one' 8 | }); 9 | -------------------------------------------------------------------------------- /common.blocks/paragraph/paragraph.tmpl-specs/10-simple.html: -------------------------------------------------------------------------------- 1 |

Ex:All in one

2 | -------------------------------------------------------------------------------- /common.blocks/typo/typo.deps.js: -------------------------------------------------------------------------------- 1 | [{ 2 | mustDeps : [ 3 | { block : 'calc', elem : 'font' } 4 | ] 5 | }] 6 | -------------------------------------------------------------------------------- /common.blocks/typo/typo.en.md: -------------------------------------------------------------------------------- 1 | # Typo 2 | 3 | Base typography stylesheets for native tags without classes. 4 | 5 | ## Block usage 6 | 7 | Add block `typo` in `page.deps.js`. 8 | 9 | ``` js 10 | [{ 11 | shouldDeps : [ 12 | { block : 'typo' } 13 | ] 14 | }] 15 | ``` 16 | -------------------------------------------------------------------------------- /common.blocks/typo/typo.ru.md: -------------------------------------------------------------------------------- 1 | # Typo 2 | 3 | Базовые стили для типографики для нативных тэгов. Если вы собираетесь применять стили 4 | к коду полученному компиляций из md, например, то вам нужен этот блок. 5 | 6 | ## Использование блока 7 | 8 | Добавьте блок `typo` как зависимость в `page.deps.js`. 9 | 10 | ``` js 11 | [{ 12 | shouldDeps : [ 13 | { block : 'typo' } 14 | ] 15 | }] 16 | ``` 17 | -------------------------------------------------------------------------------- /common.blocks/typo/typo.styl: -------------------------------------------------------------------------------- 1 | for $h in 1..4 { 2 | h{$h} { 3 | font-size: $rem_font_size * lookup('$h' + $h + '_scale'); 4 | line-height: $rem_line_height * lookup('$h' + $h + '_scale'); 5 | margin-top: 2 * $rem_font_size; 6 | margin-bottom: 1 * $rem_font_size; 7 | } 8 | } 9 | 10 | p { 11 | margin-top: $rem_line_height; 12 | margin-bottom: $rem_line_height; 13 | font-size: $rem_font_size; 14 | line-height: $rem_line_height; 15 | } 16 | -------------------------------------------------------------------------------- /common.blocks/variables/variables.en.md: -------------------------------------------------------------------------------- 1 | # Variables 2 | 3 | Base typography settings. 4 | 5 | - __$font_family__ - base font families 6 | - __$font_size__ - base font size (all blocks use it by base and scale self sizes) 7 | 8 | - __$heading_font_family__ - headings font family (default is __$font_family__) 9 | - __$heading_font_weight__ - heading font weight 10 | 11 | - __$h1_scale__ - first level heading scale from __$font_size__ 12 | - __$h2_scale__ - ... level heading scale from __$font_size__ 13 | - __$h3_scale__ - ... level heading scale from __$font_size__ 14 | - __$h4_scale__ - ... level heading scale from __$font_size__ 15 | 16 | - __$p_scale__ - lead paragraph scale from __$font_size__ 17 | 18 | - __$q_scale__ - blockquote scale from __$font_size__ 19 | -------------------------------------------------------------------------------- /common.blocks/variables/variables.ru.md: -------------------------------------------------------------------------------- 1 | # Variables 2 | 3 | Базовые настройки типографики. 4 | 5 | - __$font_family__ - базовые семейства шрифтов 6 | - __$font_size__ - базовый размер шрифта (все блоки беруют этот размер за основу и масштабируют свои размеры от этого значения) 7 | 8 | - __$heading_font_family__ - семейства шрифтов заголовков (по умолчанию __$font_family__) 9 | - __$heading_font_weight__ - толщина заголовков 10 | 11 | - __$h1_scale__ - масштаб заголовка первого уровня от __$font_size__ 12 | - __$h2_scale__ - масштаб заголовка ... уровня от __$font_size__ 13 | - __$h3_scale__ - масштаб заголовка ... уровня от __$font_size__ 14 | - __$h4_scale__ - масштаб заголовка ... уровня от __$font_size__ 15 | 16 | - __$p_scale__ - масштаб заголовочного абзаца от __$font_size__ 17 | 18 | - __$q_scale__ - масштаб цитаты от __$font_size__ 19 | -------------------------------------------------------------------------------- /common.blocks/variables/variables.styl: -------------------------------------------------------------------------------- 1 | $rem_base = 16px; 2 | $line_base = 20px; 3 | $font_size = 14px; 4 | 5 | // FAMILIES 6 | $font_family = Helvetica, Arial, sans-serif; 7 | $heading_font_family = $font_family; 8 | $heading_font_weight = 500; 9 | 10 | // HEADINGS 11 | // step is 0.375rem = 6px 12 | $h1_scale = 3; 13 | $h2_scale = 2.625; 14 | $h3_scale = 2.25; 15 | $h4_scale = 1.875; 16 | 17 | // PARAGRAPHS 18 | $p_scale = 1.25; // lead mod 19 | 20 | // BLOCKQUOTES 21 | $q_scale = 1.25; 22 | -------------------------------------------------------------------------------- /design/common.blocks/.bem/level.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('../../../.bem/levels/blocks.js'); 2 | -------------------------------------------------------------------------------- /design/common.blocks/heading/heading.deps.js: -------------------------------------------------------------------------------- 1 | [{ 2 | mustDeps : [ 3 | { block : 'calc', elem : 'font' } 4 | ] 5 | }] 6 | -------------------------------------------------------------------------------- /design/common.blocks/heading/heading.styl: -------------------------------------------------------------------------------- 1 | .heading 2 | { 3 | font-family: $heading_font_family 4 | font-weight: $heading_font_weight 5 | } 6 | -------------------------------------------------------------------------------- /design/common.blocks/paragraph/_type/paragraph_type_lead.deps.js: -------------------------------------------------------------------------------- 1 | [{ 2 | mustDeps : [ 3 | { block : 'calc', elem : 'font' } 4 | ] 5 | }] 6 | -------------------------------------------------------------------------------- /design/common.blocks/paragraph/_type/paragraph_type_lead.styl: -------------------------------------------------------------------------------- 1 | .paragraph_type_lead 2 | { 3 | font-size: $p_scale * $rem_font_size 4 | line-height: @font-size * $p_scale 5 | } 6 | -------------------------------------------------------------------------------- /design/common.blocks/print/print.en.md: -------------------------------------------------------------------------------- 1 | # Print 2 | 3 | Base print stylesheets. Inspired by [h5bp](https://github.com/h5bp/html5-boilerplate). 4 | 5 | ## Block usage 6 | 7 | Add block `print` as deps to block `page`. 8 | 9 | ``` js 10 | ({ 11 | mustDeps : [ 12 | 13 | ], 14 | shouldDeps : [ 15 | { block : 'print' } 16 | ] 17 | }) 18 | ``` 19 | -------------------------------------------------------------------------------- /design/common.blocks/print/print.ru.md: -------------------------------------------------------------------------------- 1 | # Print 2 | 3 | Базовые стили для печати. Частично код взят из [h5bp](https://github.com/h5bp/html5-boilerplate). 4 | 5 | ## Использование блока 6 | 7 | Добавьте блок `print` как зависимость к блоку `page`. 8 | 9 | ``` js 10 | ({ 11 | mustDeps : [ 12 | 13 | ], 14 | shouldDeps : [ 15 | { block : 'print' } 16 | ] 17 | }) 18 | ``` 19 | -------------------------------------------------------------------------------- /design/common.blocks/print/print.styl: -------------------------------------------------------------------------------- 1 | @media print { 2 | *, 3 | *:before, 4 | *:after { 5 | background: transparent !important; 6 | color: #000 !important; 7 | box-shadow: none !important; 8 | text-shadow: none !important; 9 | } 10 | 11 | a, 12 | a:visited { 13 | text-decoration: underline; 14 | } 15 | 16 | a[href]:after { 17 | content: " (" attr(href) ")"; 18 | } 19 | 20 | abbr[title]:after { 21 | content: " (" attr(title) ")"; 22 | } 23 | 24 | a[href^="#"]:after, 25 | a[href^="javascript:"]:after { 26 | content: ""; 27 | } 28 | 29 | pre, 30 | blockquote { 31 | border: 1px solid #999; 32 | page-break-inside: avoid; 33 | } 34 | 35 | thead { 36 | display: table-header-group; 37 | } 38 | 39 | tr, 40 | img { 41 | page-break-inside: avoid; 42 | } 43 | 44 | img { 45 | max-width: 100% !important; 46 | } 47 | 48 | p, 49 | h2, 50 | h3 { 51 | orphans: 3; 52 | widows: 3; 53 | } 54 | 55 | h2, 56 | h3 { 57 | page-break-after: avoid; 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /design/desktop.blocks/.bem/level.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('../../../.bem/levels/blocks.js'); 2 | -------------------------------------------------------------------------------- /design/touch.blocks/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bem-contrib/bem-typography/258feb29158c5e7bb9894fc4fbbd9a996f77c5e6/design/touch.blocks/.gitkeep -------------------------------------------------------------------------------- /desktop.blocks/.bem/level.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('../../.bem/levels/blocks.js'); 2 | -------------------------------------------------------------------------------- /desktop.bundles/.bem/level.js: -------------------------------------------------------------------------------- 1 | exports.baseLevelPath = require.resolve('../../.bem/levels/bundles.js'); 2 | -------------------------------------------------------------------------------- /desktop.bundles/index/index.bemjson.js: -------------------------------------------------------------------------------- 1 | ({ 2 | block : 'page', 3 | title : 'BEM Typography', 4 | favicon : 'www/favicon.ico', 5 | head : [{ elem : 'meta', attrs : { name : 'viewport', content : 'width=device-width, initial-scale=1.0' } }], 6 | styles : [{ elem : 'css', url : 'index.min.css' }], 7 | scripts : [{ elem : 'js', url : 'index.min.js' }], 8 | content : [ 9 | { 10 | elem : 'header', 11 | content : [ 12 | { block : 'heading', content : 'BEM Typography' }, 13 | { 14 | block : 'paragraph', 15 | mods : { type : 'lead' }, 16 | content : 'Library for simple work with typography.' 17 | } 18 | ] 19 | }, 20 | { 21 | elem : 'content', 22 | content : [ 23 | { 24 | block : 'section', 25 | tag : 'section', 26 | content : [ 27 | { 28 | block : 'heading', 29 | mods : { size : 'l' }, 30 | mix : { block : 'section', elem : 'title' }, 31 | content : 'Headings' 32 | }, 33 | { 34 | elem : 'content', 35 | content : [ 36 | { block : 'heading', mods : { size : 'xl' }, content : 'h1. Level 1' }, 37 | { block : 'heading', mods : { size : 'l' }, content : 'h2. Level 2' }, 38 | { block : 'heading', mods : { size : 'm' }, content : 'h3. Level 3' }, 39 | { block : 'heading', mods : { size : 's' }, content : 'h4. Level 4' }, 40 | { 41 | block : 'paragraph', 42 | content : [ 43 | 'Headings sizes writed in rem and uses auto calculating for pretty view.', 44 | 'You can customize sizes and math model in variables block.' 45 | ] 46 | } 47 | ] 48 | } 49 | ] 50 | }, 51 | { 52 | block : 'section', 53 | tag : 'section', 54 | content : [ 55 | { 56 | block : 'heading', 57 | mods : { size : 'l' }, 58 | mix : { block : 'section', elem : 'title' }, 59 | content : 'Paragraphs' 60 | }, 61 | { 62 | elem : 'content', 63 | content : [ 64 | { 65 | block : 'paragraph', 66 | mods : { type : 'lead' }, 67 | content : [ 68 | 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ', 69 | 'Aenean commodo ligula eget dolor. Aenean massa. ', 70 | 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. ', 71 | 'Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. ', 72 | 'Nulla consequat massa quis enim.' 73 | ] 74 | }, 75 | { 76 | block : 'paragraph', 77 | content : [ 78 | 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ', 79 | 'Aenean commodo ligula eget dolor. Aenean massa. ', 80 | 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. ', 81 | 'Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. ', 82 | 'Nulla consequat massa quis enim.' 83 | ] 84 | }, 85 | { 86 | block : 'paragraph', 87 | mods : { type : 'marked' }, 88 | mark : 'nb', 89 | content : [ 90 | 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ', 91 | 'Aenean commodo ligula eget dolor. Aenean massa. ', 92 | 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. ', 93 | 'Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. ', 94 | 'Nulla consequat massa quis enim.' 95 | ] 96 | }, 97 | { 98 | block : 'paragraph', 99 | content : 'Paragraphs sizes also customizable' 100 | } 101 | ] 102 | } 103 | ] 104 | }, 105 | { 106 | block : 'section', 107 | tag : 'section', 108 | content : [ 109 | { 110 | block : 'heading', 111 | mods : { size : 'l' }, 112 | mix : { block : 'section', elem : 'title' }, 113 | content : 'Lists' 114 | }, 115 | { 116 | elem : 'content', 117 | content : [ 118 | { 119 | block : 'list', 120 | items : [ 121 | 'item 1', 122 | 'item 2' 123 | ] 124 | }, 125 | { 126 | block : 'list', 127 | mods : { type : 'ordered' }, 128 | items : [ 129 | 'ordered item 1', 130 | 'ordered item 2' 131 | ] 132 | }, 133 | { 134 | block : 'list', 135 | items : [ 136 | 'item 1', 137 | [ 138 | 'item 2', 139 | { 140 | block : 'list', 141 | items : [ 142 | 'nested item 1', 143 | 'nested item 2' 144 | ] 145 | } 146 | ] 147 | ] 148 | }, 149 | { 150 | block : 'paragraph', 151 | content : [ 152 | 'BEM Content library add wrapper for ', 153 | 'image for caption writing and HTML5 semantic' 154 | ] 155 | } 156 | ] 157 | } 158 | ] 159 | }, 160 | { 161 | block : 'section', 162 | tag : 'section', 163 | content : [ 164 | { 165 | block : 'heading', 166 | mods : { size : 'l' }, 167 | mix : { block : 'section', elem : 'title' }, 168 | content : 'Blockquotes' 169 | }, 170 | { 171 | elem : 'content', 172 | content : [ 173 | { 174 | block : 'blockquote', 175 | content : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.' 176 | }, 177 | { 178 | block : 'blockquote', 179 | source : 'Anton Winogradov', 180 | content : 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.' 181 | } 182 | ] 183 | } 184 | ] 185 | } 186 | ] 187 | } 188 | ] 189 | }) 190 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "dependencies": { 4 | "bem-environ": "1.4.0" 5 | }, 6 | "devDependencies": { 7 | "bem": "~0.9.0", 8 | "bem-tools-autoprefixer": "~0.0.3", 9 | "bh": "3.3.0", 10 | "bower-npm-install": "~0.5.4", 11 | "bower": "1.3.12", 12 | "csscomb": "~3.0.3", 13 | "bem-naming": "0.5.1", 14 | "enb": "0.15.0", 15 | "enb-bem-techs": "^1.0.3", 16 | "enb-autoprefixer": "0.2.3", 17 | "enb-magic-platform": "0.4.5", 18 | "enb-bem-docs": "0.7.3", 19 | "enb-bem-examples": "0.5.9", 20 | "enb-bem-specs": "0.5.4", 21 | "enb-bem-tmpl-specs": "0.7.0", 22 | "enb-bemxjst": "1.3.4", 23 | "enb-bh": "0.4.1", 24 | "enb-borschik": "^1.5.0", 25 | "enb-diverse-js": "0.1.0", 26 | "enb-modules": "0.2.0", 27 | "enb-stylus": "1.2.2", 28 | "borschik-tech-cleancss": "2.0.0", 29 | "git-hooks": "~0.0.6", 30 | "http-server": "^0.7.2", 31 | "istanbul": "0.3.5", 32 | "jscs": "^1.11.2", 33 | "jscs-bem": "^0.1.2", 34 | "jshint": "2.6.0", 35 | "jshint-groups": "0.7.0", 36 | "stylus": "0.50.0", 37 | "svgo": "0.5.0" 38 | }, 39 | "scripts": { 40 | "start": "magic server", 41 | "make": "magic make --no-cache", 42 | "deps": "bower i", 43 | "compiled": "find . -iname '*.styl' | xargs stylus", 44 | "build": "npm run build-${TEST_SCOPE:-all}", 45 | "build-all": "npm run deps && magic make common.examples *.bundles/*", 46 | "build-specs": "npm run deps", 47 | "build-tmpls": "npm run deps", 48 | "test": "npm run build && npm run ${TEST_SCOPE:-test-all}", 49 | "test-all": "npm run lint && npm run unit && npm run test-tmpls", 50 | "test-specs": "magic run specs", 51 | "test-tmpls": "magic run tmpl-specs", 52 | "lint": "jshint-groups && jscs .", 53 | "specs": "npm run test-specs", 54 | "tmpls": "npm run test-tmpls", 55 | "unit": "npm run test-specs", 56 | "coverage": "ISTANBUL_COVERAGE=yes npm run specs" 57 | }, 58 | "engines": { 59 | "node": ">=0.10" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /test.blocks/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bem-contrib/bem-typography/258feb29158c5e7bb9894fc4fbbd9a996f77c5e6/test.blocks/.gitkeep -------------------------------------------------------------------------------- /touch.blocks/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bem-contrib/bem-typography/258feb29158c5e7bb9894fc4fbbd9a996f77c5e6/touch.blocks/.gitkeep -------------------------------------------------------------------------------- /www/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bem-contrib/bem-typography/258feb29158c5e7bb9894fc4fbbd9a996f77c5e6/www/favicon.ico -------------------------------------------------------------------------------- /www/humans.txt: -------------------------------------------------------------------------------- 1 | Read more about this file here: http://humanstxt.org/ 2 | 3 | Don't forget add link to head: 4 | 5 | /* TEAM */ 6 | 7 | 8 | Your title: Your name. 9 | 10 | 11 | Site: email, link to a contact form, etc. 12 | 13 | 14 | Twitter: your Twitter username. 15 | 16 | 17 | Location: City, Country. 18 | 19 | [...] 20 | 21 | /* THANKS */ 22 | 23 | Name: name or url 24 | 25 | [...] 26 | 27 | /* SITE */ 28 | 29 | 30 | Last update: YYYY/MM/DD 31 | 32 | 33 | Standards: HTML5, CSS3,.. 34 | 35 | 36 | Components: Modernizr, jQuery, etc. 37 | 38 | 39 | Software: Software used for the development -------------------------------------------------------------------------------- /www/robots.txt: -------------------------------------------------------------------------------- 1 | # robotstxt.org/ 2 | 3 | User-agent: * 4 | --------------------------------------------------------------------------------