diff --git a/README.md b/README.md index 02b1e647..1d09ae44 100644 --- a/README.md +++ b/README.md @@ -6,13 +6,13 @@ English description | Описание на русско [](https://travis-ci.org/tars/tars) [](https://ci.appveyor.com/project/artem-malko/tars/branch/master) [](https://gitter.im/tars/tars?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) -TARS is a builder for modern frontend of any complexity, which is based on [Gulp.js](http://gulpjs.com/). It facilitates and accelerates process of web-development. TARS will be suitable for teams and individual developer. It solves the most routine cases associated with a web-development and it brings you more pleasure from work. +TARS is a builder for modern frontend of any complexity, which is based on [Gulp.js](http://gulpjs.com/). It facilitates and accelerates process of web-development. TARS will be suitable for teams and individual developers. It solves the most routine cases associated with web-development and brings you more pleasure from work. -TARS is the framework for gulp, including a set of gulp-tasks and it allows the ability to easily expand (creating new tasks) and modification of existing tasks, provides comfortable architecture for storage tasks and watchers in the project. +TARS is a framework for gulp, including a set of gulp-tasks. It allows for easy expansion (creating new tasks) and customization (modification of existing tasks), provides comfortable architecture for tasks and watchers storage in the project. -There is [TARS-CLI](https://github.com/tars/tars-cli) in order to not install all dependencies all the time, when you are installing TARS. So, TARS is not a npm-package by itself. This decision was decided so that everyone can customize the builder as comfortable as possible for themselves. CLI — just simple interface for builder, which includes all dependencies for TARS. +To bypass dependencies installation for every TARS project, [TARS-CLI](https://github.com/tars/tars-cli) was created. As such, TARS is not a npm-package by itself. This decision was made so that everyone could comfortably customize the builder for themselves. TARS-CLI is just a simple builder interface, which includes all dependencies for TARS. -**It is strongly recommended to use TARS-CLI for developing from this moment.** +**It is strongly recommended to use TARS-CLI for development.** You can install TARS-CLI via NPM. More info in [project's repository](https://github.com/tars/tars-cli). @@ -22,19 +22,19 @@ You can install TARS-CLI via NPM. More info in [project's repository](https://gi Listed below are just a little part of the features. In fact builder has much more. -* [Jade](http://jade-lang.com/) or [Handlebars](http://handlebarsjs.com/) as html-templater. You can also use a regular html. Read more [in docs](/docs/en/html-processing.md). -* [Webpack](https://webpack.github.io) (with [Hot Module Replacing](https://webpack.github.io/docs/hot-module-replacement.html)) or simple JavaScript-code concatenation into one bundle. -* Using json (js-object actually, which can be described in json) to transfer data in templates (optional, but it is very cool thing that will let you to rid of copypast). Read more [in docs](/docs/en/html-processing.md#%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0-%D1%81-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8F%D0%BC%D0%B8-%D0%B8-%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%BC%D0%B8-%D0%B2-handlebars). +* [Jade](http://jade-lang.com/), [Pug](https://pugjs.org/api/getting-started.html) or [Handlebars](http://handlebarsjs.com/) as html templater. You can also use a regular html. Read more [in docs](/docs/en/html-processing.md). +* [Webpack](https://webpack.github.io) (with [Hot Module Replacing](https://webpack.github.io/docs/hot-module-replacement.html)) or simple JavaScript code concatenation into one bundle. +* Using json (js-object actually, which can be described in json) to transfer data in templates (optional, but it is a very cool thing that will let you get rid of copypaste). Read more [in docs](/docs/en/html-processing.md#%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0-%D1%81-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8F%D0%BC%D0%B8-%D0%B8-%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%BC%D0%B8-%D0%B2-handlebars). * [TARS-CLI](https://github.com/tars/tars-cli) and **auto update of your project**. * You can use ES6 (and some experimental features from ES7) right now. [More info](/docs/en/js-processing.md). * [SCSS (SASS)](http://sass-lang.com/), [LESS](http://www.lesscss.ru/) or [Stylus](http://learnboost.github.io/stylus/) as a preprocessor for css. Also it includes a small set of mixins. Sourcemaps are included. You can use .scss and .sass extension then scss is selected as preprocessor. You can use .scss and .sass files together. Read more [in docs](/docs/en/css-processing.md). [PostCSS](https://github.com/postcss/postcss) with [autoprefixer](https://github.com/postcss/autoprefixer) is supported by default and it is really easy [to use additional plugins for PostCSS](/docs/en/options.md#postcss). -* No external libraries and plugins (except [html5shiv](https://ru.wikipedia.org/wiki/Html5_Shiv)). Yes, this is a feature because you can choose library for using. Sourcemaps for JavaScript is included. -* [Chokidar](https://github.com/paulmillr/chokidar) module is used for watching files -* Sharing of markup from your local computer to an external web, optional. And of course it has a livereload in browser (and not just locally) + GUI to control panel for devices, on which markup was shearing. +* No external libraries or plugins (except [html5shiv](https://ru.wikipedia.org/wiki/Html5_Shiv)). Yes, this is a feature because you can choose which library to use. Sourcemaps for JavaScript are included. +* [Chokidar](https://github.com/paulmillr/chokidar) module is used to watch files +* Optional markup sharing from your local computer to the world. And of course it has livereload in browser (and not just locally) + GUI control panel for devices, to which markup is shared. * [You can easily add new tasks and watchers](/docs/en/tasks-and-watchers.md). There are several examples of how to create and use a new task or watcher inside the TARS. Thereby, it is really easy to add any task from your builder to TARS or integrate TARS into your project. -* Smart work with images. First of all with vector(svg). There will be no more hell with markup for screens with high pixel density. TARS supports two workflows of working with SVG: [SVG-sprites](docs/en/svg-processing.md#svg-sprites) and [SVG-symbols](docs/en/svg-processing.md#svg-symbols). -* Several modes of assembly (common, with minified files, with hash in the title of css- and js-files for deploy). -* Creating archive with the ready build. +* Smart work with images. First of all with vector (svg). There will be no more hell with markup for screens with high pixel density. TARS supports two workflows of working with SVG: [SVG-sprites](docs/en/svg-processing.md#svg-sprites) and [SVG-symbols](docs/en/svg-processing.md#svg-symbols). +* Several modes of assembly (common, with minified files, with hash in the title of css and js files for deployment). +* Creating archive with a complete build. ## Documentation @@ -56,10 +56,10 @@ It is important! All examples in documentation use the default settings. ## Installation -**Attention, [TARS-CLI](https://github.com/tars/tars-cli) is the preferably - way to work with TARS. It is more comfortable, fast to work with TARS-CLI. In case of using TARS with TARS-CLI all installation steps are not necessary!** +**Attention, [TARS-CLI](https://github.com/tars/tars-cli) is the preferred + way to work with TARS. It is faster and more comfortable to work with TARS-CLI. In case of using TARS with TARS-CLI all installation steps are not necessary!** -You need to [install `Node.js`](http://nodejs.org/) with version equal to 4.x.x or higher. If you use Node.js version 5.x.x, please, be sure, that you use npm version 3.x.x and higher. Otherwise update npm by using command: +You need to [install `Node.js`](http://nodejs.org/) with version equal to 4.x.x and higher. If you use Node.js version 5.x.x, please, make sure, that you use npm version 3.x.x and higher. Otherwise update npm by using command: ```bash npm i -g npm @@ -70,7 +70,7 @@ For Windows you have to do some more steps: * navigate to C:\Program Files (x86)\nodejs or C:\Program Files\nodejs via cmd.exe or any available terminal. The path depends on how Node.js was installed; * run command `npm install npm@latest`. -If you get a **Permission denied** or **Error: EACCES** error, you should run the previous command again in sudo. +If you get a **Permission denied** or **Error: EACCES** error, you should run the previous command again in sudo (as Administrator for Windows). Next you need to install gulp globally. (You may need rights of superuser or administrator). @@ -92,37 +92,39 @@ After installing of all dependencies you need to open tars-config (detailed desc gulp init ``` -**Attention, [TARS-CLI](https://github.com/tars/tars-cli) is the preferably -way to work with TARS. [Init command is available in TARS-CLI too](https://github.com/tars/tars-cli/blob/master/docs/en/commands.md#tars-init).** +**Attention, [TARS-CLI](https://github.com/tars/tars-cli) is the preferred +way to work with TARS. It is faster and more comfortable to work with TARS-CLI. [Init command is available in TARS-CLI too](https://github.com/tars/tars-cli/blob/master/docs/en/commands.md#tars-init).** This command will create the basic file structure, download tasks for selected templater and css-preprocessor. -Everything is ready, make it work! :) +Everything is ready, get to work! :) ## Basic commands -**Attention, [TARS-CLI](https://github.com/tars/tars-cli) is the preferably - way to work with TARS. It is more comfortable, fast to work with TARS-CLI. All commands are available and [described in TARS-CLI](https://github.com/tars/tars-cli/blob/master/docs/en/commands.md), so use only TARS-CLI for working with your project. TARS used Gulp to start tasks, when CLI was not created.** +**Attention, [TARS-CLI](https://github.com/tars/tars-cli) is the preferred + way to work with TARS. It is faster and more comfortable to work with TARS-CLI. All commands are available and [described in TARS-CLI](https://github.com/tars/tars-cli/blob/master/docs/en/commands.md), so use only TARS-CLI for working with your project. TARS used Gulp to start tasks, when CLI was not created.** `gulp init` — initializes project with the specified settings in the tars-config. Creates a file structure. -`gulp re-init` — **This command is depricated!** reinitialize the project with specified settings in the tars-config. It is proposed to use this command if you initialize the project with incorrect options. **Attention, files from pages and static folder will be deleted.** +`gulp re-init` — **This command is deprecated!** reinitialize the project with specified settings in the tars-config. It is advised to use this command if you initialize the project with incorrect options. **Attention, files from pages and static folder will be deleted.** -`gulp` or `gulp build` — make project assembly. There not minimized files are connected. Type of assembly depends on the transmitted keys with this command. Available keys: +`gulp` or `gulp build` — build project. Non-minimized files are used by default. Build type depends on command parameters. +Available parameters: -* `--min` – minimized files connected to html. -* `--release` – minimized files connected to html whose names have hash. This mode is useful if you are directly trying to deploy ready markup to the server. +* `--min` – minimized files are connected to html. +* `--release` – minimized files are connected to html whose names have hash. This mode is useful if you are trying to directly deploy ready markup to the server. -`gulp dev` — initialization of builder in development mode. Dev-version of the project is created without any minifications. Also it launches watchers for project files. Available keys: +`gulp dev` — initialize of builder in development mode. Dev-version of the project is created without any minifications. It also launches watchers for project files. +Available parameters: -* `--lr` – initialization livereload (live page reloads with changes in project files), if it is included in the configuration of the project. -* `--tunnel` – initialization project with sharing markup to an external web. +* `--lr` – initialize livereload (live page reloads with changes in project files), if it is included in the configuration of the project. +* `--tunnel` – initialize project with markup sharing to the external web. -The link will be shown in the console. There also will be a link to control panel for devices on which markup was sharing. +The link will be shown in the console. There also will be a link to the control panel for devices to which markup is shared. `gulp build-dev` — generation of dev-version of the project without watchers. -Keys are available in any mode of assembly: +These parameters are available in any mode of assembly: * `--ie8` – to include in the build styles for ie8. * `--ie9` – to include in the build styles for ie9. @@ -149,7 +151,7 @@ It is important! All examples in documentation use the default settings. ## Last changes -All recent changes are available at the link: [changelog](/docs/en/changelog.md). +All recent changes are available here: [changelog](/docs/en/changelog.md). If you have a question you can write in [gitter](https://gitter.im/tars/tars?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) or mail [tars.builder@gmail.com](mailto:tars.builder@gmail.com) diff --git a/README_RU.md b/README_RU.md index e5528faa..ae237be6 100644 --- a/README_RU.md +++ b/README_RU.md @@ -23,7 +23,7 @@ TARS — сборщик-фреймворк, включающий в себя н Ниже перечислена только малая часть особенностей, на самом деле их гораздо больше) -* [Jade](http://jade-lang.com/) или [Handlebars](http://handlebarsjs.com/) на выбор в качестве html-шаблонизатора. Также можно использовать обычный html. Подробности [здесь](/docs/ru/html-processing.md). +* [Jade](http://jade-lang.com/), [Pug](https://pugjs.org/api/getting-started.html) или [Handlebars](http://handlebarsjs.com/) на выбор в качестве html-шаблонизатора. Также можно использовать обычный html. Подробности [здесь](/docs/ru/html-processing.md). * [Webpack](https://webpack.github.io) (вместе с [Hot Module Replacing](https://webpack.github.io/docs/hot-module-replacement.html)) или простая конкатинация JavaScript-кода в один файл. * Использование json (а точнее js-объекта, который может быть описан в json) для передачи данных в шаблоны (опционально, но очень крутая штука, которая позволит избавиться от копипаста). Подробнее [тут](/docs/ru/html-processing.md#%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0-%D1%81-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8F%D0%BC%D0%B8-%D0%B8-%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D0%BC%D0%B8-%D0%B2-handlebars). * [CLI-утилита](https://github.com/tars/tars-cli) и **автообновление проекта**. diff --git a/docs/en/changelog.md b/docs/en/changelog.md index 2cb06bc1..431a0c84 100644 --- a/docs/en/changelog.md +++ b/docs/en/changelog.md @@ -4,6 +4,15 @@ English description | Описание на рус # Changelog +## Version 1.9.0 + +* gulp-minify-html replaced with на gulp-htmlmin. +* Add templater Pug support. +* You can pass any data to templater by using env var TARS_ENV. +* Bugfix. +* English docs fixup and full update. Thanks to [icehaunter](https://github.com/icehaunter). +* Dependencies update. + ## Version 1.8.3 * Fix bug with svg2png in 2.0.0 Use 1.0.2 diff --git a/docs/en/css-concat-processing.md b/docs/en/css-concat-processing.md index 340153ca..b6f53d89 100644 --- a/docs/en/css-concat-processing.md +++ b/docs/en/css-concat-processing.md @@ -16,10 +16,10 @@ Concatenation of styles will be in the following order: * Components' styles (css is supported) * Styles of etc.{scss,css} -Also, you can use css-files and not to include them to bundle. There is folder separate-css in static/scss, where you can store all files, which have to be included manually. There is an example of including in any template: +Also, you can use css files not including them into the bundle. There is a folder `separate-css` in `static/scss`, where you can store all files, which have to be included manually. There is an example of including in any template: ```handlebars ``` -**%=staticPrefix=% prefixe works, but this prefixe is depricated! Use just %=static=% or \_\_static\_\_!** +**%=staticPrefix=% prefix works, but this prefix is deprecated! Use just `%=static=%`!** diff --git a/docs/en/css-manual-processing.md b/docs/en/css-manual-processing.md index 1b3f1d6a..b3f9c2e3 100644 --- a/docs/en/css-manual-processing.md +++ b/docs/en/css-manual-processing.md @@ -4,13 +4,13 @@ English description | Описание # CSS manual processing -This workflow will be usefull, if you need to control css-processing by yourself. You can use manual css-processing in TARS fro mversion 1.8.0 +This workflow will be usefull, if you need to control css processing by yourself. You can use manual css processing in TARS from version 1.8.0 -Основные точки входа, файлы стилей, в которые будут импортироваться стили вашего проекта, находятся в папке static/scss/entry. По умолчанию там уже находится одна точка входа — main.scss Вы можете добавить еще точек входа, если вам это потребуется. Именно эти файлы будут компилироваться препроцессором. Файлы вашего проекта необходимо подключать в точки входа с помощью конструкции @import. +Main entry points, style files which will contain imports for project style, are located at `static/scss/entry`. By default there will be one entry point created - `main.scss`. You can add more if you wil need it. These files will be compiled by a preprocessor. Your project files should be connected by adding them to entry point files via `@import` directive. -Подключение точки входа по умолчанию (main) уже описано в шаблонах (components/head/). В случае добавления новых точек входа, их треубется подключать в шаблонах вручную. +`main.scss` entry point connection is already described in templates (`components/head`). In case you add new entry points, you need to connect them in templates by hand. -Содержимое main.scss выглядит следующим образом: +`main.css` contents: ```scss @import '../normalize.scss'; @@ -31,19 +31,19 @@ This workflow will be usefull, if you need to control css-processing by yourself @import '../etc/etc.scss'; ``` -В точку входа импортируется normalize.scss, затем партиал, в который вы можете импортировать библиотеки, затем встроенные партиалы (различные миксины для правильной работы с графикой в проекте и т.д.), партиал с плагинами, партиал с компонентами и другие стили. +Entry point imports `normalize.scss`, then partial, where you can import libraries, then build-in partials (mixins for graphics, etc.), then partial with plugins, partial with components and lastly additional styles. -Партиал с компонентами означает, что именно в этот файл вы будете импортировать стили своих компонентов. При этом вам не обязательно указывать относительный путь до стилей компонентов от файла партиала. Достаточно сделать так: +Partial with components means that you will import your components' styles into that file specifically. But you don't need to use full relative path to compontnts' style from your partial. You can do like this: ```scss @import 'components/_template/_template.scss'; ``` -Подключение стилей для плагинов и библиотек из node_modules и bower_components описано в [общей доке по работе со стилями](css-processing.md). +Including styles for plugins and libraries from `node_modules` and `bower_components` is described in [general style documentation](css-processing.md). -Большая просьба: **не редактируйте файлы из директории built-in-partials, они могут быть перезаписаны в результате обновления проекта!**. +**Warning:** Do not edit files in `build-in-partials` directory as they can be overwritten on project update. -Также в entry есть директория ie, в которой вы можете добавить точки входа для ie8 и ie9. Точки входа для ie9 должны иметь суффикс _ie9, а для ie8 — _ie8. +Also there is an `ie` directory in entry points, which contains entry points for ie8 (files should have `_ie8` suffix) and ie9 (files should have `_ie9` suffix). -Обратите внимание, для этих точек входа вам необходимо подключать стили компонентов, если они есть для этих браузеров. Нет необходимости дублировать содержимое _components и _components-ie9. В _components-ie9 должны быть только стили компонентов для ie9. +Take note that only ie8 and ie9 specific styles should be included there, general styles will be added by default. diff --git a/docs/en/css-processing.md b/docs/en/css-processing.md index 55c27416..6c00a997 100644 --- a/docs/en/css-processing.md +++ b/docs/en/css-processing.md @@ -4,7 +4,7 @@ English description | Описание на р # CSS -You can use folow CSS-preprocessors: +You can use folowing CSS-preprocessors: * [Scss](http://sass-lang.com) .sass extension is supported; * [Less](http://www.lesscss.ru); * [Stylus](http://learnboost.github.io/stylus) @@ -16,31 +16,31 @@ In general, there are no surprises when using CSS-preprocessor. Use all the poss If you are used to the usual CSS, you can use CSS-syntax in any preprocessor. TARS supports two workflows for CSS-code processing: -* [автоматическая склейка стилей сборщиком](css-concat-processing.md); -* [Ручное управление подключаемыми стилями](css-manual-processing.md). +* [css concatenation](css-concat-processing.md); +* [css manual processing](css-manual-processing.md). All info below is general for both workflows. Все, что описано ниже справедливо для обоих подходов. -All files with _ prefix won't be compiled by builder. You can use these files for importing. Actually, you can import all files, what you want, but if you include file without _ you will have two copies in compiled CSS-file. So, with is the reason, why files with _ prefix won't be compiled. You can import all type of styles files: scss (sass), less, styl, css. -Example of import using (scss): +All files with a `_` prefix won't be compiled by the builder. You should use these files for imports. Actually, you can import any files you want, but if you import a file without `_` you will have two copies in the compiled CSS file. This is the reason why files with `_` prefix won't be compiled. You can import all types of style files: `scss` (`sass`), `less`, `styl`, `css`. +Example of import using `scss`: ```scss // files are located in one directory @import '_partial.scss'; -// _partial.sass is located in neighbour directory partials +// _partial.sass is located in neighbour directory `partials` @import '../partials/_partial.sass'; ``` -If you need to include files from node_modules or bower_components, you do not have to write full path to node_modules, you can use short syntax, TARS will expand path like this: +If you need to include files from `node_modules` or `bower_components`, you don't have to write full path to `node_modules`, you can use short syntax, TARS will expand the path like this: ```scss @import 'bootstrap/dist/bootstrap.scss'; ``` -In case if that import TARS will try to find bootstrap/dist/bootstrap.scss in node_modules and bower_components. This feature is implemented in TARS from version 1.7.0 +In case of that import TARS will try to find `bootstrap/dist/bootstrap.scss` in `node_modules` and `bower_components`. This feature is implemented in TARS from version 1.7.0 If you want to include the files from the static directory (pictures), you should use the placeholder %=static=%. Then including of the image as a background (in current example the picture will be taken from your main component) will be as follows (in this example scss is used): @@ -50,21 +50,22 @@ If you want to include the files from the static directory (pictures), you shoul } ``` -**%=staticPrefixForCss=% prefix works, but this prefix is depricated! Use just %=static=% or \_\_static\_\_! This prefixes work in TARS from version 1.6.0** +**%=staticPrefixForCss=% prefix works, but this prefix is deprecated! Use just `%=static=%`! This prefix works in TARS from version 1.6.0** -There are a couple of points on the organization scss|sass|less|styl-files (scss is selected): +There are a couple of points on the organization of `scss|sass|less|styl` files (e.g scss is selected): * Each component has its own css-representation. -* Common styles for the project is recommended to put in common.scss in static/scss -* Included fonts' styles is in fonts.scss -* Mixins are in mixins.scss -* UI-elements styles are in GUI.scss -* Variables are in vars.scss -* Libraries styles are in static/scss/libraries (may contains sub-folders and css-files). -* Styles for plugins are in static/scss/plugins (may contains sub-folders and css-files). -* Styles that we don't now where determine have to be put in static/scss/etc/etc.{scss,css}. -* In the main folder with css (in this case, scss folder) you can not create new files (except when you correct task by yourselves connected with working with css). New files can be created only in the static/scss/plugins|libraries|etc|separate-css. - -If you'd like to use library from bower- or npm-package, you can import stylies from package by using @import. - -For IE8 and IE9 you can add fixes in a folder in the ie component folder. You need to create ie8.{scss,sass,css} or ie9.{scss,sass,css}. +* Common styles for the project are recommended to put in common.scss in static/scss +* Fonts are included in `fonts.scss` +* Mixins are in `mixins.scss` +* UI-elements styles are in `GUI.scss` +* Variables are in `vars.scss` +* Libraries styles are in `static/scss/libraries` (may contains subfolders and css-files). +* Styles for plugins are in `static/scss/plugins` (may contains subfolders and css-files). +* Styles which can't be put under categories listed above have to be put in `static/scss/etc/etc.{scss,css}`. +* In the main folder with css (in this case, scss folder) you can not create new files (except when you correct task by yourself connected with working with css). New files can be created only in the `static/scss/plugins|libraries|etc|separate-css`. + +If you'd like to use library from bower or npm package, you can import styles from package by using `@import`. + +For IE8 and IE9 you can add fixes in a folder in the ie component folder. You need to create `ie8.{scss,sass,css}` or `ie9.{scss,sass,css}`. + diff --git a/docs/en/file-structure.md b/docs/en/file-structure.md index c28a7ac6..bef60010 100644 --- a/docs/en/file-structure.md +++ b/docs/en/file-structure.md @@ -2,9 +2,9 @@ English description | Описание на русском
-# File sructure +# File structure -**All file structure is generated automatically. You do not need to create something by yourself.** +**File structure is generated automatically. You do not need to create anything yourself.** Builder has the following file structure: @@ -33,7 +33,7 @@ Builder has the following file structure: ## The structure of the individual component -Component is an independent unit of the page. Example component - «header» or «footer». Each page consists of components. Any component may include other components and can be included into each other. +Component is an independent unit of the page. Example component - "header" or "footer". Each page consists of components. Any component may include other components and can be included into each other. ``` exampleComponent/ # Component example @@ -50,19 +50,19 @@ exampleComponent/ # Component example Any component can be can be embedded into another component. -All images from asstes will be moved to static/img/assets/component_name or static/img/assets/component_name/embedded_component_name, if current component is embedded into another. Images are files with extension svg, png, jpg, jpeg, jpe, gif, tiff and bmp. Other files will be moved to components-assets (the name of folder is depend on option fs.componentsFolderName). +All images from asstes will be moved to static/img/assets/component_name or static/img/assets/component_name/embedded_component_name, if current component is embedded into another. Images are files with extensions svg, png, jpg, jpeg, jpe, gif, tiff and bmp. Other files will be moved to components-assets (the name of folder is depend on option fs.componentsFolderName). The basic idea is to make the component as much isolated structure as possible. You can use the [BEM](https://ru.bem.info), [web components](http://webcomponents.org) (and their [realization from Google](https://www.polymer-project.org)), something else. You can do everything by old-fashioned way, all markup is in one component, but it is not recommended. If we talk in BEM terms, each component is a block. There is an [excellent lecture](https://www.youtube.com/watch?v=pyAYbbDJjPo) on how to organize your code. -Page templates are in `pages` folder. Pages are layouts and should contain as little code as possible. To create a new page just copy the existing (or _template) and rename it or run [tars add-page](https://github.com/tars/tars-cli/blob/master/docs/en/commands.md#tars-add-page-pagename). -Also, you can add component via TARS-CLI — [tars add-component](https://github.com/tars/tars-cli/blob/master/docs/en/commands.md#tars-add-module-modulename). +Page templates are in `pages` folder. Pages are layouts and should contain as little code as possible. To create a new page just copy the existing one (or _template) and rename it or run [tars add-page](https://github.com/tars/tars-cli/blob/master/docs/en/commands.md#tars-add-page-pagename). +Also, you can add components via TARS-CLI — [tars add-component](https://github.com/tars/tars-cli/blob/master/docs/en/commands.md#tars-add-module-modulename). -## Folder static for structure +## Folder structure for static files We assume that Scss was chosen as a css-preprocessor. ``` -static/ # Folder for static-files. You can choose the name for that folder in tars-config.js +static/ # Folder for static-files. You can choose the name for that folder in tars-config.js └── fonts/ # Fonts (can contain subdirectories) └── img/ # Images. You can choose the name for that folder in tars-config.js └── content/ # Images for content (can contain subdirectories) @@ -81,7 +81,7 @@ static/ # Folder for static-files. You can └── misc/ # General files, which will be moved to root directory of ready project — favicons, robots.txt and so on (can contain subdirectories) └── scss ├── entry/ # Styles for entry points for css in case of manual css-processing More info [here](css-manual-processing.md). - └── etc/ # Styles, which will be included in the end of ready css-file (can contain subdirectories) + └── etc/ # Styles, which will be included at the end of the ready css-file (can contain subdirectories) └── libraries/ # Styles for libraries (can contain subdirectories) └── plugins/ # Styles for plugins (can contain subdirectories) └── sprite-generator-templates/ # Templates for sprite generating @@ -96,9 +96,9 @@ static/ # Folder for static-files. You can ``` -## The structure of the ready build +## The structure of the complete build -There will be tow folders in the root after assembly of the project: dev and builds. There are description of the dev-version (with --ie8 mode enabled). The finished build is not much different from the dev version. +There will be two folders in the root after assembly of the project: dev and builds. Below is the description of the dev version (with --ie8 mode enabled). The finished build is not much different from the dev version. ``` dev/ @@ -122,14 +122,14 @@ dev/ ├── Ready pages and misc-files ``` -Build-version of the project does not contain a temp folder, includes minimized css- and js-files. It contains optimized pictures and archive with assembled project (optional). +Build version of the project does not contain a temp folder, includes minified css and js files. It contains optimized pictures and an archive with the assembled project (optional). If the option useBuildVersioning is enabled, each build will be in a separate folder on the path that is specified in the option [buildPath](options.md#buildpath), called build_ver%build_date%. If useBuildVersioning disabled, the finished project will be generated on the path that is specified in the option buildPath, in folder 'build'. -When you need to include an image you have to use the path in which they are existed in the build. +When you need to include an image you have to use the path in which they exist in the build. -Immediately after initialization or reinitialization in the root folder can be appeared .tmpPreproc and .tmpTemplater folders, which contain a downloaded template and css-preprocessor. At the first build these folders will be deleted. So just do not pay attention to them. These folders are included in .gitignore, so they won't be in your repository. +Immediately after initialization or reinitialization, `.tmpPreproc` and `.tmpTemplater` folders can appear in the root folder, which contain a downloaded template and css-preprocessor. After the first build these folders will be deleted. So just ignore them. These folders are included in .gitignore, so they won't be in your repository. -This file structure can be changed with the appropriate corrections of tasks and watchers. For some folders you do not need to climb in tasks and watchers. For example, it is possible to create a folder for storing js, [which must be included before and after the components](options.md#jspathstoconcatbeforemodulesjs-и-jspathstoconcataftermodulesjs). This will be useful in case of using different js-frameworks. +This file structure can be changed with the appropriate corrections of tasks and watchers. For some folders you do not need to dig through tasks and watchers: for example, it is possible to create a folder for storing js, [which must be included before and after the components](options.md#jspathstoconcatbeforemodulesjs-и-jspathstoconcataftermodulesjs). This will be useful in case of using different js-frameworks. -Also, do not necessary to use all the folders for images or JavaScript. If something is not necessary, it can be removed. +Also, it is not necessary to use all the folders for images or JavaScript. If something is not necessary, it can be removed. diff --git a/docs/en/handlebars-helpers.md b/docs/en/handlebars-helpers.md index 83da9f4b..cbe67c32 100644 --- a/docs/en/handlebars-helpers.md +++ b/docs/en/handlebars-helpers.md @@ -4,7 +4,7 @@ English description | Описание н # Handlebars-helpers -There are some useful built-in helpers. You can add your own helpers to /tars/user-tasks/html/helpers/handlebars-helpers. It is not necessary to register your helpers. You just have to add them to exported object "handlebarsHelpers" as a function. All custom (user's) helpers will be available in tempalates automatically. Besides, all custom helpers will be moved automatically after update of your project via TARS-CLI. +There are some useful built-in helpers. You can add your own helpers to `/tars/user-tasks/html/helpers/handlebars-helpers`. It is not necessary to register your helpers. You just have to add them to exported object `handlebarsHelpers` as a function. All custom helpers will be available in tempalates automatically. Besides, all custom helpers will be moved automatically after project update via TARS-CLI. Let's describe built-in helpers. @@ -12,7 +12,7 @@ Let's describe built-in helpers. It is used to create a simple loop from 0 to n. -There is the syntax: +Syntax: ```handlebars {{#repeat n}} @@ -25,18 +25,18 @@ n — is a number of repetitions. Number, integer. ## is -It is used to expand the standard if. Built if is able to check only a value exist or not. #is allows you to use the default behavior of if from JavaScript. The comparison operation is passed as a string as the second argument. The comparison values are passed as a string (or as a value from data) as the first and the third arguments. Following operations are available (all operations are performed in JavaScript, respectively, and the comparison result is obtained in the same way as if it were if inside JavaScript): +It is used to expand the standard `if`. Standart `if` is able to check only if a value exists or not. `is` allows you to use the default behavior of if from JavaScript. The comparison operation is passed as a string as the second argument. The comparison values are passed as a string (or as a value from data) as the first and the third arguments. Following operations are available (all operations are performed in JavaScript, respectively, and the comparison result is obtained in the same way as if it were inside JavaScript): * `==` not strict equality; * `===` strict equality; * `>` strict greater; * `>=` greater or equal; -* `<` strictly less; +* `<` strict less; * `<=` less or equal; * `!=` not strict inequality; * `!==` strict inequality. -test is the variable passed to the template. +`test` is the variable passed to the template. ```js testComponent: { @@ -44,7 +44,7 @@ testComponent: { } ``` -There is the syntax: +Syntax: ```handlebars {{#is test '>' 9}} @@ -59,7 +59,7 @@ There is the syntax: It cuts all spaces from the passed content. -There is the syntax: +Syntax: ```handlebars