Layout crios. Site layout is taken from https://SYMU.CO/FREEBIES. Layout of page is done repeatedly using bootstap and foundation.
- node v6.7.0
- npm v3.10.3
- PostCSS
- postcss-import
- postcss-preset-env
- postcss-advanced-variables
- postcss-svg-inline
- postcss-short
- css-mqpacker
- cssnano
The autoprefixer is configured to use Flexbox Layout and to the following browsers:
- 3 latest versions of modern browsers. At the time of writing this is:
- IE Edge 16+
- Chrome 76+
- FireFox 68+
- Safari 11+
- Opera 62+
- IE 11+
Installing the necessary modules:
npm i
It contains "blocks", the names of folders and files in them should be the same.
Folder for images that are used by embedding directly in HTML or CSS.
Similarly _blocks.
Exclusion: If the project uses a common style file, then it should be located here: _pages/common/common.css
.
Folder for fonts. All files of each typeface should be in separate folders and have the same name along with the folder in which they are located.
Folder for images.
Folder for scripts.
Folder for styles. Must contain 2 types of CSS file. Original and minimized with prefix .min
.
All tasks for which the project is being built are in the file gulpfile.js
.
- Starts the server.
- Monitors the changes of all files located in folders
_blocks
and_pages
. - Collects CSS files from folders
_pages/name of page
and puts in a folderstylesheets
. - Minimizes the resulting CSS files and puts it next to the originals.
- Collects HTML files from folders
_pages/name of page
and puts in the root of the project. - Aligns indents in received HTML files.
It helps speed up the build due to the fact that only one page is collected.
- Starts the server.
- Monitors the changes of all files located in folders
_blocks
and only for_pages/index.pug
and_pages/index.ัss
, all other files from the folder_pages
are ignored. - Collects CSS files from folders
_pages/index/index.css
and puts in a folderstylesheets
. - Minimizes the resulting CSS files and puts it next to the originals.
- Collects HTML files from folders
_pages/index/index.pug
and puts in the root of the project. - Aligns indents in received HTML files.
index
specified for example, instead of it can be any page title
It helps speed up the build due to the fact that only one page is collected.
-style common
should be used if the project has a common CSS file for all pages.
- Starts the server.
- Monitors the changes of all files located in folders
_blocks
and only for_pages/index.pug
and_pages/common/common.ัss
, all other files from the folder_pages
are ignored. - Collects CSS files from folders
_pages/common/common.css
and puts in a folderstylesheets
. - Minimizes the resulting CSS files and puts it next to the originals.
- Collects HTML files from folders
_pages/index/index.pug
and puts in the root of the project. - Aligns indents in received HTML files.
index
specified for example, instead of it can be any page title
Final build before commit.
- Collects CSS files from folders
_pages/name of page
and puts in a folderstylesheets
. - Minimizes the resulting CSS files and puts it next to the originals.
- Collects HTML files from folders
_pages/name of page
and puts in the root of the project. - Aligns indents in received HTML files.
๐
Enjoy your coding!