Brush | Theme styling for Magento 2 using built-in LESS UI library

An electron based desktop application to style Magento 2 theme, created using built-in LESS UI library variables.

Table of Contents

Objective
Download
How to Use
Features
Screenshot
Future Goals
Development

Objective

Brush makes Magento 2 theme styling easy by pulling all the built-in less variables in a single place (in the application). Using this, you can generate a theme.less file provided by Magento 2 to overwrite its default styling variables.

Download

Brush is compatible with Windows, Mac and Linux. Go to the Release tab and download the installer for the latest release.

How to Use

Follow these instructions to use Brush for theme styling:

1. Select Your Parent theme from LUMA or BLANK

   • Using Luma theme, you will get predefined values of variables filled in text boxes.
   • Using Blank theme, all values of variables will be blank.

2. Upload Mockup of your website in PNG or JPG format from "Upload Design" button to get color codes.

3. Enter value in textboxes as per your requirement. You can use px, em or any format.

4. ⚠️ Don't use semicolon at the end when entering any value as it will be added automatically.

5. Download theme.less file from "Download Theme file" button.

6. Make sure to place generated theme file under app/design/frontend/Vendor Name/Theme Name/web/css/source/ folder.

Features

• Color picker tool added to color variables.
• Selected color will be shown at the bottom.
• Paste previous selected color using paste button next to textbox.
• Can copy variables of selected tab using "Copy To clipboard" button.
• Info icon added for reference to get information about the usuage of the variable.

Screenshot

Future Goals

• Custom variables setion wil be added for styling.
• Theme package generation including basic Magento 2 theme files.
• Finding and copying of folders and files to theme root directory for every container.

Development

I aim to continuously evolve the application and add supplementing functionality and encourage all sorts of contributions that help us make this project more awesome. Contact me [email protected]

# clone the repository
git clone https://github.com/piyushwalia/Brush

# install dependencies
npm install

# run application
npm start