- Naming classes by BEM
- BEM structure is used
- Preprocessors are used Pug and SCSS
- Used transpiler Babel to support modern JavaScript (ES6) in browsers
- Used by Webpack to build JavaScript modules
- Uses CSS-grid smart-grid based on Bootstrap for fast responsive layout
- Using a hard code guide
- Checking the code for errors before committing is used
- Install NodeJS (if required) and Yarn
- Download the assembly in the console using Git:
git clone git@github.com:buiduccuong30051989/init-frontend.git
- Install
gulp
globally:yarn global add gulp-cli
- Install
bem-tools-core
globally:yarn global add bem-tools-core
- Go to the downloaded folder with the assembly:
cd init-frontend
- Download the required dependencies:
yarn
- To get started, enter the command:
yarn run dev
(development mode) - To build the project, enter the command
yarn run build
(build mode)
If you did everything correctly, you should open a browser with a local server. Build mode assumes project optimization: image compression, minification of CSS and JS files for uploading to the server.
gulp-pug-starter
├── dist
├── gulp-tasks
├── src
│ ├── blocks
│ ├── fonts
│ ├── img
│ ├── js
│ ├── styles
│ ├── views
│ └── .htaccess
├── gulpfile.babel.js
├── webpack.config.js
├── package.json
├── .babelrc.js
├── .bemrc.js
├── .eslintrc.json
├── .stylelintrc
├── .stylelintignore
├── .gitignore
├── .prettierrc
└── yarn.lock/package-lock.json
- Folder root:
.babelrc.js
- Babel settings.bemrc.js
- BEM settings.eslintrc.json
- ESLint settings.gitignore
- prohibit Git from tracking files.stylelintrc
- Stylelint settings.stylelintignore
- prohibit Stylelint from tracking filesgulpfile.babel.js
- Gulp settingswebpack.config.js
- Webpack settingspackage.json
- list of dependencies
- Folder
src
- used during development:- BEM blocks and components:
src / blocks
- Fonts:
src / fonts
- Images:
src / img
- JS files:
src / js
- Site pages:
src / views / pages
- SCSS files:
src / styles
- Service Pug files:
src / views
- Apache web server configuration file with settings gzip (lossless compression):
src / .htaccess
- BEM blocks and components:
- The
dist
folder - the folder from which the local development server is started (when you runyarn run dev
) - Folder
gulp-tasks
- folder with Gulp-tasks
yarn run lint: styles
- check SCSS files. For VSCode, you need to install plugin. For WebStorm or PHPStorm must enable Stylelint inLanguages & Frameworks - Style Sheets - Stylelint
(errors will be fixed automatically when you save the file)yarn run lint: styles --fix
- fix errors in SCSS filesyarn run lint: scripts
- check JS filesyarn run lint: scripts --fix
- fix errors in JS filesyarn run dev
- start the server for project developmentyarn run build
- build a project with optimization without starting the serveryarn run build: views
- compile Pug filesyarn run build: styles
- compile SCSS filesyarn run build: scripts
- build JS filesyarn run build: images
- build imagesyarn run build: webp
- convert images to.webp
formatyarn run build: sprites
- collect spritesyarn run build: fonts
- build fontsyarn run build: favicons
- build faviconsyarn run build: gzip
- build Apache configurationyarn run bem-m
- add a BEM blockyarn run bem-c
- add a component
- Each BEM block has its own folder inside
src / blocks / modules
- A folder for one BEM block contains one Pug file, one SCSS file and one JS file (if the block uses a script)
- The pug file of the block is imported into the file
src / views / index.pug
(or into the required page file from where the block will be called) - The SCSS file of the block is imported into the file
src / blocks / modules / _modules.scss
- JS file of the block is imported into
src / js / import / modules.js
- The pug file of the block is imported into the file
An example of a folder structure with a BEM block:
blocks
├── modules
│ ├── header
│ │ ├── header.pug
│ │ ├── header.js
│ │ ├── header.scss
In order not to manually create the corresponding folder and files, it is enough to write the following commands in the console:
yarn run bem-m my-block
- to create a BEM block insrc / block / modules
(for basic BEM blocks), wheremy-block
is the name of the BEM block;yarn run bem-with my-component
- to create a component insrc / blocks / components
(for components), wheremy-component
is the name of the component
- Components (for example, icons, buttons) are styled in Pug using mixins
- Each component has its own folder inside
src / blocks / components
- The folder of one component contains one Pug file, one SCSS file and one JS file (if the component uses a script)
- The pug file of the component is imported into the main page file
src / views / index.pug
(or into the required page file from where the component will be called) - The SCSS file of the component is imported into the file
src / blocks / components / _components.scss
- The component JS file is imported into the file
src / js / import / components.js
- The pug file of the component is imported into the main page file
- Project pages are located in the
src / views / pages
folder- Each page (including the main page) inherits the template
src / views / layouts / default.pug
- Main page:
src / views / index.pug
- Each page (including the main page) inherits the template
- Fonts are in the
src / fonts
folder- Use formats
.woff
and.woff2
- Fonts are included in the file
src / styles / base / _fonts.scss
- You can convert local fonts using this service
- Use formats
-
Images are in the
src / img
folder- The image for generating favicons must be located in the
src / img / favicon
folder and have a size of at least1024px x 1024px
- By default svg file can be include dynamic to pug via mixin see then return svg inline that we can target via dom then easy control them. All svg icon with stand alone using place in
src / img / icon-svg
- The image for generating favicons must be located in the
+iconSvg("iconName");
- Optional images converted to
.webp
format. Detailed information on use here. - Optional svg sprites, takes a bunch of SVG files in
src / img / svg
, optimizes generating them into SVG sprites here. Uncomment two optionals ingulpfile.babel.js
andgulp-tasks / serve.js
- All third party libraries are installed in the
node_modules
folder- To load them use the command
yarn add package_name
- To connect JS files of libraries, import them at the very beginning of the JS file of the BEM block (that is, the BEM block that the script uses), for example:
import $ from "jquery";
- To include the style files of the libraries, import them into the file
src / styles / vendor / _libs.scss
- JS files and style files of libraries cannot be changed by yourself
- To load them use the command
- On the path
src / js / import
create a folderpages
- In the
pages
folder, create a js file for the page, for example,pageA.js
, and import a library there that will be used only on this page- Perform the same step for additional pages
- In the file
webpack.config.js
add js-files of pages to the entry point, for example:
entry: {
main: "./src/js/index.js",
pageA: "./src/js/import/pages/pageA.js",
pageB: "./src/js/import/pages/pageB.js"
}
- Connect the compiled js-files on the required pages
The builder includes the smart-grid CSS grid from Dmitry Lavrik. It allows you to get rid of unnecessary classes in markup due to the use of mixins in SCSS and speeds up adaptive layout. The configuration is already set up according to the Bootstrap grid. Instructions for use here.