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 proper 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.

More images.

Compatibility

• Magento 2.3
• Magento 2.2
• Magento 2.1
• Magento 2.0

Bug reports and contribution rules

• Before reporting an issue, check if you can reproduce it on a clean Magento instance without our boilerplate. If that is the case, please submit the issue to the Magento 2 repository, not here
• All other issues can be reported here

Questions

If you want to know more about this project, join our slack channel and ask us any question you have.

Requirements

• Node.js (https://nodejs.org/)
• npm (https://npmjs.org)
• yarn (https://yarnpkg.com/)

Note: You only need one package manager, so either yarn or npm.

Installation

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.3/install-gde/prereq/zip_install.html

Creating the right folder structure

1. Open the Magento 2 project where you want to install the boilerplate in your IDE/Code editor of choice.
2. Navigate to the app/design/frontend folder.
3. Create a new directory named Epartment.
4. Open your terminal.
5. cd into app/design/frontend/Epartment.
6. Clone the git repository in a new directory called bootstrap (note the lowercase).
   git clone https://github.com/epartment/magento2-theme-epartment-boilerplate.git bootstrap.

Installing the required dependencies using npm or yarn

1. In your terminal: cd into the newly created app/design/frontend/Epartment/bootstrap folder.
2. Run the following command: yarn install or when using npm: npm install.

Setting the boilerplate as the active theme in the Magento 2 backend

1. Login to your Magento 2 backend.
2. Go to Content > Design > Configuration.
3. Select the Website, Store or Storeview where you want to have the boilerplate theme activated and click edit.
4. Now in the Applied Theme dropdown, please select Epartment Bootstrap option and click Save Configuration.
5. Go back to the Frontend en reload the page.
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.

Editing existing variables

1. In your project navigate to the app/design/frontend/Epartment/bootstrap/src/scss/boilerplate folder.
2. You can take a look at the variables chapter of this README to get a full list of variables you can target.
3. Overwriting the default variables is done by creating a new .scss file e.g. _websitename.scss in the scss/boilerplate folder, adding the .scss as an @import in style.scss. Make sure the @import is above the boilerplate import or the values will not be redeclared. In the newly created file, redeclare the variables you want to overwrite.
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!

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.
3. Write some awesome SASS.
4. Note: Don't forget to include the new .scss created before as a @import in the style.scss.
5. Run a gulp command to compile the styling changes. More info about the gulp commands can be found in the next chapter.

Gulp

Available Gulp commands

• gulp watch : Watches all .scss files and compiles them when gulp detects a change. It starts a browsersync session to the browserSyncProxy set in the Gulpfile.js. 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

Variables

These are the default variables that can be overwritten by creating a custom SASS file. You can simply target the variable again and overrule the default value. For example: $font-default-font-size: 18px;

Colors

Fonts

Headings

Links

Titles

Buttons

Swatches

Inputs

Header

Menubar

Fieldset

Fieldset Field

Fieldset label

Toolbar

Detail tab

Footer

Demo images