Skip to content

Commit

Permalink
Extended the README with a table of variables (WIP)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jordykommeren
jordykommeren committed Aug 7, 2018
1 parent aaa2873 commit 9817467
Show file tree
Hide file tree
Showing 4 changed files with 372 additions and 3 deletions.
160 changes: 159 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,11 @@ If you want to know more about this project, join our slack channel and ask ques

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

> <strong>Note</strong>: You only need one package manager, so either yarn or npm.
### 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
Expand Down Expand Up @@ -62,6 +64,162 @@ If you want to know more about this project, join our slack channel and ask ques
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.

##### 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
| Variable | Description
|--------------------------------------------|------------------------
| `$color-boilerplate-primary` | Primary theme color, accepted formats: HEX, RGB, RGBA.
| `$color-boilerplate-secondary` | Secondary theme color
| `$color-primary-gradient-color` | Primary gradient
| `$color-secondary-gradient-color` | Secondary gradient

###### Headings
| Variable | Description
|--------------------------------------------|-------------------------
| `$font-family-heading` | Default heading font-family, eg. 'Open Sans'.
| `$font-family-heading-color` | Default heading color, accepted formats: Variable, HEX, RGB en RGBA.
| `$font-family-heading-font-weight` | Default heading font-weight, accepted formats: Variable, PX, rem.
| `$font-family-heading-line-height` | Default heading line-height.
| `$font-family-heading-h1-font-size` | H1 font-size.
| `$font-family-heading-h1-font-weight` | H1 font-weight.
| `$font-family-heading-h1-line-height` | H1 line-height.
| `$font-family-heading-h1-margin` | H1 margin.
| `$font-family-heading-h1-color` | H1 color.
| `$font-family-heading-h2-font-size` | H2 font-size.
| `$font-family-heading-h2-font-weight` | H2 font-weight.
| `$font-family-heading-h2-line-height` | H2 line-height.
| `$font-family-heading-h2-margin` | H2 margin.
| `$font-family-heading-h2-color` | H2 color.
| `$font-family-heading-h3-font-size` | H3 font-size.
| `$font-family-heading-h3-font-weight` | H3 font-weight.
| `$font-family-heading-h3-margin` | H3 margin.
| `$font-family-heading-h3-color` | H3 color.
| `$font-family-heading-h4-font-size` | H4 font-size.
| `$font-family-heading-h4-font-weight` | H4 font-weight.
| `$font-family-heading-h4-margin` | H4 margin.
| `$font-family-heading-h4-color` | H4 color.
| `$font-family-heading-h5-font-size` | H5 font-size.
| `$font-family-heading-h5-font-weight` | H5 font-weight.
| `$font-family-heading-h5-margin` | H5 margin.
| `$font-family-heading-h5-color` | H5 color.
| `$font-family-heading-h6-font-size` | H6 font-size.

###### Links
| Variable | Description
|--------------------------------------------|-------------------------
| `$font-default-link-color` | Default link color.
| `$font-default-link-text-decoration` | Default link text-decoration.
| `$font-default-link-font-weight` | Default link font-weight.
| `$font-default-link-hover-color` | Default color in hover-state.
| `$font-default-link-hover-font-weight` | Default font-weight in hover-state.
| `$font-default-link-hover-text-decoration` | Default text-decoration in hover-state.

###### Titles
| Variable | Description
|--------------------------------------------|-------------------------
| `$font-filter-title-font-size` | Filter title font-size.
| `$font-filter-title-font-weight` | Filter title font-weight.
| `$font-filter-title-line-height` | Filter title line-height.
| `$font-filter-title-margin` | Filter title margin.
| `$font-filter-title-color` | Filter title color.
| `$font-filter-subtitle-font-size` | Filter subtitle font-size.
| `$font-filter-subtitle-font-weight` | Filter subtitle font-weight.
| `$font-filter-subtitle-line-height` | Filter subtitle line-height.
| `$font-filter-subtitle-margin` | Filter subtitle margin.
| `$font-filter-subtitle-color` | Filter subtitle color.
| `$font-filter-options-title-font-size` | Filter options title font-size.
| `$font-filter-options-title-font-weight` | Filter options title font-weight.
| `$font-filter-options-title-line-height` | Filter options title line-height.
| `$font-filter-options-title-margin` | Filter options title margin.
| `$font-filter-options-title-color` | Filter options title color.

###### Buttons
| Variable | Description
|--------------------------------------------|-------------------------
| `$button-default-background-color` | Default button background color.
| `$button-default-border` | Default button border.
| `$button-default-border-radius` | Default button border-radius.
| `$button-default-color` | Default button text-color.
| `$button-default-font-size` | Default button font-size.
| `$button-default-font-weight` | Default button font-weight.
| `$button-default-transition` | Default button transition effect (animation).
| `$button-default-padding` | Default button padding.
| `$button-default-text-transform` | Default button text-transform.
| `$button-default-hover-background-color` | Default button hover-state background color.
| `$button-default-hover-border` | Default button hover-state border.
| `$button-default-hover-color` | Default button hover-state text-color.
| `$button-primary-background-color` | Primary button background color.
| `$button-primary-border` | Primary button border.
| `$button-primary-border-radius` | Primary button border-radius.
| `$button-primary-color` | Primary button text-color.
| `$button-primary-font-size` | Primary button font-size.
| `$button-primary-font-weight` | Primary button font-weight.
| `$button-primary-transition` | Primary button transition effect (animation).
| `$button-primary-padding` | Primary button padding.
| `$button-primary-text-transform` | Primary button text-transform.
| `$button-primary-hover-background-color` | Primary button hover-state background color.
| `$button-primary-hover-border` | Primary button hover-state border.
| `$button-primary-hover-color` | Primary button hover-state text-color.
| `$button-secondary-background-color` | Secondary button background color.
| `$button-secondary-border` | Secondary button border.
| `$button-secondary-border-radius` | Secondary button border-radius.
| `$button-secondary-color` | Secondary button text-color.
| `$button-secondary-font-size` | Secondary button font-size.
| `$button-secondary-font-weight` | Secondary button font-weight.
| `$button-secondary-transition` | Secondary button transition effect (animation).
| `$button-secondary-padding` | Secondary button padding.
| `$button-secondary-text-transform` | Secondary button text-transform.
| `$button-secondary-hover-background-color` | Secondary button hover-state background color.
| `$button-secondary-hover-border` | Secondary button hover-state border.
| `$button-secondary-hover-color` | Secondary button hover-state text-color.

###### Inputs
| Variable | Description
|--------------------------------------------|-------------------------
| `$input-default-background-color` | Default input background color.
| `$input-default-border-color` | Default input border-color.
| `$input-default-border` | Default input border.
| `$input-default-border-radius` | Default input border-radius.
| `$input-default-height` | Default input height.
| `$input-default-width` | Default input width.
| `$input-default-margin` | Default input margin.
| `$input-default-padding` | Default input padding.
| `$input-default-vertical-align` | Default input vertical-align.
| `$input-default-font-size` | Default input font-size.
| `$input-default-color` | Default input text-color.
| `$input-default-font-family` | Default input font-family.
| `$input-default-font-weight` | Default input font-weight.
| `$input-default-font-style` | Default input font-style.
| `$input-default-line-height` | Default input line-height.
| `$input-default-placeholder-color` | Default input placeholder text-color.
| `$input-default-placeholder-font-style` | Default input placeholder font-style.
| `$input-default-disabled-background-color` | Default input disabled-state background color.
| `$input-default-disabled-border` | Default input disabled-state border.
| `$input-default-disabled-opactity` | Default input disabled-state opacity.
| `$input-default-disabled-color` | Default input disabled-state text-color.
| `$input-default-disabled-font-style` | Default input disabled-state font-style.
| `$input-default-focus-background-color` | Default input focus-state background-color.
| `$input-default-focus-border` | Default input focus-state border.
| `$input-default-focus-color` | Default input focus-state text-color.
| `$input-default-focus-font-style` | Default input focus-state font-style.
| `$input-type-text-background-color` | Text input background color.
| `$input-type-text-border-color` | Text input border color.
| `$input-type-text-border` | Text input border.
| `$input-type-text-border-radius` | Text input border radius.
| `$input-type-text-height` | Text input height.
| `$input-type-text-width` | Text input width.
| `$input-type-text-margin` | Text input margin.
| `$input-type-text-padding` | Text input padding.
| `$input-type-text-vertical-align` | Text input vertical align.
| `$input-type-text-font-size` | Text input font-size.
| `$input-type-text-color` | Text input text-color.
| `$input-type-text-font-family` | Text input font-family.
| `$input-type-text-font-weight` | Text input font-weight.

### 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.
Expand Down
44 changes: 43 additions & 1 deletion src/scss/boilerplate/_fonts.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,38 +13,47 @@ html, body {
font-weight: $font-family-heading-h1-font-weight;
line-height: $font-family-heading-h1-line-height;
margin: $font-family-heading-h1-margin;
color: $font-family-heading-h1-color;
}

h2 {
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;
color: $font-family-heading-h2-color;
}

h3 {
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;
color: $font-family-heading-h3-color;
}

h4 {
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;
color: $font-family-heading-h4-color;
}

h5 {
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;
color: $font-family-heading-h5-color;
}

h6 {
font-size: 14px;
font-size: $font-family-heading-h6-font-size;
font-weight: $font-family-heading-h6-font-weight;
line-height: $font-family-heading-h6-line-height;
margin: $font-family-heading-h6-margin;
color: $font-family-heading-h6-color;
}

p {
Expand All @@ -66,4 +75,37 @@ html, body {
text-decoration: $font-default-link-hover-text-decoration;
}
}

.filter-title {
font-size: $font-filter-title-font-size;
font-weight: $font-filter-title-font-weight;
margin: $font-filter-title-margin;
color: $font-filter-title-color;
line-height: $font-filter-title-line-height;

strong {
font-size: $font-filter-title-font-size;
font-weight: $font-filter-title-font-weight;
margin: $font-filter-title-margin;
color: $font-filter-title-color;
line-height: $font-filter-title-line-height;
}
}

.filter-subtitle {
font-size: $font-filter-subtitle-font-size;
font-weight: $font-filter-subtitle-font-weight;
margin: $font-filter-subtitle-margin;
color: $font-filter-subtitle-color;
line-height: $font-filter-subtitle-line-height;
}

.filter-options {
.filter-options-title {
font-size: $font-filter-options-title-font-size;
font-weight: $font-filter-options-title-font-weight;
margin: $font-filter-options-title-margin;
color: $font-filter-options-title-color;
}
}
}
78 changes: 78 additions & 0 deletions src/scss/boilerplate/_inputs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,84 @@ input[type="text"], input[type="radio"], input[type="checkbox"], input[type="ema

}

input[type="text"] {
background-color: $input-type-text-background-color;
border-color: $input-type-text-border-color;
border: $input-type-text-border;
border-radius: $input-type-text-border-radius;
height: $input-type-text-height;
width: $input-type-text-width;
margin: $input-type-text-margin;
padding: $input-type-text-padding;
vertical-align: $input-type-text-vertical-align;
font-size: $input-type-text-font-size;
color: $input-type-text-color;
font-family: $input-type-text-font-family;
font-weight: $input-type-text-font-weight;
font-style: $input-type-text-font-style;
line-height: $input-type-text-line-height;

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

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

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

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

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

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

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

textarea {
height: $input-textarea-default-height;
resize: $input-textarea-default-resize;
Expand Down
Loading

0 comments on commit 9817467

Please sign in to comment.