Skip to content

Latest commit

 

History

History
548 lines (506 loc) · 47.4 KB

README.md

File metadata and controls

548 lines (506 loc) · 47.4 KB
Raw

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 frontend demo is available here. This Magento 2 SASS theme is developed by Epartment E-commerce.

Listerpage

More images.

Compatibility

  • Magento 2.4
  • 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

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 git@github.com:epartment/magento2-sass-theme-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
Variable Description
$color-boilerplate-primary Primary theme color, accepted formats: HEX, RGB, RGBA, variable.
$color-boilerplate-secondary Secondary theme color, accepted formats: HEX, RGB, RGBA, variable.
$color-primary-gradient-color Primary gradient
$color-secondary-gradient-color Secondary gradient
Fonts
Variable Description
$font-default-font-family-primary Default primary font.
$font-default-font-family-secondary Default secondary font.
$font-default-font-size Default font-size, accepted formats: px, rem or a variable which contains one of these.
$font-default-font-weight Default font-weight, accepted formats: 100-800 or a variable containing one of these.
$font-default-font-line-height Default font line-height, accepted formats: px, rem or a variable containing one of those.
$font-default-color Default font color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$font-default-heading-color Default font-heading color, accepted formats: HEX, RGB, RGBA or a variable containing one of those.
$font-family Default font family.
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 value's: 100-800 or a variable containing it.
$font-family-heading-line-height Default heading line-height, accepted formats: px, rem or a variable containing it.
$font-family-heading-h1-font-size H1 font-size, accepted formats: px, rem or a variable containing it.
$font-family-heading-h1-font-weight H1 font-weight, accepted value's: 100-800 or a variable containing it.
$font-family-heading-h1-line-height H1 line-height, accepted formats: px, rem or a variable containing it.
$font-family-heading-h1-margin H1 margin, accepted formats: px, rem or a variable containing it.
$font-family-heading-h1-color H1 color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$font-family-heading-h2-font-size H2 font-size, accepted formats: px, rem or a variable containing it.
$font-family-heading-h2-font-weight H2 font-weight, accepted value's: 100-800 or a variable containing it.
$font-family-heading-h2-line-height H2 line-height, accepted formats: px, rem or a variable containing it.
$font-family-heading-h2-margin H2 margin, accepted formats: px, rem or a variable containing it.
$font-family-heading-h2-color H2 color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$font-family-heading-h3-font-size H3 font-size, accepted formats: px, rem or a variable containing it.
$font-family-heading-h3-font-weight H3 font-weight, accepted value's: 100-800 or a variable containing it.
$font-family-heading-h3-margin H3 margin, accepted formats: px, rem or a variable containing it.
$font-family-heading-h3-color H3 color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$font-family-heading-h4-font-size H4 font-size, accepted formats: px, rem or a variable containing it.
$font-family-heading-h4-font-weight H4 font-weight, accepted value's: 100-800 or a variable containing it.
$font-family-heading-h4-margin H4 margin, accepted formats: px, rem or a variable containing it.
$font-family-heading-h4-color H4 color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$font-family-heading-h5-font-size H5 font-size, accepted formats: px, rem or a variable containing it.
$font-family-heading-h5-font-weight H5 font-weight, accepted value's: 100-800 or a variable containing it.
$font-family-heading-h5-margin H5 margin, accepted formats: px, rem or a variable containing it.
$font-family-heading-h5-color H5 color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$font-family-heading-h6-font-size H6 font-size, accepted formats: px, rem or a variable containing it.
$font-family-heading-h6-font-weight H6 font-weight, accepted formats: 100-800 or a variable containing it.
$font-family-heading-h6-margin H6 margin, accepted formats: px,rem or a variable containing one of these.
$font-family-heading-h6-color H6 color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
Links
Variable Description
$font-default-link-color Default link color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$font-default-link-text-decoration Default link text-decoration.
$font-default-link-font-weight Default link font-weight, accepted value's: 100-800 or a variable containing it.
$font-default-link-hover-color Default color in hover-state, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$font-default-link-hover-text-decoration Default text-decoration in hover-state.
$font-default-link-hover-font-weight Default font-weight in hover-state, accepted value's: 100-800 or a variable containing it.
$font-header-link-color Header link color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$font-header-link-text-decoration Header link text-decoration.
$font-header-link-font-weight Header link font-weight, accepted value's: 100-800 or a variable containing it.
$font-header-link-hover-color Header link color in hover-state, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$font-header-link-hover-text-decoration Header link text-decoration in hover-state.
$font-header-link-hover-font-weight Header link font-weight in hover-state, accepted value's: 100-800 or a variable containing it.
$font-footer-link-color Footer link color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$font-footer-link-text-decoration Footer link text-decoration.
$font-footer-link-font-weight Footer link font-weight, accepted value's: 100-800 or a variable containing it.
$font-footer-link-hover-color Footer link color in hover-state, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$font-footer-link-hover-text-decoration Footer link text-decoration in hover-state.
$font-footer-link-hover-font-weight Footer link font-weight in hover-state, accepted value's: 100-800 or a variable containing it.
Titles
Variable Description
$font-filter-title-font-size Filter title font-size, accepted formats: px, rem or a variable containing it.
$font-filter-title-font-weight Filter title font-weight, accepted value's: 100-800 or a variable containing it.
$font-filter-title-line-height Filter title line-height, accepted formats: px, rem or a variable containing it.
$font-filter-title-margin Filter title margin, accepted formats: px, rem or a variable containing it.
$font-filter-title-color Filter title color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$font-filter-subtitle-font-size Filter subtitle font-size, accepted formats: px, rem or a variable containing it.
$font-filter-subtitle-font-weight Filter subtitle font-weight, accepted value's: 100-800 or a variable containing it.
$font-filter-subtitle-line-height Filter subtitle line-height, accepted formats: px, rem or a variable containing it.
$font-filter-subtitle-margin Filter subtitle margin, accepted formats: px, rem or a variable containing it.
$font-filter-subtitle-color Filter subtitle color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$font-filter-options-title-font-size Filter options title font-size, accepted formats: px, rem or a variable containing it.
$font-filter-options-title-font-weight Filter options title font-weight, accepted value's: 100-800 or a variable containing it.
$font-filter-options-title-line-height Filter options title line-height, accepted formats: px, rem or a variable containing it.
$font-filter-options-title-margin Filter options title margin, accepted formats: px, rem or a variable containing it.
$font-filter-options-title-color Filter options title color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$font-product-item-name-font-size Product item title (lister) font-size, accepted formats: px, rem or a variable containing it.
$font-product-item-name-font-weight Product item title (lister) font-weight, accepted value's: 100-800 or a variable containing it.
$font-product-item-name-line-height Product item title (lister) line-height, accepted formats: px, rem or a variable containing it.
$font-product-item-name-margin Product item title (lister) margin, accepted formats: px, rem or a variable containing it.
$font-product-item-name-color Product item title (lister) color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
Buttons
Variable Description
$button-default-background-color Default button background color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$button-default-border Default button border.
$button-default-border-radius Default button border-radius.
$button-default-color Default button text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$button-default-font-size Default button font-size, accepted formats: px, rem or a variable containing it.
$button-default-font-weight Default button font-weight, accepted value's: 100-800 or a variable containing it.
$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, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$button-default-hover-border Default button hover-state border.
$button-default-hover-color Default button hover-state text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$button-primary-background-color Primary button background color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$button-primary-border Primary button border.
$button-primary-border-radius Primary button border-radius.
$button-primary-color Primary button text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$button-primary-font-size Primary button font-size, accepted formats: px, rem or a variable containing it.
$button-primary-font-weight Primary button font-weight, accepted value's: 100-800 or a variable containing it.
$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, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$button-primary-hover-border Primary button hover-state border.
$button-primary-hover-color Primary button hover-state text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$button-secondary-background-color Secondary button background color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$button-secondary-border Secondary button border.
$button-secondary-border-radius Secondary button border-radius.
$button-secondary-color Secondary button text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$button-secondary-font-size Secondary button font-size, accepted formats: px, rem or a variable containing it.
$button-secondary-font-weight Secondary button font-weight, accepted value's: 100-800 or a variable containing it.
$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, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$button-secondary-hover-border Secondary button hover-state border.
$button-secondary-hover-color Secondary button hover-state text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
Swatches
Variable Description
$swatch-default-background Swatch default background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$swatch-default-border Swatch default border.
$swatch-default-border-radius Swatch default border-radius.
$swatch-default-color Swatch default color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$swatch-default-font-size Swatch default font-size, accepted formats: px, rem or a variable containing it.
$swatch-default-font-weight Swatch default font-weight, accepted value's: 100-800 or a variable containing it.
$swatch-default-line-height Swatch default line-height.
$swatch-default-text-align Swatch default text-align.
$swatch-default-margin Swatch default margin.
$swatch-default-padding Swatch default padding.
$swatch-default-height Swatch default height.
$swatch-default-width Swatch default width.
$swatch-default-min-width Swatch default min-width.
$swatch-default-max-width Swatch default max-width.
$swatch-default-overflow Swatch default overflow.
$swatch-default-hover-border Swatch default hover-state border.
$swatch-default-hover-outline Swatch default hover-state outline.
$swatch-default-hover-color Swatch default hover-state color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$swatch-option-text-background Swatch option text background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$swatch-option-text-border Swatch option text border.
$swatch-option-text-color Swatch option text color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$swatch-option-text-font-size Swatch option text font-size, accepted formats: px, rem or a variable containing it.
$swatch-option-text-padding Swatch option text padding.
$swatch-option-text-min-width Swatch option text min-width.
$swatch-option-text-margin Swatch option text margin.
$swatch-option-text-outline Swatch option text outline.
$swatch-option-text-hover-border Swatch option text hover-state border.
$swatch-option-text-hover-outline Swatch option text hover-state outline.
$swatch-option-text-hover-color Swatch option text hover-state color.
$swatch-option-color-border Swatch option color border.
$swatch-option-color-padding Swatch option color padding.
$swatch-option-color-margin Swatch option color margin.
$swatch-option-color-height Swatch option color height.
$swatch-option-color-width Swatch option color width.
$swatch-option-color-min-width Swatch option color min-width.
$swatch-option-color-hover-outline Swatch option color hover-state outline.
Inputs
Variable Description
$input-default-background-color Default input background color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-default-border-color Default input border-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$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, accepted formats: px, rem or a variable containing it.
$input-default-color Default input text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-default-font-family Default input font-family.
$input-default-font-weight Default input font-weight, accepted value's: 100-800 or a variable containing it.
$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, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-default-disabled-border Default input disabled-state border.
$input-default-disabled-opacity Default input disabled-state opacity.
$input-default-disabled-color Default input disabled-state text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-default-disabled-font-style Default input disabled-state font-style, accepted formats: px, rem or a variable containing it.
$input-default-focus-background-color Default input focus-state background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-default-focus-border Default input focus-state border.
$input-default-focus-color Default input focus-state text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-default-focus-font-style Default input focus-state font-style.
$input-type-text-background-color Text input background color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-type-text-border-color Text input border color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$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, accepted formats: px, rem or a variable containing it.
$input-type-text-color Text input text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-type-text-font-family Text input font-family.
$input-type-text-font-weight Text input font-weight, accepted value's: 100-800 or a variable containing it.
$input-type-text-font-style Text input font-style.
$input-type-text-line-height Text input line-height.
$input-type-text-placeholder-color Text input placeholder text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-type-text-placeholder-font-style Text input placeholder font-style.
$input-type-text-disabled-background-color Text input disabled-state background-color.
$input-type-text-disabled-border Text input disabled-state border.
$input-type-text-disabled-opacity Text input disabled-state opacity.
$input-type-text-disabled-color Text input disabled-state text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-type-text-disabled-font-style Text input disabled-state font-style.
$input-type-text-focus-background-color Text input focus-state background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-type-text-focus-border Text input focus-state border.
$input-type-text-focus-color Text input focus-state color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-type-text-focus-font-style Text input focus-state font-style.
$input-select-background-color Select background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-select-border-color Select border-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-select-border Select border.
$input-select-border-radius Select border-radius.
$input-select-height Select height.
$input-select-width Select width.
$input-select-margin Select margin.
$input-select-padding Select padding.
$input-select-vertical-align Select vertical-align.
$input-select-font-size Select font-size, accepted formats: px, rem or a variable containing it.
$input-select-color Select text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-select-font-family Select font-family.
$input-select-font-weight Select font-weight, accepted value's: 100-800 or a variable containing it.
$input-select-font-style Select font-style.
$input-select-line-height Select line-height.
$input-select-placeholder-color Select placeholder text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-select-placeholder-font-style Select placeholder font-style.
$input-select-disabled-background-color Select disabled-state background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-select-disabled-border Select disabled-state border.
$input-select-disabled-opacity Select disabled-state opacity.
$input-select-disabled-color Select disabled-state color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-select-disabled-font-style Select disabled-state font-style.
$input-select-focus-background-color Select focus-state background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-select-focus-border Select focus-state border.
$input-select-focus-color Select focus-state color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-select-focus-font-style Select focus-state font-style.
$input-textarea-resize Textarea resize value (vertical, horizontal, both).
$input-textarea-background-color Textarea background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-textarea-border-color Textarea border-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-textarea-border Textarea border.
$input-textarea-border-radius Textarea border-radius.
$input-textarea-height Textarea height.
$input-textarea-min-height Textarea minimum height.
$input-textarea-width Textarea width.
$input-textarea-margin Textarea margin.
$input-textarea-padding Textarea padding.
$input-textarea-vertical-align Textarea vertical-align.
$input-textarea-font-size Textarea font-size, accepted formats: px, rem or a variable containing it.
$input-textarea-color Textarea text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-textarea-font-family Textarea font-family.
$input-textarea-font-weight Textarea font-weight, accepted value's: 100-800 or a variable containing it.
$input-textarea-font-style Textarea font-style.
$input-textarea-line-height Textarea line-height.
$input-textarea-placeholder-color Textarea placeholder text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-textarea-placeholder-font-style Textarea placeholder font-style.
$input-textarea-disabled-background-color Textarea disabled-state background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-textarea-disabled-border Textarea disabled-state border.
$input-textarea-disabled-opacity Textarea disabled-state opacity.
$input-textarea-disabled-color Textarea disabled-state color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-textarea-disabled-font-style Textarea disabled-state font-style.
$input-textarea-focus-background-color Textarea focus-state background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-textarea-focus-border Textarea focus-state border.
$input-textarea-focus-color Textarea focus-state color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-textarea-focus-font-style Textarea focus-state font-style.
$input-limiter-background-color Limiter input background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-limiter-border-color Limiter input border-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-limiter-border Limiter input border.
$input-limiter-border-radius Limiter input border-radius.
$input-limiter-height Limiter input height.
$input-limiter-width Limiter input width.
$input-limiter-margin Limiter input margin.
$input-limiter-padding Limiter input padding.
$input-limiter-vertical-align Limiter input vertical align.
$input-limiter-font-size Limiter input font-size, accepted formats: px, rem or a variable containing it.
$input-limiter-color Limiter input text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-limiter-font-family Limiter input font-family.
$input-limiter-font-weight Limiter input font-weight, accepted value's: 100-800 or a variable containing it.
$input-limiter-font-style Limiter input font-style.
$input-limiter-line-height Limiter input line-height.
$input-limiter-disabled-background-color Limiter input disabled-state background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-limiter-disabled-border Limiter input disabled-state border.
$input-limiter-disabled-opacity Limiter input disabled-state opacity.
$input-limiter-disabled-color Limiter input disabled-state color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-limiter-disabled-font-style Limiter input disabled-state font-style.
$input-limiter-focus-background-color Limiter input focus-state background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-limiter-focus-border Limiter input focus-state border.
$input-limiter-focus-color Limiter input focus-state text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-limiter-focus-font-style Limiter input focus-state font-style.
$input-sorter-background-color Sorter input background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-sorter-border-color Sorter input border-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-sorter-border Sorter input border.
$input-sorter-border-radius Sorter input border-radius.
$input-sorter-height Sorter input height.
$input-sorter-width Sorter input width.
$input-sorter-margin Sorter input margin.
$input-sorter-padding Sorter input padding.
$input-sorter-vertical-align Sorter input vertical-align
$input-sorter-font-size Sorter input font-size, accepted formats: px, rem or a variable containing it.
$input-sorter-color Sorter input color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-sorter-font-family Sorter input font-family.
$input-sorter-font-weight Sorter input font-weight, accepted value's: 100-800 or a variable containing it.
$input-sorter-font-style Sorter input font-style.
$input-sorter-line-height Sorter input line-height.
$input-sorter-disabled-background-color Sorter input disabled-state background-color.
$input-sorter-disabled-border Sorter input disabled-state border.
$input-sorter-disabled-opacity Sorter input disabled-state opacity.
$input-sorter-disabled-color Sorter input disabled-state color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$input-sorter-disabled-font-style Sorter input disabled-state font-style.
Header
Variable Description
$header-background-color Header background color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$header-text-color Header text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$header-padding Header padding.
$header-panel-background-color Header panel background color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$header-panel-text-color Header panel text color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$header-panel-padding Header panel padding.
$header-panel-bottom-border-color Header panel border-bottom color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
Menubar
Variable Description
$menu-bar-background Menu bar background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$menu-bar-margin Menu bar margin.
$menu-bar-menu-item-font-family Menu bar item font-family.
$menu-bar-menu-item-font-weight Menu bar item font-weight, accepted value's: 100-800 or a variable containing it.
$menu-bar-menu-item-font-size Menu bar item font-size.
$menu-bar-menu-item-color Menu bar item text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$menu-bar-menu-item-hover-background Menu bar item hover-state background-color.
$menu-bar-menu-item-hover-color Menu bar item hover-state text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$menu-bar-menu-item-hover-default-border Menu bar item hover-state default border.
$menu-bar-menu-item-hover-border-top Menu bar item hover-state border-top.
$menu-bar-menu-item-hover-border-right Menu bar item hover-state border-right.
$menu-bar-menu-item-hover-border-bottom Menu bar item hover-state border-bottom.
$menu-bar-menu-item-hover-border-left Menu bar item hover-state border-left.
$menu-bar-menu-item-active-background Menu bar item active-state background-color.
$menu-bar-menu-item-active-color Menu bar item active-sate color.
$menu-bar-menu-item-active-default-border Menu bar item active-state default-border.
$menu-bar-menu-item-active-border-top Menu bar item active-sate border-top.
$menu-bar-menu-item-active-border-right Menu bar item active-state border-right.
$menu-bar-menu-item-active-border-bottom Menu bar item active-state border-bottom.
$menu-bar-menu-item-active-border-left Menu bar item active-state border-left.
Fieldset
Variable Description
$form-fieldset-border Form fieldset border.
$form-fieldset-margin Form fieldset margin.
$form-fieldset-padding Form fieldset padding.
$form-fieldset-legend-color Form fieldset legend text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$form-fieldset-legend-font-size Form fieldset legend font-size.
$form-fieldset-legend-font-family Form fieldset legend font-family.
$form-fieldset-legend-font-weight Form fieldset legend font-weight, accepted value's: 100-800 or a variable containing it.
$form-fieldset-legend-font-style Form fieldset legend font-style.
$form-fieldset-legend-line-height Form fieldset legend line-height.
$form-fieldset-legend-margin Form fieldset legend margin.
$form-fieldset-legend-padding Form fieldset legend padding.
$form-fieldset-legend-width Form fieldset legend width.
Fieldset Field
Variable Description
$form-fieldset-field-type Form fieldset field type.
$form-fieldset-field-margin Form fieldset field margin.
$form-fieldset-field-box-sizing Form fieldset field box-sizing.
$form-fieldset-field-choice-before-width Form fieldset field choice :before width.
$form-fieldset-field-choice-before-padding Form fieldset field choice :before padding.
$form-fieldset-field-choice-before-height Form fieldset field choice :before height.
$form-fieldset-field-choice-before-float Form fieldset field choice :before float.
Fieldset label
Variable Description
$form-fieldset-field-label-padding Form fieldset label padding.
$form-fieldset-field-label-text-align Form fieldset label text-align.
$form-fieldset-field-label-width Form fieldset label width.
$form-fieldset-field-label-float Form fieldset label float.
$form-fieldset-field-label-font-weight Form fieldset label font-weight, accepted value's: 100-800 or a variable containing it.
$form-fieldset-field-choice-label-margin Form fieldset choice label margin.
Toolbar
Variable Description
$toolbar-modes-mode-background Toolbar Mode background.
$toolbar-modes-mode-border Toolbar Mode border.
$toolbar-modes-mode-color Toolbar Mode color.
$toolbar-modes-mode-padding Toolbar Mode padding.
$toolbar-modes-mode-hover-background Toolbar Mode hover-state background.
$toolbar-modes-mode-hover-border Toolbar Mode hover-state border.
$toolbar-modes-mode-hover-color Toolbar Mode hover-state color
Detail tab
Variable Description
$detail-tab-title-background Detail tab title background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$detail-tab-title-border-color Detail tab title border-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$detail-tab-title-color Detail tab title text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$detail-tab-title-font-weight Detail tab title font-weight, accepted value's: 100-800 or a variable containing it.
$detail-tab-title-text-decoration Detail tab title text-decoration.
$detail-tab-title-padding Detail tab title padding.
$detail-tab-title-height Detail tab title height.
$detail-tab-title-font-size Detail tab title font-size, accepted formats: px, rem or a variable containing it.
$detail-tab-title-hover-background Detail tab title hover-state background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$detail-tab-title-hover-color Detail tab title hover-state text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$detail-tab-title-hover-border Detail tab title hover-state border.
$detail-tab-title-active-background Detail tab title active-state background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$detail-tab-title-active-color Detail tab title active-state text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$detail-tab-title-active-border Detail tab title active-state border.
$detail-tab-content-background Detail tab content background.
$detail-tab-content-border Detail tab content border.
$detail-tab-content-margin Detail tab content margin.
$detail-tab-content-font-size Detail tab content font-size, accepted formats: px, rem or a variable containing it.
Footer
Variable Description
$footer-background Footer background-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$footer-content-margin Footer content margin.
$footer-content-padding Footer content padding.
$footer-content-color Footer content text-color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.
$footer-line-color Footer line color, accepted formats: HEX, RGB, RGBA or a variable containing one of these.

Demo images

Lister page Product page Shoppingcart Admin - themes