Add builder files

hvab · Jan 4, 2017 · 07e4703 · 07e4703
1 parent eecac16
commit 07e4703
Show file tree

Hide file tree

Showing 20 changed files with 216 additions and 1 deletion.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,13 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,13 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Dependency directories
+node_modules
+
+# Distribute directories
+*.min.css
+
+# OS files
+.DS_Store
diff --git a/.htmlhintrc b/.htmlhintrc
@@ -0,0 +1,12 @@
+{
+  "attr-lowercase": true,
+  "attr-value-double-quotes": true,
+  "tag-pair": true,
+  "spec-char-escape": true,
+  "id-unique": true,
+  "src-not-empty": true,
+  "attr-no-duplication": true,
+  "title-require": true,
+  "tagname-lowercase": true,
+  "alt-require": true
+}
diff --git a/.stylelintrc b/.stylelintrc
@@ -0,0 +1,9 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "block-no-empty": null,
+    "declaration-empty-line-before": null,
+    "max-empty-lines": 2,
+    "indentation": null
+  }
+}
diff --git a/README.md b/README.md
@@ -1 +1,25 @@
-# vanilla-bemcss
+# Vanilla BEM CSS
+
+> Markup builder inspired by [BEM](https://bem.info) and [Vanilla CSS](https://pitercss.ru/8/pres/vanilla-css/)
+
+* File structure with BEM.
+* Bundles (e.g. `common.bundles/main/main.css`) work right in your browser without build.
+* After build your bundle compile into single file with `.min` suffix.
+
+Builder include:
+
+* Compile with `postcss-import`.
+* Rebase urls with `postcss-url`.
+* Prefixes with `autoprefixer`.
+* Minify with `csso`.
+
+
+```sh
+git clone https://github.com/palegrow/vanilla-bemcss.git new-project
+cd new-project
+npm install
+
+gulp --cwd common.bundles/main
+
+gulp --cwd desktop.bundles/main
+```
diff --git a/common.blocks/neucha/neucha.css b/common.blocks/neucha/neucha.css
@@ -0,0 +1,17 @@
+/* cyrillic */
+@font-face {
+  font-family: 'Neucha';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Neucha'), url("neucha__cyrillic.woff2") format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Neucha';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Neucha'), url("neucha__latin.woff2") format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
diff --git a/common.blocks/neucha/neucha__cyrillic.woff2 b/common.blocks/neucha/neucha__cyrillic.woff2
diff --git a/common.blocks/neucha/neucha__latin.woff2 b/common.blocks/neucha/neucha__latin.woff2
diff --git a/common.blocks/page/page.css b/common.blocks/page/page.css
@@ -0,0 +1,10 @@
+/* common.blocks/page/page.css */
+.page {
+  margin: 0;
+
+  background-image: url("page.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+
+  font-family: 'Neucha', Arial;
+}
diff --git a/common.blocks/page/page.svg b/common.blocks/page/page.svg
diff --git a/common.bundles/main/index.html b/common.bundles/main/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="ru-RU">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Тестовая страница (test page)</title>
+
+    <link rel="stylesheet" href="main.css">
+  </head>
+  <body class="page page_theme_pale">
+    <h1>Тестовая страница (test page)</h1>
+  </body>
+</html>
diff --git a/common.bundles/main/main.css b/common.bundles/main/main.css
@@ -0,0 +1,4 @@
+/* common.bundles/main/main.css */
+@import "../../common.blocks/neucha/neucha.css";
+@import "../../common.blocks/page/page.css";
+@import "../../design/common.blocks/page/page.css";
diff --git a/design/common.blocks/page/page.css b/design/common.blocks/page/page.css
@@ -0,0 +1,7 @@
+/* design/common.blocks/page/page.css */
+.page_theme_pale {
+  color: rgba(0, 0, 0, 0.87);
+  background-color: #fff;
+
+  font-size: 16px;
+}
diff --git a/design/desktop.blocks/page/page.css b/design/desktop.blocks/page/page.css
@@ -0,0 +1,5 @@
+/* design/desktop.blocks/page/page.css */
+.page_theme_pale {
+  color: #fff;
+  background-color: #000;
+}
diff --git a/desktop.blocks/page/page.css b/desktop.blocks/page/page.css
@@ -0,0 +1,6 @@
+/* desktop.blocks/page/page.css */
+.page {
+  padding: 1rem;
+
+  background-image: url("page.svg");
+}
diff --git a/desktop.blocks/page/page.svg b/desktop.blocks/page/page.svg
diff --git a/desktop.bundles/main/index.html b/desktop.bundles/main/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="ru-RU">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Тестовая страница (test page)</title>
+
+    <link rel="stylesheet" href="main.css">
+  </head>
+  <body class="page page_theme_pale">
+    <h1>Тестовая страница (test page)</h1>
+  </body>
+</html>
diff --git a/desktop.bundles/main/main.css b/desktop.bundles/main/main.css
@@ -0,0 +1,6 @@
+/* desktop.bundles/main/main.css */
+@import "../../common.blocks/neucha/neucha.css";
+@import "../../common.blocks/page/page.css";
+@import "../../desktop.blocks/page/page.css";
+@import "../../design/common.blocks/page/page.css";
+@import "../../design/desktop.blocks/page/page.css";
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,21 @@
+'use strict';
+
+const csso = require('gulp-csso');
+const gulp = require('gulp');
+const postcss = require('gulp-postcss');
+const rename = require('gulp-rename');
+
+// gulp css --cwd common.bundles/main
+gulp.task('css', function() {
+  return gulp.src(['*.css', '!*.min.css'])
+    .pipe(postcss([
+      require('postcss-import')(),
+      require('postcss-url')(),
+      require('autoprefixer')(),
+    ]))
+    .pipe(csso())
+    .pipe(rename({suffix: '.min'}))
+    .pipe(gulp.dest('.'));
+});
+
+gulp.task('default', gulp.series('css'));
diff --git a/package.json b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "vanilla-bemcss",
+  "version": "0.1.0",
+  "description": "Vanilla BEM CSS builder",
+  "main": "gulpfile.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/palegrow/vanilla-bemcss.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/palegrow/vanilla-bemcss/issues"
+  },
+  "homepage": "https://github.com/palegrow/vanilla-bemcss#readme",
+  "devDependencies": {
+    "autoprefixer": "^6.6.1",
+    "gulp": "github:gulpjs/gulp#4.0",
+    "gulp-csso": "^2.0.0",
+    "gulp-postcss": "^6.2.0",
+    "gulp-rename": "^1.2.2",
+    "postcss-import": "^9.0.0",
+    "postcss-url": "^5.1.2",
+    "stylelint-config-standard": "^15.0.1"
+  }
+}