From 981746792c0e58bfd03548489a979dd3911be961 Mon Sep 17 00:00:00 2001 From: Jordy Kommeren Date: Tue, 7 Aug 2018 15:33:44 +0200 Subject: [PATCH] Extended the README with a table of variables (WIP) --- README.md | 160 ++++++++++++++++++++++++++- src/scss/boilerplate/_fonts.scss | 44 +++++++- src/scss/boilerplate/_inputs.scss | 78 +++++++++++++ src/scss/boilerplate/_variables.scss | 93 +++++++++++++++- 4 files changed, 372 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 1d6c174..731d68a 100644 --- a/README.md +++ b/README.md @@ -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/) +> 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.2/install-gde/prereq/zip_install.html @@ -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. diff --git a/src/scss/boilerplate/_fonts.scss b/src/scss/boilerplate/_fonts.scss index 400d726..0769d36 100644 --- a/src/scss/boilerplate/_fonts.scss +++ b/src/scss/boilerplate/_fonts.scss @@ -13,6 +13,7 @@ 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 { @@ -20,6 +21,7 @@ html, body { 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 { @@ -27,6 +29,7 @@ html, body { 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 { @@ -34,6 +37,7 @@ html, body { 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 { @@ -41,10 +45,15 @@ html, body { 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 { @@ -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; + } + } } \ No newline at end of file diff --git a/src/scss/boilerplate/_inputs.scss b/src/scss/boilerplate/_inputs.scss index 44db104..3f39577 100644 --- a/src/scss/boilerplate/_inputs.scss +++ b/src/scss/boilerplate/_inputs.scss @@ -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; diff --git a/src/scss/boilerplate/_variables.scss b/src/scss/boilerplate/_variables.scss index 0384f1d..8c84f8f 100644 --- a/src/scss/boilerplate/_variables.scss +++ b/src/scss/boilerplate/_variables.scss @@ -46,37 +46,47 @@ $font-family-heading-h1-font-size: 40px !default; $font-family-heading-h1-font-weight: $font-family-heading-font-weight !default; $font-family-heading-h1-line-height: $font-family-heading-line-height !default; $font-family-heading-h1-margin: 0rem 0 40px 0 !default; +$font-family-heading-h1-color: $font-default-heading-color !default; /* H2 */ $font-family-heading-h2-font-size: 2.6rem !default; $font-family-heading-h2-font-weight: $font-family-heading-font-weight !default; $font-family-heading-h2-line-height: $font-family-heading-line-height !default; $font-family-heading-h2-margin: 2.5rem 0 2rem 0 !default; +$font-family-heading-h2-color: $font-default-heading-color !default; /* H3 */ $font-family-heading-h3-font-size: 1.8rem !default; $font-family-heading-h3-font-weight: $font-family-heading-font-weight !default; $font-family-heading-h3-line-height: $font-family-heading-line-height !default; $font-family-heading-h3-margin: 1.5rem 0 1rem 0 !default; +$font-family-heading-h3-color: $font-default-heading-color !default; + /* H4 */ $font-family-heading-h4-font-size: 1.4rem !default; $font-family-heading-h4-font-weight: 700 !default; $font-family-heading-h4-line-height: $font-family-heading-line-height !default; $font-family-heading-h4-margin: 2rem 0 2rem 0 !default; +$font-family-heading-h4-color: $font-default-heading-color !default; + /* H5 */ $font-family-heading-h5-font-size: 1.2rem !default; $font-family-heading-h5-font-weight: 700 !default; $font-family-heading-h5-line-height: $font-family-heading-line-height !default; $font-family-heading-h5-margin: 2rem 0 2rem 0 !default; +$font-family-heading-h5-color: $font-default-heading-color !default; + /* H6 */ $font-family-heading-h6-font-size: 1rem !default; $font-family-heading-h6-font-weight: 700 !default; $font-family-heading-h6-line-height: $font-family-heading-line-height !default; $font-family-heading-h6-margin: 2rem 0 2rem 0 !default; +$font-family-heading-h6-color: $font-default-heading-color !default; +/* Link */ $font-default-link-color: $color-boilerplate-blue !default; $font-default-link-text-decoration: none !default; $font-default-link-font-weight: $font-default-font-weight !default; @@ -85,7 +95,23 @@ $font-default-link-hover-font-weight: $font-default-link-font-weight !default; $font-default-link-hover-text-decoration: underline !default; /* Standard title classes */ - +$font-filter-title-font-size: 18px !default; +$font-filter-title-font-weight: 700 !default; +$font-filter-title-line-height: 1.421617 !default; +$font-filter-title-margin: 0 0 20px 0 !default; +$font-filter-title-color: $font-default-color !default; + +$font-filter-subtitle-font-size: $font-default-font-size !default; +$font-filter-subtitle-font-weight: 700 !default; +$font-filter-subtitle-line-height: 1.421617 !default; +$font-filter-subtitle-margin: 0 0 10px 0 !default; +$font-filter-subtitle-color: $font-default-color !default; + +$font-filter-options-title-font-size: $font-default-font-size !default; +$font-filter-options-title-font-weight: 700 !default; +$font-filter-options-title-line-height: 1.421617 !default; +$font-filter-options-title-margin: 0 0 10px 0 !default; +$font-filter-options-title-color: $font-default-color !default; /* * Buttons @@ -108,6 +134,7 @@ $button-default-hover-color: white !default; /* Button primary */ $button-primary-background-color: $button-default-background-color !default; $button-primary-border: $button-default-border !default; +$button-primary-border-radius: $button-default-border-radius; $button-primary-color: $button-default-color !default; $button-primary-font-weight: 600 !default; $button-primary-font-size: $button-default-font-size !default; @@ -215,6 +242,67 @@ $input-default-focus-border: $input-default-border !default; $input-default-focus-color: $input-default-color !default; $input-default-focus-font-style: $input-default-font-style !default; +/* Input[type="text"] */ +$input-type-text-background-color: $input-default-background-color !default; +$input-type-text-border-color: $input-default-border-color !default; +$input-type-text-border: $input-default-border !default; +$input-type-text-border-radius: $input-default-border-radius !default; +$input-type-text-height: $input-default-height !default; +$input-type-text-width: $input-default-width !default; +$input-type-text-margin: $input-default-margin !default; +$input-type-text-padding: $input-default-padding !default; +$input-type-text-vertical-align: $input-default-vertical-align !default; +$input-type-text-font-size: $input-default-font-style !default; +$input-type-text-color: $input-default-color !default; +$input-type-text-font-family: $input-default-font-family !default; +$input-type-text-font-weight: $input-default-font-weight !default; +$input-type-text-font-style: $input-default-font-style !default; +$input-type-text-line-height: $input-default-line-height !default; + +/* Input[type="text"] Disabled state */ +$input-type-text-disabled-background-color: $input-default-disabled-background-color !default; +$input-type-text-disabled-border: $input-default-disabled-border !default; +$input-type-text-disabled-opacity: $input-default-disabled-opacity !default; +$input-type-text-disabled-color: $input-default-disabled-color !default; +$input-type-text-disabled-font-style: $input-default-disabled-font-style !default; + +/* Input[type="text"] Focus state */ +$input-type-text-focus-background-color: $input-default-focus-background-color !default; +$input-type-text-focus-border: $input-default-focus-border !default; +$input-type-text-focus-color: $input-default-focus-color !default; +$input-type-text-focus-font-style: $input-default-focus-font-style !default; + +/* Select */ +$input-select-background-color: $input-default-background-color !default; +$input-select-border-color: $input-default-border-color !default; +$input-select-border: $input-default-border !default; +$input-select-border-radius: $input-default-border-radius !default; +$input-select-height: $input-default-height !default; +$input-select-width: $input-default-width !default; +$input-select-margin: $input-default-margin !default; +$input-select-padding: $input-default-padding !default; +$input-select-vertical-align: $input-default-vertical-align !default; +$input-select-font-size: $input-default-font-size !default; +$input-select-color: $input-default-color !default; +$input-select-font-family: $input-default-font-family !default; +$input-select-font-weight: $input-default-font-weight !default; +$input-select-font-style: $input-default-font-style !default; +$input-select-line-height: $input-default-line-height !default; + +/* Select Disabled state */ +$input-select-disabled-background-color: $input-default-disabled-background-color !default; +$input-select-disabled-border: $input-default-disabled-border !default; +$input-select-disabled-opacity: $input-default-disabled-opacity !default; +$input-select-disabled-color: $input-default-disabled-color !default; +$input-select-disabled-font-style: $input-default-disabled-font-style !default; + +/* Select Focus state */ +$input-select-focus-background-color: $input-default-focus-background-color !default; +$input-select-focus-border: $input-default-focus-border !default; +$input-select-focus-color: $input-default-focus-color !default; +$input-select-focus-font-style: $input-default-focus-font-style !default; + + /* Textarea */ $input-textarea-default-height: auto !default; $input-textarea-default-resize: vertical !default; @@ -349,3 +437,6 @@ $detail-tab-content-font-size: $font-default-font-size !default; + + +