Skip to content

Commit

Permalink
Updated README.md, added many variables in the _variables.scss and re…
Browse files Browse the repository at this point in the history
…factored the way colors are handled in the _variables.scss

Update README.md wrote the installation guide, extending/editing styling guide and gulp guide.
Update _variables.scss refactored colors to use $color-boilerplate- prefix and not just $primary-color/$secondary-color, added a lot of new variables e.g. menu styling. reworked heading variables, added more inputs, changed all default variable value's to match the blank theme's styling. Added !default tag on every variable, this way it can be overwritten.
  • Loading branch information
jordykommeren committed Aug 2, 2018
1 parent 2365d1f commit aaa2873
Show file tree
Hide file tree
Showing 8 changed files with 488 additions and 231 deletions.
58 changes: 57 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,64 @@ Magento 2 Boilerplate Theme with focus on ease-of-use and quick results
* Magento 2.0

### Bug reports and contribution rules
- Before reporting an issue, check if you can reproduce it on the clean Magento instance. If that's true, submit issue to the Magento 2 repository, not here
- Before reporting an issue, check if you can reproduce it on the clean Magento instance without our boilerplate. If that's true, submit issue to the Magento 2 repository, not here
- Al other issues can be reported here

### Questions
If you want to know more about this project, join our slack channel and ask questions.

### Requirements
- Node.js (https://nodejs.org/)
- npm (https://npmjs.org)
- yarn (https://yarnpkg.com/)

### Installation
> <strong>Disclaimer</strong>:
> 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
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/commandline.
5. `cd` into `app/design/frontend/Epartment`.
6. Clone the git repository in a new directory called `bootstrap` note the lowercase.<br/>
`git clone https://github.com/epartment/magento2-theme-epartment-boilerplate.git bootstrap`.

##### Installing the required dependencies using npm and yarn
1. In your terminal/commandline: `cd` into the newly created `app/design/frontend/Epartment/bootstrap` folder.
2. Run the following command: `yarn install`. Alternatively it's also possible to do `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
> <strong>Note</strong>: 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 into `_variables.scss` to see what default variables you can overwrite.
3. Overwriting the default variables is done by creating a new `.scss` file e.g. `_websitename.scss` and redeclare the variables you want to overwrite.
4. Note: Don't forget to include the new `.scss` created in the previous step into the `_boilerplate.scss` .
5. 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
> <strong>Note</strong>: 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 also starts a browsersync session this way you can see your changes on the fly.
- `gulp scripts` : Compiles all `.js` files.
- `gulp script-depts` : Copies the script dependencies from the `node_modules` to a local folder for `production`
- `gulp build` : Builds all `.scss` and `.js` files for `production`
1 change: 1 addition & 0 deletions src/scss/_boilerplate.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,5 @@
@import 'boilerplate/swatches';
@import 'boilerplate/inputs';
@import 'boilerplate/forms';
@import 'boilerplate/menu';
@import 'boilerplate/product';
35 changes: 26 additions & 9 deletions src/scss/boilerplate/_fonts.scss
Original file line number Diff line number Diff line change
@@ -1,30 +1,46 @@
html, body {
font-family: $font-family;
color: $font-default-color;

h1, h2, h3, h4, h5, h6 {
font-family: $font-family-headings;
color: $font-family-headings-color;
font-weight: $font-family-headings-weight;
font-family: $font-family-heading;
color: $font-family-heading-color;
font-weight: $font-family-heading-font-weight;
}

h1 {
font-size: 36px;
font-size: $font-family-heading-h1-font-size;
font-weight: $font-family-heading-h1-font-weight;
line-height: $font-family-heading-h1-line-height;
margin: $font-family-heading-h1-margin;
}

h2 {
font-size: 28px;
font-size: $font-family-heading-h2-font-size;
font-weight: $font-family-heading-h2-font-weight;
line-height: $font-family-heading-h2-line-height;
margin: $font-family-heading-h2-margin;
}

h3 {
font-size: 24px;
font-size: $font-family-heading-h3-font-size;
font-weight: $font-family-heading-h3-font-weight;
line-height: $font-family-heading-h3-line-height;
margin: $font-family-heading-h3-margin;
}

h4 {
font-size: 18px;
font-size: $font-family-heading-h4-font-size;
font-weight: $font-family-heading-h4-font-weight;
line-height: $font-family-heading-h4-line-height;
margin: $font-family-heading-h4-margin;
}

h5 {
font-size: 16px;
font-size: $font-family-heading-h5-font-size;
font-weight: $font-family-heading-h5-font-weight;
line-height: $font-family-heading-h5-line-height;
margin: $font-family-heading-h5-margin;
}

h6 {
Expand All @@ -42,11 +58,12 @@ html, body {
font-size: $font-default-font-size;
font-weight: $font-default-link-font-weight;
color: $font-default-link-color;
text-decoration: $font-default-link-decoration;
text-decoration: $font-default-link-text-decoration;

&:hover {
font-weight: $font-default-link-hover-font-weight;
color: $font-default-link-hover-color;
text-decoration: $font-default-link-hover-text-decoration;
}
}
}
54 changes: 3 additions & 51 deletions src/scss/boilerplate/_forms.scss
Original file line number Diff line number Diff line change
@@ -1,54 +1,6 @@
input[type="text"], input[type="radio"], input[type="checkbox"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea {
background-color: $input-default-background-color;
border: $input-default-border;
border-radius: $input-default-border-radius;
height: $input-default-height;
width: $input-default-width;
margin: $input-default-margin;
padding: $input-default-padding;
vertical-align: $input-default-vertical-align;
font-size: $input-default-font-size;
color: $input-default-color;
font-family: $input-default-font-family;
font-weight: $input-default-font-weight;
font-style: $input-default-font-style;
line-height: $input-default-line-height;

&:focus {
background-color: $input-default-focus-background-color;
border: $input-default-focus-border;
color: $input-default-focus-color;
font-style: $input-default-focus-font-style;
}

&:disabled {
background-color: $input-default-disabled-background-color;
border: $input-default-disabled-border;
opacity: $input-default-disabled-opacity;
color: $input-default-disabled-color;
font-style: $input-default-disabled-font-style;
}

&::placeholder {
opacity: 1;
color: $input-default-placeholder-color !important;
font-style: $input-default-placeholder-font-style;
}

}

textarea {
height: $input-textarea-default-height;
resize: $input-textarea-default-resize;
}

input[type="checkbox"] {
width: $input-choice-default-width;
}

/****
** Fieldset
****/
/****
** Fieldset
****/

.fieldset {
border: $form-fieldset-border;
Expand Down
98 changes: 98 additions & 0 deletions src/scss/boilerplate/_inputs.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
input[type="text"], input[type="radio"], input[type="checkbox"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], select, textarea {
background-color: $input-default-background-color;
border: $input-default-border;
border-radius: $input-default-border-radius;
height: $input-default-height;
width: $input-default-width;
margin: $input-default-margin;
padding: $input-default-padding;
vertical-align: $input-default-vertical-align;
font-size: $input-default-font-size;
color: $input-default-color;
font-family: $input-default-font-family;
font-weight: $input-default-font-weight;
font-style: $input-default-font-style;
line-height: $input-default-line-height;

&:focus {
background-color: $input-default-focus-background-color;
border: $input-default-focus-border;
color: $input-default-focus-color;
font-style: $input-default-focus-font-style;
}

&:disabled {
background-color: $input-default-disabled-background-color;
border: $input-default-disabled-border;
opacity: $input-default-disabled-opacity;
color: $input-default-disabled-color;
font-style: $input-default-disabled-font-style;
}

&::placeholder {
opacity: 1;
color: $input-default-placeholder-color !important;
font-style: $input-default-placeholder-font-style;
}

}

textarea {
height: $input-textarea-default-height;
resize: $input-textarea-default-resize;
}

input[type="checkbox"] {
width: $input-choice-default-width;
}

.limiter-options {
background-color: $input-limiter-background-color;
border: $input-limiter-border;
border-radius: $input-limiter-border-radius;
height: $input-limiter-height;
width: $input-limiter-width;
margin: $input-limiter-margin;
padding: $input-limiter-padding;
vertical-align: $input-limiter-vertical-align;
font-size: $input-limiter-font-size;
color: $input-limiter-color;
font-family: $input-limiter-font-family;
font-weight: $input-limiter-font-weight;
font-style: $input-limiter-font-style;
line-height: $input-limiter-line-height;
}

.sorter-options {
background-color: $input-sorter-background-color;
border: $input-sorter-border;
border-radius: $input-sorter-border-radius;
height: $input-sorter-height;
width: $input-sorter-width;
margin: $input-sorter-margin;
padding: $input-sorter-padding;
vertical-align: $input-sorter-vertical-align;
font-size: $input-sorter-font-size;
color: $input-sorter-color;
font-family: $input-sorter-font-family;
font-weight: $input-sorter-font-weight;
font-style: $input-sorter-font-style;
line-height: $input-sorter-line-height;
}

/****
** Sidebar input
****/

.sidebar {
input[type="text"], input[type="password"], input[type="url"], input[type="tel"], input[type="search"], input[type="number"], input[type="datetime"], input[type="email"], select {
border: $input-default-border;
border-radius: $input-default-border-radius;
padding: $input-default-padding;
line-height: $input-default-line-height;
font-size: $input-default-font-size;
font-weight: $input-default-font-weight;
color: #2e2e2e;
height: 45px;
}
}
30 changes: 30 additions & 0 deletions src/scss/boilerplate/_menu.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.nav-sections {
background: $menu-bar-background;
margin: $menu-bar-margin;

.navigation {
background: $menu-bar-background;

.ui-menu-item.level-top {
a {
font-size: $menu-bar-menu-item-font-size;
font-weight: $menu-bar-menu-item-font-weight;
color: $menu-bar-menu-item-color;

&:hover {
color: $menu-bar-menu-item-hover-color;
}
}

&.has-active {
> a {
border-top: $menu-bar-menu-item-hover-border-top;
border-bottom: $menu-bar-menu-item-hover-border-bottom;
border-left: $menu-bar-menu-item-hover-border-left;
border-right: $menu-bar-menu-item-hover-border-right;
color: $menu-bar-menu-item-hover-color;
}
}
}
}
}
1 change: 1 addition & 0 deletions src/scss/boilerplate/_swatches.scss
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@
&.text {
background: $swatch-option-text-background;
border: $swatch-option-text-border;
font-size: $swatch-option-text-font-size;
color: $swatch-option-text-color;
padding: $swatch-option-text-padding;
min-width: $swatch-option-text-min-width;
Expand Down
Loading

0 comments on commit aaa2873

Please sign in to comment.