├── .bem └── templates │ └── bemjson.js ├── .bemrc ├── .borschik ├── .editorconfig ├── .enb └── make.js ├── .gitignore ├── README.md ├── common.blocks └── .gitkeep ├── desktop.blocks └── .gitkeep ├── desktop.bundles └── hello │ └── hello.bemjson.js ├── favicon.ico ├── index.html ├── package-lock.json └── package.json /.bem/templates/bemjson.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var EOL = require('os').EOL; 4 | 5 | module.exports = function (entity, naming) { 6 | return [ 7 | "module.exports = {", 8 | " block: 'page',", 9 | " title: 'Page " + entity.block + "',", 10 | " favicon: '/favicon.ico',", 11 | " head: [", 12 | " { elem: 'meta', attrs: { name: 'description', content: '' } },", 13 | " { elem: 'meta', attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' } },", 14 | " { elem: 'css', url: '" + entity.block + ".min.css' }", 15 | " ],", 16 | " scripts: [{ elem: 'js', url: '" + entity.block + ".min.js' }],", 17 | " mods: { theme: 'islands' },", 18 | " content: []", 19 | "};", 20 | "" 21 | ].join(EOL); 22 | }; 23 | -------------------------------------------------------------------------------- /.bemrc: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | 4 | levels: { 5 | 'common.blocks': {}, 6 | 'desktop.blocks': {}, 7 | 'desktop.bundles': {} 8 | }, 9 | 10 | modules: { 11 | 'bem-tools': { 12 | plugins: { 13 | create: { 14 | templates: { 15 | 'bemjson.js': '.bem/templates/bemjson.js', 16 | }, 17 | techs: ['css', 'js'], 18 | levels: { 19 | 'desktop.bundles': { 20 | techs: [ 21 | 'bemjson.js', 22 | ], 23 | }, 24 | 'common.blocks': { 25 | default: true 26 | } 27 | } 28 | } 29 | } 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /.borschik: -------------------------------------------------------------------------------- 1 | { 2 | "freeze_paths": { 3 | "./node_modules/**/*.svg": ":encodeURIComponent:", 4 | "./node_modules/**": ":base64:", 5 | "*.blocks/**/*.svg": ":encodeURIComponent:", 6 | "*.blocks/**": ":base64:" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs. 2 | # More information at http://EditorConfig.org 3 | 4 | # No .editorconfig files above the root directory 5 | root = true 6 | 7 | [*] 8 | charset = utf-8 9 | indent_size = 4 10 | end_of_line = lf 11 | indent_style = space 12 | trim_trailing_whitespace = true 13 | insert_final_newline = true 14 | 15 | [*.{bemjson.js,deps.js}] 16 | indent_size = 4 17 | 18 | [{bower,package}.json] 19 | indent_size = 2 20 | 21 | [*.md] 22 | trim_trailing_whitespace = false 23 | -------------------------------------------------------------------------------- /.enb/make.js: -------------------------------------------------------------------------------- 1 | const techs = { 2 | // essential 3 | fileProvider: require('enb/techs/file-provider'), 4 | fileMerge: require('enb/techs/file-merge'), 5 | // fileCopy: require('enb/techs/file-copy'), 6 | 7 | // optimization 8 | borschik: require('enb-borschik/techs/borschik'), 9 | 10 | // css 11 | postcss: require('enb-postcss/techs/enb-postcss'), 12 | postcssPlugins: [ 13 | require('postcss-import')(), 14 | require('postcss-each'), 15 | require('postcss-for'), 16 | require('postcss-simple-vars')(), 17 | require('postcss-color-function')(), 18 | require('postcss-calc')(), 19 | require('postcss-nested'), 20 | require('rebem-css'), 21 | require('postcss-url')({ url: 'inline' }), 22 | require('autoprefixer')(), 23 | require('postcss-reporter')() 24 | ], 25 | 26 | // js 27 | browserJs: require('enb-js/techs/browser-js'), 28 | 29 | // bemtree 30 | // bemtree: require('enb-bemxjst/techs/bemtree'), 31 | 32 | // bemhtml 33 | bemhtml: require('enb-bemxjst/techs/bemhtml'), 34 | bemjsonToHtml: require('enb-bemxjst/techs/bemjson-to-html') 35 | }, 36 | enbBemTechs = require('enb-bem-techs'), 37 | levels = [ 38 | { path: 'node_modules/bem-core/common.blocks', check: false }, 39 | { path: 'node_modules/bem-core/desktop.blocks', check: false }, 40 | { path: 'node_modules/bem-components-custom/common.blocks', check: false }, 41 | { path: 'node_modules/bem-components-custom/desktop.blocks', check: false }, 42 | { path: 'node_modules/bem-components-custom/design/common.blocks', check: false }, 43 | { path: 'node_modules/bem-components-custom/design/desktop.blocks', check: false }, 44 | { path: 'node_modules/whitepaper-bem', check: false }, 45 | 'common.blocks', 46 | 'desktop.blocks', 47 | ]; 48 | 49 | module.exports = function(config) { 50 | config.nodes('*.bundles/*', function(nodeConfig) { 51 | nodeConfig.addTechs([ 52 | // essential 53 | [enbBemTechs.levels, { levels: levels }], 54 | [techs.fileProvider, { target: '?.bemjson.js' }], 55 | [enbBemTechs.bemjsonToBemdecl], 56 | [enbBemTechs.deps], 57 | [enbBemTechs.files], 58 | 59 | // css 60 | [techs.postcss, { 61 | target: '?.css', 62 | oneOfSourceSuffixes: ['post.css', 'css'], 63 | plugins: techs.postcssPlugins 64 | }], 65 | 66 | // bemtree 67 | // [techs.bemtree, { sourceSuffixes: ['bemtree', 'bemtree.js'] }], 68 | 69 | // bemhtml 70 | [techs.bemhtml, { 71 | sourceSuffixes: ['bemhtml', 'bemhtml.js'], 72 | forceBaseTemplates: true, 73 | engineOptions : { elemJsInstances : true } 74 | }], 75 | 76 | // html 77 | [techs.bemjsonToHtml], 78 | 79 | // client bemhtml 80 | [enbBemTechs.depsByTechToBemdecl, { 81 | target: '?.bemhtml.bemdecl.js', 82 | sourceTech: 'js', 83 | destTech: 'bemhtml' 84 | }], 85 | [enbBemTechs.deps, { 86 | target: '?.bemhtml.deps.js', 87 | bemdeclFile: '?.bemhtml.bemdecl.js' 88 | }], 89 | [enbBemTechs.files, { 90 | depsFile: '?.bemhtml.deps.js', 91 | filesTarget: '?.bemhtml.files', 92 | dirsTarget: '?.bemhtml.dirs' 93 | }], 94 | [techs.bemhtml, { 95 | target: '?.browser.bemhtml.js', 96 | filesTarget: '?.bemhtml.files', 97 | sourceSuffixes: ['bemhtml', 'bemhtml.js'], 98 | engineOptions : { elemJsInstances : true } 99 | }], 100 | 101 | // js 102 | [techs.browserJs, { includeYM: true }], 103 | [techs.fileMerge, { 104 | target: '?.js', 105 | sources: ['?.browser.js', '?.browser.bemhtml.js'] 106 | }], 107 | 108 | // borschik 109 | [techs.borschik, { source: '?.js', target: '?.min.js', minify: true }], 110 | [techs.borschik, { source: '?.css', target: '?.min.css', minify: true }] 111 | 112 | 113 | // // Copy static 114 | // [techs.fileCopy, { source: '?.min.css', target: '../../?.min.css' }], 115 | // [techs.fileCopy, { source: '?.min.js', target: '../../?.min.js' }], 116 | // [techs.fileCopy, { source: '?.html', target: '../../?.html' }] 117 | ]); 118 | 119 | nodeConfig.addTargets([/* '?.bemtree.js', */ '?.html', '?.min.css', '?.min.js']); 120 | 121 | // nodeConfig.addTargets([/* '?.bemtree.js', */ '../../?.html', '../../?.min.css', '../../?.min.js']); 122 | }); 123 | }; 124 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store 3 | .idea/ 4 | *.iml 5 | .project 6 | .svn 7 | npm-debug.log 8 | 9 | # bem 10 | .bem/cache/ 11 | .enb/tmp/ 12 | *bundles*/*/*.* 13 | !*bundles*/*/*.bemjson.js 14 | !*bundles*/.bem/* 15 | *pages*/*/*.* 16 | !*pages*/*/*.bemjson.js 17 | !*pages*/.bem/* 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WHITEPAPER STUB 2 | 3 | Whitepaper-stub – шаблон проекта на БЭМ-стеке. Включает в себя минимальную конфигурацию для старта работы. 4 | 5 | ## Установка 6 | 7 | В командной строке необходимо выполнить следующие команды 8 | 9 | ``` 10 | git clone https://github.com/whitepapertools/whitepaper-stub.git --depth 1 my-whitepaper-project 11 | cd $_ 12 | npm install 13 | ``` 14 | 15 | ## Запуск 16 | 17 | Чтобы увидеть всё в браузере, нужна команда 18 | 19 | ``` npm start ``` 20 | 21 | ## Браузер 22 | 23 | Далее нужно в браузере перейти по ссылке `http://0.0.0.0:8080/` или `http://127.0.0.1:8080/`. На ней будет список всех страниц в проекте. Изначально в проекте лежит одна строка с примерами блоков. 24 | 25 | ## Как работать дальше? 26 | 27 | О том, как тут работать написано в нашем [обучении](http://whitepaper.tools/doc.html). 28 | -------------------------------------------------------------------------------- /common.blocks/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whitepapertools/whitepaper-stub/b58c35348e22b9da067afeb1fdbf156a6f4686f2/common.blocks/.gitkeep -------------------------------------------------------------------------------- /desktop.blocks/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whitepapertools/whitepaper-stub/b58c35348e22b9da067afeb1fdbf156a6f4686f2/desktop.blocks/.gitkeep -------------------------------------------------------------------------------- /desktop.bundles/hello/hello.bemjson.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | block: 'page', 3 | title: 'Hello page', 4 | favicon: '/favicon.ico', 5 | lang: 'ru', 6 | head: [ 7 | { elem: 'meta', attrs: { name: 'description', content: '' } }, 8 | { elem: 'meta', attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' } }, 9 | { elem: 'css', url: 'hello.min.css' }, 10 | { elem: 'js', url: 'https://code.jquery.com/jquery-3.2.1.js' }, 11 | ], 12 | scripts: [{ elem: 'js', url: 'hello.min.js' }], 13 | mods: { theme: 'islands' }, 14 | mix: { 15 | block: 'theme', 16 | mods: { color: 'whitepaper-default', space: 'default', size: 'default', gap: 'small', menu: 'default', breakpoint: 'default', font: 'ibm' } 17 | }, 18 | content: [ 19 | { 20 | block: 'text', 21 | mods: { size: 'xxl', view: 'primary' }, 22 | content: 'Hi! Write your first block here.' 23 | } 24 | ] 25 | }; 26 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/whitepapertools/whitepaper-stub/b58c35348e22b9da067afeb1fdbf156a6f4686f2/favicon.ico -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "", 3 | "name": "whitepaper-stub", 4 | "version": "0.0.1", 5 | "browserslist": [ 6 | "ie >= 10", 7 | "opera 12.1", 8 | "> 2%", 9 | "last 2 versions" 10 | ], 11 | "repository": { 12 | "type": "git", 13 | "url": "git://github.com/whitepapertools/whitepaper-stub.git" 14 | }, 15 | "engines": { 16 | "node": ">=4" 17 | }, 18 | "devDependencies": { 19 | "autoprefixer": "^7.2.6", 20 | "bem": "^2.0.0", 21 | "bem-components-custom": "3.0.3", 22 | "bem-core": "^4.2.1", 23 | "bem-tools-create": "^2.0.0", 24 | "enb": "^1.3.0", 25 | "enb-bem-techs": "^2.2.1", 26 | "enb-bemxjst": "^8.10.4", 27 | "enb-borschik": "^3.0.0", 28 | "enb-js": "^1.1.0", 29 | "enb-postcss": "^2.0.0", 30 | "gulp": "4.0", 31 | "gulp-bem-bundle-builder": "^0.1.5", 32 | "gulp-bem-bundler-fs": "^0.0.10", 33 | "gulp-bem-xjst": "^3.1.0", 34 | "gulp-concat": "^2.6.0", 35 | "gulp-csso": "^3.0.1", 36 | "gulp-debug": "^3.2.0", 37 | "gulp-if": "^2.0.2", 38 | "gulp-one-of": "^1.0.0", 39 | "gulp-postcss": "^7.0.1", 40 | "gulp-uglify": "^3.0.0", 41 | "merge2": "^1.2.2", 42 | "postcss-calc": "^6.0.0", 43 | "postcss-color-function": "^4.0.0", 44 | "postcss-each": "^0.10.0", 45 | "postcss-for": "^2.1.1", 46 | "postcss-import": "^10.0.0", 47 | "postcss-nested": "^2.0.2", 48 | "postcss-reporter": "^4.0.0", 49 | "postcss-simple-vars": "^4.0.0", 50 | "postcss-url": "^7.3.2", 51 | "rebem-css": "^0.2.0", 52 | "through2-filter": "^2.0.0", 53 | "whitepaper-bem": "^2.3.0", 54 | "ym": "^0.1.2" 55 | }, 56 | "scripts": { 57 | "test": "enb make && enb make clean && gulp", 58 | "start": "enb server", 59 | "build": "enb make" 60 | }, 61 | "private": true, 62 | "dependencies": {} 63 | } 64 | --------------------------------------------------------------------------------