gulp scss starter Download - gulp scss starter Source code download

gulp scss starter

Website data

1.0.0

Download

GULP-SCSS-STARTER

Peculiarities

BEM classes
BEM structure is used
The SCSS preprocessor is used
The Babel transpower is used to support modern JavaScript (ES6) in browsers
Webpack is used to assemble JavaScript modules
The hard code is used
Code check for errors is used in front of the Committee

Installation

Install nodejs
Install globally:
- Yarn: npm i -g yarn
- Gulp: npm i -g gulp
- Bem Tools: npm i -g bem-tools-core
Download the assembly using Git: git clone https://github.com/andreyalexeich/gulp-scss-starter.git
Go to the downloaded assembly folder: cd gulp-scss-starter
Enter yarn set version berry
Download the necessary dependencies: yarn
To start work, enter the command: yarn run dev (development mode)
To collect the project, enter the yarn run build command (assembly mode)

If you did everything right, you should open a browser with a local server. The assembly mode involves the optimization of the project: image compression, minification of CSS and JS files for downloading to the server.

File structure

 gulp-scss-starter
├── dist
├── gulp-tasks
├── src
│   ├── blocks
│   ├── fonts
│   ├── img
│   ├── js
│   ├── styles
│   ├── views
│   └── .htaccess
├── gulpfile.babel.js
├── webpack.config.js
├── package.json
├── .yarnrc.yml
├── .babelrc.js
├── .bemrc.js
├── .eslintrc.json
├── .stylelintrc
├── .stylelintignore
└── .gitignore

The root of the folder:
- .babelrc.js - Babel settings
- .bemrc.js - BEM settings
- .eslintrc.json - ESLINT settings
- .gitignore - ban on tracking Git files
- .stylelintrc - StyleLint settings
- .stylelintignore - ban on tracking STYLELINT files
- .yarnrc.yml - Setting Yarn
- gulpfile.babel.js - GULP settings
- webpack.config.js - Webpack settings
- package.json - List of Dependencies
src folder - used during development:
- BAM blocks: src/blocks
- Fonts: src/fonts
- Images: src/img
- JS files: src/js
- Site Pages: src/views/pages
- SCSS files: src/styles
- HTML files: src/views
- Apache web server configuration file with GZIP settings: src/.htaccess
dist folder is a folder from which a local server is launched for development (when starting yarn run dev )
gulp-tasks folder-a folder with GULP Tasks

⌨️ Teams

yarn run lint:styles - Check SCSS files. For VSCODE, you need to install a plugin. For Webstorm or Phpstorm, you need to enable Stylelint in Languages & Frameworks - Style Sheets - Stylelint
yarn run dev - Starting a server for project development
yarn run build - Collect a project with optimization without starting the server
yarn run build:views - collect html files
yarn run build:styles - compile SCSS files
yarn run build:scripts - Collect JS Failes
yarn run build:images - collect images
yarn run build:webp - to adjust the images to the .webp format
yarn run build:sprites - Collect sprouts
yarn run build:fonts - collect fonts
yarn run build:favicons - Collect Favikonki
yarn run build:gzip - Collect Apache configuration
yarn run bem-m -Add BEM Block
yarn run lint:styles --fix -Fix errors in SCSS files according to StyleLint settings
yarn run lint:scripts - Check JS Fail
yarn run lint:scripts --fix -Fix errors in JS files according to ESLINT settings

Recommendations for use

Component approach to website development

Each BEM block has its own folder inside src/blocks/modules
The folder of one BEM block contains one HTML file, one SCSS file and one JS file (if the block uses a script)
- The Block HTML file is imported into the src/views/index.html file (or to the necessary page file from where the block will be called)
- SCSS-file of the block is imported into the src/blocks/modules/_modules.scss file
- The Block JS file is imported into src/js/import/modules.js

An example of the structure of the folder with a BEM block:

 blocks
├── modules
│   ├──header
│   │   ├── header.html
│   │   ├── header.js
│   │   ├── header.scss

In order not to manually create the corresponding folder and files, it is enough to prescribe the following command in the console: yarn run bem-m my-block -to create a BEM block in src/block/modules , where my-block is the name of the BEM block (after the creation you need to delete the contents of the BEM block file).

Pages of the project

The project pages are in src/views/pages folder
- Main page: src/views/index.html

Fonts

Fonts are in the src/fonts folder
- Use .woff formats and .woff2
- Fonts are connected to the src/styles/base/_fonts.scss file
- You can adjust local fonts using this service

Images

Images are in the src/img folder
- Images are automatically converted into the .webp format. Detailed information on use here
- The image for the generation of Favikonok should be in the src/img/favicon folder and have a size of at least 1024px x 1024px

SVG

To create sprites .svg image should be in the src/img/sprites folder. For example, we have icon-1.svg , icon-2.svg and icon-3.svg files, and we must contact icon-2.svg . To do this, in HTML you need to use the tag <use> :

 < svg >
    < use xlink:href =" img/sprites/sprite.svg#logo " > </ use >
</ svg >

Change the styles of SVG-icons from the sprite in CSS:

 svg use {
    fill : red;
}

There is a situation when the styles of the icons cannot be changed. This is due to the fact that when exporting from FIGMA to SVG, an extra code is added. For example:

 < svg width =" 18 " height =" 19 " viewBox =" 0 0 18 19 " fill =" none " xmlns =" http://www.w3.org/2000/svg " >
  < path d =" M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z " fill =" #1B1B1D " />
</ svg >

It is necessary to remove fill="none" and fill="#1B1B1D" . It should turn out like this:

 < svg width =" 18 " height =" 19 " viewBox =" 0 0 18 19 " xmlns =" http://www.w3.org/2000/svg " >
  < path d =" M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z " />
</ svg >

Forter libraries

All third -party libraries are installed in node_modules folder
- To download them, use the yarn add package_name command (for example, yarn add jquery )
- To connect the library jS files, import them at the very beginning of the BEM block jS file (that is, the BEM block that uses the script), for example:
```
 import $ from "jquery" ;
```
- To connect the styling files of libraries, import them to the src/styles/vendor/_libs.scss file
- Js files and stylistic files of libraries cannot be changed on your own