Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/old/app/design/frontend/Cnc/default/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

# Jade Frontend M2

## What is Jade Frontend M2 ?

Jade Frontend M2 is a Magento 2 starter theme made by Kaliop Digital Commerce.

It used in Jade for Magento 2. If you wish to use Jade for Magento 2, please read this: https://goo.gl/MCtIBt

## Using SCSS ?

Magento 2 natively uses Less for CSS preprocessing. But we do not like it.

So Jade Frontend M2 uses SCSS instead of Less.

## Compiling SCSS to CSS specifically for Magento 2

In order for SCSS files to be readable by the broswer, the must be processed to CSS.

But, for Magento 2, those processed CSS files must be placed into the `pub` folder with specific constraints.

If order to make things easy, please use the `snowdog/frontools` module: https://github.com/SnowdogApps/magento2-frontools

> **NOTE**
>
> Jade for Magento 2 comes with `snowdog/frontools` installed and a theme configuration that is ready to use. Please carefully read the "Setup (S)CSS stack" part of this page https://goo.gl/MCtIBt

## Theme config variables

### Common

#### Colors

File to update : app/design/frontend/<Vendor>/<theme>/web/scss/variables/_colors.scss

#### Fonts

File to update : app/design/frontend/<Vendor>/<theme>/web/scss/variables/_fonts.scss

#### Forms

File to update : app/design/frontend/<Vendor>/<theme>/web/scss/variables/_forms.scss

Availabled variables to configure forms design :

* input-radius
* input-border-color
* input-background
* checkbox-width
* checkbox-height
* checkbox-border-weight
* radio-width
* radio-height
* radio-border-weight

#### Layout

File to update : app/design/frontend/<Vendor>/<theme>/web/scss/variables/_layout.scss

* container-width
* inner-container-width
* gutter
* sidebar-width
* main-column-width

#### Notifications

File to update : app/design/frontend/<Vendor>/<theme>/web/scss/common/_notifications.scss

Availabled variables to configure forms design :

* notification-bar-padding
* notification-bar-radius
* notification-success-bg-color
* notification-info-bg-color
* notification-warning-bg-color
* notification-error-bg-color

### Pages

#### Account

File to update : app/design/frontend/<Vendor>/<theme>/web/scss/modules/customer/_account.scss

Availabled variables to configure account design :

* account-sidebar-width
* account-sidebar-gutter
* account-sidebar-bg
* account-sidebar-padding
* account-sidebar-delimiter
* account-sidebar-item-color
* account-sidebar-item-current
* account-sidebar-item-padding
* account-table-border
* account-table-alternating-color
* account-table-inner-border
* account-table-padding-col

#### Cart

File to update : app/design/frontend/<Vendor>/<theme>/web/scss/modules/checkout/_cart.scss

Availabled variables to configure forms design :

* checkout-summary-width
* checkout-summary-margin
* checkout-summary-padding
* checkout-summary-bg-color

#### Listing products

File to update : app/design/frontend/<Vendor>/<theme>/web/scss/modules/catalog/_listing.scss

Availabled variables to configure listing products design :

* listing-list-item-padding
* listing-list-item-gutter

#### Styleguide

File to update : app/design/frontend/<Vendor>/<theme>/web/scss/layout/_checkout.scss

Availabled variables to configure forms design :

* styleguide-title-color
* styleguide-title-border-color
* styleguide-section-spacement

### Components

#### Breadcrumbs

File to update : app/design/frontend/<Vendor>/<theme>/web/scss/layout/_breadcrumbs.scss

Availabled variables to configure breadcrumbs design :

* breadcrumbs-margin
* breadcrumbs-items-space
* breadcrumbs-font-size
* breadcrumbs-font-color
* breadcrumbs-arrow-color
* breadcrumbs-arrow-size

#### Burger menu

File to update : app/design/frontend/<Vendor>/<theme>/web/scss/layout/header/_burger.scss

Availabled variables to configure burger menu design :

* burger-size
* burger-border-weight
* burger-border-color
* burger-line-distance
* burger-line-width
* burger-close-rotation

#### Gallery

File to update : app/design/frontend/<Vendor>/<theme>/web/scss/modules/catalog/_gallery.scss

Availabled variables to configure product gallery design :

* gallery-nav-thumb-padding
* gallery-nav-thumb-margin
* gallery-nav-thumb-border-width
* gallery-nav-thumb-border-color
* gallery-nav-thumb-active-border-width
* gallery-nav-thumb-active-border-color
* gallery-nav-thumb-border-radius
* gallery-nav-thumb-array-color
* gallery-nav-thumb-array-background-color
* gallery-nav-thumb-marker-border-color
* gallery-nav-thumb-marker-background
* gallery-nav-array-width
* gallery-nav-array-color
* gallery-nav-array-background-color
* gallery-product-zoom-circle-width
* gallery-product-zoom-background-color
* gallery-product-zoom-color
* gallery-play-icon-circle-width-large
* gallery-play-icon-circle-width-small
* gallery-play-icon-color
* gallery-play-icon-background-color
* gallery-fullpage-icon-width
* gallery-fullpage-icon-height
* gallery-fullpage-icon-hover-background-color
* gallery-fullpage-icon-color

#### Loader

File to update : app/design/frontend/Soon/jade/web/scss/common/_loader.scss

Availabled variables to configure modals design :

* loader-bg-color
* loader-bg-opacity

#### Mini cart

File to update : app/design/frontend/Soon/jade/web/scss/layout/header/_minicart.scss

Availabled variables to configure modals design :

* minicart-width
* minicart-min-height
* minicart-padding
* minicart-items-full-width
* minicart-items-delimiter
* minicart-debug-mode

#### Modals

File to update : app/design/frontend/<Vendor>/<theme>/web/scss/common/_modals.scss

Availabled variables to configure modals design :

* modal-background-overlay
* modal-radius
* modal-width
* modal-padding
* modal-background

#### Pager

File to update : app/design/frontend/Soon/jade/web/scss/common/_pager.scss

Availabled variables to configure pager design :

* pager-item-padding
* pager-items-space
* pager-current-bg-color
* pager-items-bg-color
* pager-actions-bg-color

#### Progress bar

File to update : app/design/frontend/Soon/jade/web/scss/modules/checkout/_progress-bar.scss

Availabled variables to configure progress bar design :

* checkout-progress-bar-max-width
* checkout-progress-bar-margin
* checkout-progress-bar-icon-size
* checkout-progress-bar-circle-size
* checkout-progress-bar-circle-border
* checkout-progress-bar-circle-bg
* checkout-progress-bar-circle-active
* checkout-progress-bar-line-width
* checkout-progress-bar-line-color

#### Toolbar

File to update : app/design/frontend/<Vendor>/<theme>/web/scss/catalog/_toolbar.scss

Availabled variables to configure toolbar design :

* toolbar-mode-icon-color
* toolbar-mode-bg-color
* toolbar-mode-active-bg-color