This project requires 14 version of node.js. From now on we are using yarn as package manager. To install dependencies use command yarn install --frozen-lockfile
This project is now using the semantic-release npm plug-in to control versioning. This means that it will automatically bump the version numbers when the CI build occurs. The decision on whether this is a patch, feature or breaking (b.f.p) release is based upon the GIT commit messages. We are using the Angular Commit Message Conventions
Commit message | Release type |
---|---|
fix(pencil): stop graphite breaking when too much pressure applied |
Patch Release |
feat(pencil): add 'graphiteWidth' option |
Feature Release |
perf(pencil): remove graphiteWidth option BREAKING CHANGE: The graphiteWidth option has been removed. The default graphite width of 10mm is always used for performance reasons.
|
Breaking Release |
- Prerequisites
- Installation
- Starting application
- Available Tasks
- Template system
- Project structure
- Gitflow
- Linting
- Design
Follow these rules to start application
You should have installed:
Node.js is a cross-platform JavaScript run-time environment for executing JavaScript code server-side. You can download it here https://nodejs.org/en/download/
Gulp is a streaming build system. Installation guide can be found here https://gulpjs.com/
Go to https://gitlab.com/wickesit/cloudshop/cloudshop/html-prototype and clone repository to your local machine. Then install all dependencies via:
$ yarn install --frozen-lockfile
This command runs the application. Automatically opens browser on application main page.
Note: These commands are included in the default gulp task so there is no need to run it manually.
Builds entire application in src/
folder and put it into build/
folder.
Runs webserver on the localhost
Starts watching for changes in src/
folder and reload the page after any occurs.
We use Handlebars web template system.
Checkout the official Handlebars docs site at http://www.handlebarsjs.com and the live demo at http://tryhandlebarsjs.com/.
All markup pages are placed at src/
folder.
Concrete page extends some layout located in the src/layouts/
folder
and define content of layout slots, such as head
, header
, body
, footer
and foot
.
More information about handlebars layouts can be found here: https://www.npmjs.com/package/handlebars-layouts.
Layouts uses common partials placed at src/partials/
folder.
Common components placed at src/components/
folder.
html-prototype/
src/
layouts/
base.html
partials/
header.hbs
footer.hbs
components/
range-card.hbs
index.html
some-page.html
We use Sass (an extension of CSS) to develop css. Below you can find our sass files structure:
html-prototype/
src/
scss/
common/
_common.scss
components/
_card-slider.scss
...
helpers/
_mixins.scss
_variables.scss
...
libs/
bootstrap4-scss/
swiper.css
pages/
home.scss
page_range-list.css
partials/
_breadcrumbs.scss
_footer.scss
main.scss
The idea of this structure is next:
-
main.scss
contains imports of all the scss except files, that are located inpages/
folder; -
common/
folder contains general site styles; -
components/
folder contains styles for every concrete component; -
helpers/
folder contains different utilities such as variables and mixins that wouldn't be compiled into css directly; -
libs/
folder contains vendors styles; -
pages/
folder contains page spesific styles; -
partials/
folder contains partial spesific styles.
Note:
- all components should be imported in the main.scss;
- to use our variables, mixins and bootstrap mixins just add
@import "../helpers/helpers";
line at the top of your page.scss.
While using breakpoints we should use right order of its placement:
- Correct order of breakpoints in case from desktop view to mobile view:
@include media-breakpoint-down(xl) {
// Extra large devices
}
@include media-breakpoint-down(lg) {
// (max-width: 1199px)
}
@include media-breakpoint-down(md) {
// (max-width: 991px)
}
@include media-breakpoint-down(sm) {
// (max-width: 767px)
}
@include media-breakpoint-down(xs) {
// (max-width: 575px)
}
- Correct order of breakpoints in case from mobile to desktop view:
@include media-breakpoint-up(xs) {
// (max-width: 575px)
}
@include media-breakpoint-up(sm) {
// (max-width: 767px)
}
@include media-breakpoint-up(md) {
// (max-width: 991px)
}
@include media-breakpoint-up(lg) {
// (max-width: 1199px)
}
@include media-breakpoint-up(xl) {
// Extra large devices
}
- In case of pointing some exact breakpoint it can be used in random order and has prefix (only):
@include media-breakpoint-only(xs) {
// (max-width: 575px)
}
@include media-breakpoint-only(sm) {
// (min-width: 576px) and (max-width: 767px)
}
@include media-breakpoint-only(md) {
// (min-width: 768px) and (max-width: 991px)
}
@include media-breakpoint-only(lg) {
// (min-width: 992px) and (max-width: 1199px)
}
@include media-breakpoint-only(xl) {
// (min-width: 1200px)
}
- Preferable way is to use one way of breakpoints direction: -up or -down, and to use them both only in exceptional cases
- -only breakpoints should be placed only after group of -up or -down
... to be added
... to be added
Common data can be put into src/data/data.json
file.
Main develop branch - develop :)
For each task new branch must be created from 'develop' branch.
Branches naming convention:
for pages - page_page-name;
for components - c_component-name.
When you finish your task, you must create merge request, assign it to Andrii and add all front-end team via comment in description.
Note: [WIP]
or WIP
prefix could be added to MR title. There is short explanation about GitLab WIP status.
To lint scss we use Sass Lint withing gulp-sass-lint plugin.
There is a gulp task css:lint
that checks scss source code and show errors and warnings.
Rules configuration file .sasslintrc
is located in the root directory and contain some rewrites of default sass lint rules.
Design located
mockups - https://epam.invisionapp.com/d/main/#/projects/prototypes/13162331
visual - https://epam.invisionapp.com/d/main/#/projects/prototypes/13168469
For activation sticky functionality in checkout-right-aside, please do next steps:
- please wrap right aside content by ;
- if page contains "recently viewed" component, please wrap it by