css_quick_guide_mode.md

layout	group	subgroup	title	menu_title	menu_order	github_link
default	fedg	D_CSS_G	Client-side compilation vs server-side	Client-side compilation vs server-side	2	frontend-dev-guide/css-guide/css_quick_guide_mode.md

Overview

One of the pre-steps you need to take before starting to change your theme styles is deciding, which LESS compilation mode you will use. There are two modes available in Magento: server-side compilation mode (the default one, recommended for production) and client-side (recommended for theme development). This topic demonstrates on a practical example how the choice of the mode influences the styles development.

The first step, creating and applying a theme is done before the compilation mode is chosen, so it is described only once, but is required whatever compilation mode you will further use.

For making changes in theme styles when illustrating the different modes, the simplest approach is used: changes are done in the _extend.less of the new theme. Learn more about possible approaches in Simple ways to customize a theme's styles.

First step: Create and apply a theme

1. Create a new theme as described in the Create a theme topic. In your theme.xml specify Magento Luma or Magento Blank as a parent theme.
2. Apply your theme in the Magento Admin.

Server-side is the default mode for LESS compilation, so if you do not change this, your Magento instance is using server-side compilation mode.

Making simple style changes in Server-side compilation

The following is an illustration of how the process of making simple changes looks like with the server-side mode:

1. Create and apply a theme.
2. In your theme directory, add web/css/source/_extend.less.
3. Change the color of the buttons by adding the following code in _extend.less:

   code from Bogdan goes here

4. Delete all files in the following directories: - pub/static/frontend/<Your_Vendor>/<your_theme> - var/view_preprocessed/less
5. Refresh the page, and view the changes applied.

   screenshot from Bogdan goes here

6. Change the font of the buttons by adding the following code in _extend.less:

   code from Bogdan goes here

7. Delete all files in the following directories: - pub/static/frontend/<Your_Vendor>/<your_theme> - var/view_preprocessed/less
8. Refresh the page, and view the changes applied.

   code from Bogdan goes here

If your Magento instance uses the server-side compilation mode, you need to manually clean sub-directories in pub/static and var/view_preprocessed/less to make your changes apply. You can automate this process by additionally installing Grunt, and using the built-in Grunt commands to watch the changes and clean the directories. The flow of making changes using Grunt is described in the following section.

Making simple style changes in server-side compilation mode using Grunt

1. Create and apply a theme.
2. In your theme directory, add web/css/source/_extend.less.
3. Install Grunt as described in Installing and configuring Grunt, steps 1-4.
4. Register your theme in Grunt as described in Installing and configuring Grunt, step 5.
5. Run grunt refresh from your Magento installation directory.
6. Run grunt watch from your Magento installation directory.
7. Change the color of the buttons by adding the following code in _extend.less:

   code from Bogdan goes here

8. Refresh the page and view your changes applied:

   screenshot from Bogdan goes here

9. Change the font of the buttons by adding the following code in _extend.less:

   code from Bogdan goes here

10. Refresh the page and view your changes applied:

    screenshot from Bogdan goes here

Making simple style changes in client-side compilation mode

1. Create and apply a theme.
2. In your theme directory, add web/css/source/_extend.less.
3. Change the LESS compilation mode to client-side under Stores > Configuration > ADVANCED > Developer > Front-end development workflow > Workflow type. For detailed description see the CSS preprocessing topic.
4. Delete all files in the following directories: - pub/static/frontend/<Your_Vendor>/<your_theme> - var/view_preprocessed/less
5. Change the color of the buttons by adding the following code in _extend.less:

   code from Bogdan goes here

6. Refresh the page and view your changes applied:

   screenshot from Bogdan goes here

7. Change the font of the buttons by adding the following code in _extend.less:

   code from Bogdan goes here

8. Refresh the page and view your changes applied:

   screenshot from Bogdan goes here

If your Magento instance uses the client-side compilation mode, simple changes are applied at once. In case of more sophisticated changes, you might need to manually clean the theme sub-directory in the pub/static/frontend directory. There are more details about these types of changes and about the client-side mode implementation in the Styles debugging topic.

Recommended reading

- Styles debugging - CSS preprocessing