Setup Magento Frontend Development Environment In Minutes Through Boilerplate

10th May 2016 0
cbadmin Lead- Technology team
Reach him

As Magento developers, we know that setting up Magento theme based on our requirements from default Magento will take at least 5 – 10 hours, and making it responsive and compatible is a challenging task. Moreover, we need to repeat this process for each and every project.
Here, we have a solution which is the Magento Boilerplate.

What is Magento Boilerplate?

Boilerplate is a starter theme of Magento. In this starter theme, we have different variants of front-end frameworks like Twitter Bootstrap and Zurb Foundation.

As of now, we will explain you by choosing twitter bootstrap as the powered starter theme. Twitter bootstrap is one of the best responsive front-end web frameworks developed by twitter. In-built grid system gives the responsive power to Magento, and it is also compatible with all the browsers.

Developing Theme In Magento Boilerplate

Developing in our boilerplate theme is rather easy. There are basically two ways you can start the development of the theme:

  1. Copy or rename the boilerplate theme and start editing it.
  2. Build a new “child” theme under the boilerplate package and only edit the things you need to edit.

1. Copy or Rename the Boilerplate Theme

To begin, download Magento & Boilerplate Files.

  1. Download Magento from http://www.magentocommerce.com/download.
  2. Download Magento Boilerplate of Webcomm from https://github.com/webcomm/magento-boilerplate/archive/master.zip.

You should either copy boilerplate theme or rename boilerplate theme to something useful by doing:

cp -Rf app/design/frontend/boilerplate app/design/frontend/mytheme
cp -Rf skin/frontend/boilerplate skin/frontend/mytheme

Once you’ve copied or renamed the theme, you will need to add it to the bottom of the .gitignore file:

!/app/design/frontend/mytheme
!/skin/frontend/mytheme

Magento Boilerplate Bootstrap

2. Build a New “Child” Theme Under The Boilerplate Package

To begin, you should create a new folder with your new theme name (e.g. mytheme) under

app/design/frontend/boilerplate/mytheme and skin/frontend/boilerplate/mytheme.

From here, you’ll want to install the site and enable the theme through Magento’s design configuration. Firstly, install your site like any other Magento installation. There are plenty of guides out there on that. Then, visit

System > Configuration > Design and change the package from default to boilerplate.

 Additionally, change the translations, templates, skin, layout and default to your theme name (such as mytheme).

Magento Boilerplate Bootstrap

And this is done, now you are ready to start your development in Magento.

Magento 2 Boilerplate

Magento 2 is the latest version of Magento. Magento 2 comes with Improved UI and lot of inbuilt UI Components. Compared to Magento 1.x, Magento 2 is heavy and one needs to use composer for development.


Subscribe to our newsletter for updates on Magento 2 Boilerplate.


 

Shares

cbadmin – Lead- Technology team

Ravin has in-depth understanding of all the digital marketing channels from search engine optimization to social media optimization. Through his conversion marketing strategies, Ravin has helped various online enterprises boost their profits.



SUBSCRIBE
Shares