diff --git a/README.md b/README.md index 43ed2a2..3b75d25 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,13 @@ -# Magento 2 Boilerplate by Epartment -Magento 2 Boilerplate Theme with focus on ease-of-use and quick results +# Magento 2 SASS boilerplate theme +A Magento 2, **SASS** based boilerplate theme with focus on ease-of-use and quick results. The boilerplate variables cover a great range of elements, so that any design is quickly implemented with the propper classes inherits and re-use of the standard Magento Blank theme objects. + +A Demo will be available soon! This Magento 2 SASS theme is developed by [Epartment E-commerce](https://www.epartment.nl/). + +![Listerpage](demo-listerpage.png) + +[More images](https://github.com/epartment/magento2-theme-epartment-boilerplate#user-content-demo-images). + +--- ### Compatibility * Magento 2.2 @@ -21,7 +29,7 @@ If you want to know more about this project, join our slack channel and ask ques > Note: You only need one package manager, so either yarn or npm. ### Installation -> Disclaimer: +> **Disclaimer**: > This installation guide expects you to have a Magento 2 instance running. If you need help to get Magento 2 up and running, we'd like to refer you to the install guide: https://devdocs.magento.com/guides/v2.2/install-gde/prereq/zip_install.html ##### Creating the right folder structure @@ -46,7 +54,7 @@ If you want to know more about this project, join our slack channel and ask ques 6. You have succesfully installed the Epartment Magento 2 Boilerplate. ### Extending and editing the boilerplate styling -> Note: The Epartment Magento 2 Boilerplate uses SASS for styling. +> **Note**: The Epartment Magento 2 Boilerplate uses SASS for styling. ##### Editing existing variables 1. In your project navigate to the `app/design/frontend/Epartment/bootstrap/src/scss/boilerplate` folder. @@ -55,7 +63,7 @@ If you want to know more about this project, join our slack channel and ask ques 4. Run a `gulp` command to compile the styling changes. More info about the `gulp` commands can be found in the next chapter. ##### Extending with custom styling -> Note: The boilerplate variables cover a great range of elements. Try to modify the variables first before adding any custom `.scss` files! +> **Note**: The boilerplate variables cover a great range of elements. Try to modify the variables first before adding any custom `.scss` files! 1. In your project navigate to the `app/design/frontend/Epartment/bootstrap/src/scss` folder. 2. Create a new `.scss` file e.g. `_custom_hero_homepage.scss`. @@ -522,4 +530,12 @@ For example: `$font-default-font-size: 18px;` - `gulp watch` : Watches all `.scss` files and compiles them when `gulp` detects a change. It also starts a browsersync session this way you can see your changes on the fly. - `gulp scripts` : Compiles all `.js` files. - `gulp script-deps` : Copies the script dependencies from the `node_modules` to a local folder for `production` -- `gulp build` : Builds all `.scss` and `.js` files for `production` \ No newline at end of file +- `gulp build` : Builds all `.scss` and `.js` files for `production` + +## Demo images +![Lister page](demo-listerpage.png) +![Product page](demo-productpage.png) +![Shoppingcart](demo-shoppingcart.png) +![Admin - themes](demo-admin.png) + +