PHPackages                             webcomm/magento-boilerplate - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. webcomm/magento-boilerplate

AbandonedMagento-module

webcomm/magento-boilerplate
===========================

HTML5 Twitter Bootstrap 3.1 Magento Boilerplate Template

3.0.31(7y ago)52616.6k183[16 issues](https://github.com/webcomm/magento-boilerplate/issues)[5 PRs](https://github.com/webcomm/magento-boilerplate/pulls)MITCSS

Since May 31Pushed 7y ago66 watchersCompare

[ Source](https://github.com/webcomm/magento-boilerplate)[ Packagist](https://packagist.org/packages/webcomm/magento-boilerplate)[ RSS](/packages/webcomm-magento-boilerplate/feed)WikiDiscussions 2.0 Synced 2mo ago

READMEChangelogDependenciesVersions (24)Used By (0)

Magento Boilerplate
===================

[](#magento-boilerplate)

### A HTML5 Twitter Bootstrap 3.1 Magento 1.8 Boilerplate Template

[](#a-html5-twitter-bootstrap-31-magento18-boilerplate-template)

Read the [blog post](http://www.webcomm.com.au/blog/2013/09/introducing-magento-boilerplate-a-twitter-bootstrap-3-powered-html5-mobile-first-starter-theme) or checkout the [demo](http://magentoboilerplate.webcomm.com.au) for more information.

---

Installation
------------

[](#installation)

There are three ways to install this boilerplate. [Composer](http://getcomposer.org) is by far the easiest to maintain.

### Composer

[](#composer)

> A prerequisite for using this method is that you have Composer [installed](http://getcomposer.org/doc/00-intro.md#installation-nix) in your system.

Begin by creating a `composer.json` in the root of Magento, and ensure it has the following:

```
{
    "repositories": [
        {
           "type": "vcs",
           "url": "https://github.com/magento-hackathon/magento-composer-installer"
        }
    ],
    "require": {
        "magento-hackathon/magento-composer-installer": "*",
        "webcomm/magento-boilerplate": "2.0.x-dev"
    },
    "extra": {
        "magento-root-dir": "./",
        "magento-deploystrategy": "copy"
    },
    "config": {
        "preferred-install": "dist"
    }
}
```

Finish by installing Composer dependencies and a couple of optional enhancements:

```
cd your-project/
composer install

# If you wish to autoload composer files
cp vendor/webcomm/magento-boilerplate/index.php .

# If you wish to automatically set *.dev domains to developer mode
cp vendor/webcomm/magento-boilerplate/.htaccess .

# If you wish to run your own theme, replace "mytheme" with the name of your theme
cp -Rf vendor/webcomm/magento-boilerplate/app/design/frontend/boilerplate app/design/frontend/mytheme
cp -Rf vendor/webcomm/magento-boilerplate/skin/frontend/boilerplate skin/frontend/mytheme
```

> Now you should have a new folder `vendor/webcomm/magento-boilerplate` with our repository and new symbolic links in Magento. You can update to each new version with `composer update`.

### Git

[](#git)

Firstly, clone our repo down to a folder:

```
git clone git@github.com:webcomm/magento-boilerplate.git your-project
```

Secondly, copy in a supported Magento version over the top of the reop:

```
wget http://www.magentocommerce.com/downloads/assets/1.8.1.0/magento-1.8.1.0.tar.gz
tar -zxvf magento-1.8.1.0.tar.gz
mv -f magento/* your-project/
```

> You may update to each new version with `git pull`.

### ZIP downloads

[](#zip-downloads)

1. Download Magento from .
2. Download our repo from .

Merge the folders, and you're good to go.

---

Developing
----------

[](#developing)

Developing in our boilerplate theme is rather easy. There are basically two general possibilities:

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.

The second approach has the advantage that updating the boilerplate theme is quite easy. You would just replace the files under `boilerplate/default` with the new ones and check if you need to copy some changes to the files you edited. Updating the theme with the first approach is a nightmare. The advantage of the first approach is that you can still build custom child themes like `mytheme/xmas`. Anyway, this is also still possible with the second approach by using [Aoe\_DesignFallback](https://github.com/fbrnc/Aoe_DesignFallback).

### Copy / Rename the Boilerplate Theme

[](#copy--rename-the-boilerplate-theme)

To begin, you should either copy our theme or rename our 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
```

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's plenty of guides out there on that. Then, visit `System > Configuration > Design > Package` and change the package from `default` to whatever you named your theme (such as `mytheme`).

### Build a New "Child" Theme under the `boilerplate` Package

[](#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's 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 whatever you named your theme (such as `mytheme`).

---

The process we like to stick with when developing is have our dependencies managed for us, and use a task runner to compile them into CSS / JavaScript files which are served to the user. You don't have to do this, however it's a great way to save time down the track, even if there's a bit of a learning curve to begin with.

### Asset Dependency Management and Automatic Compilation

[](#asset-dependency-management-and-automatic-compilation)

The first thing to do this is install [Bower](http://bower.io) and [gulp.js](http://gulpjs.com) (both are NodeJS applications).

To install Bower dependencies (not included in the theme becuase they're simply not required for everybody), you'll need to use Bower.

```
cd skin/frontend/mytheme/default
bower install
```

Once you have gulp.js installed globally, open up your terminal and change directory into your theme and execute `gulp`:

```
cd skin/frontend/mytheme/default
npm install
gulp
```

That's it. From now on, your changes you make to LESS files will automatically compile into CSS, and the same with JavaScript. Refresh your page to see changes!

### Adding New Bootstrap Components

[](#adding-new-bootstrap-components)

This theme does not ship with all Bootstrap CSS and JavaScript. The reason is, most sites don't **need** all the components and therefore you're bloating a site by providing more than required. We're including only the files required to get this boilerplate theme running.

To add new Bootstrap styles, simply open up `less/style.less`. From there, you may directly import Bootstrap files, or your own files which in turn import Bootstrap's. For example, add the following into `less/style.less`:

```
@import "media.less"; /* Relative to less/style.less */
```

Then, in `less/media.less`:

```
/* In less/media.less */
@import "../bower_components/bootstrap/less/media.less"; /* Relative to less/media.less */

.media {
    /* Your custom overrides go below the call to Bootstrap's styles */
}
```

> You may choose to import more than just Bootstrap's LESS / CSS files. Feel free to import anything this way, it's good practice.

To add new JavaScript files, open up `gulpfile.js`. gulp.js is seperated into a number of tasks. One of them is the `js` task. Inside it, you'll see a bunch of JavaScript files listed out. If you require more Bootstrap files (or indeed any JavaScript files), simply add them to the list.

```
// ...
.src([
    'bower_components/jquery/jquery.js',
    'bower_components/bootstrap/js/transition.js',
    'bower_components/bootstrap/js/collapse.js',
    'bower_components/bootstrap/js/carousel.js',
    'bower_components/bootstrap/js/dropdown.js',
    'bower_components/bootstrap/js/modal.js',
    // Add new files here
    'js/script.js'
])
// ...
```

### FAQs

[](#faqs)

1. **Notify isn't working?** - check you are not running `gulp` on a headless (command-line only) server, such as a remote webserver or Vagrant box. Windows may need [modification](https://github.com/webcomm/magento-boilerplate/issues/48) of your `gulpfile.js` and `package.json` files to work properly.

### Manual Development (No gulp.js)

[](#manual-development-no-gulpjs)

Feel free to edit any of the files under `dist/css` and `dist/js` if you'd like to manually develop your site. There's no harm in doing this, if you don't want to use gulp.js in the future. Keep in mind that, if you decide to compile with gulp.js that you will lose your manual changes.

---

Contributing
------------

[](#contributing)

The git repo for this project can be found at , and a demo can be found at .

We feel that we've done a pretty decent job at creating a great starter theme for developing up a Magento site. We chose Twitter Bootstrap 3 not because we want all sites to look like Bootstrap, we hate that too. Bootstrap creates a great foundation of reusable components which you can use to create something truly unique.

The reason Boilerplate themes exist is so you can spend less time on getting ready to start productive work by removing the repetitive first steps. We've taken care of the boring, so you may focus on the unique.

If you like our work, we're not after your money, but rather, we'd love to see a [pull request](http://github.com/webcomm/magento-boilerplate/pulls), or even an [issue](http://github.com/webcomm/magento-boilerplate/issues), on your vision for how this can be improved! At the end of the day, if we can all create something truly useful to a lot of people, everybody wins and we can all go home earlier.

###  Health Score

45

—

FairBetter than 92% of packages

Maintenance19

Infrequent updates — may be unmaintained

Popularity44

Moderate usage in the ecosystem

Community35

Small or concentrated contributor base

Maturity73

Established project with proven stability

 Bus Factor1

Top contributor holds 87.6% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~51 days

Recently: every ~199 days

Total

23

Last Release

2868d ago

Major Versions

2.0.x-dev → 3.0.242016-03-30

### Community

Maintainers

![](https://www.gravatar.com/avatar/08df4710c7aedc35058100d8221005e8ad6cc2b03ab2814397f515e38a15fd30?d=identicon)[ben](/maintainers/ben)

![](https://www.gravatar.com/avatar/f5798bc4e500d60e245d0ee93fae24d5943e7dbf93a0a48938ff81ee8e848bd4?d=identicon)[webcomm](/maintainers/webcomm)

---

Top Contributors

[![bencorlett](https://avatars.githubusercontent.com/u/181919?v=4)](https://github.com/bencorlett "bencorlett (240 commits)")[![JumpLink](https://avatars.githubusercontent.com/u/1073989?v=4)](https://github.com/JumpLink "JumpLink (8 commits)")[![sprankhub](https://avatars.githubusercontent.com/u/930199?v=4)](https://github.com/sprankhub "sprankhub (3 commits)")[![ottonet](https://avatars.githubusercontent.com/u/6705804?v=4)](https://github.com/ottonet "ottonet (3 commits)")[![chmoelders](https://avatars.githubusercontent.com/u/3242889?v=4)](https://github.com/chmoelders "chmoelders (2 commits)")[![cscd98](https://avatars.githubusercontent.com/u/1188869?v=4)](https://github.com/cscd98 "cscd98 (1 commits)")[![DevertNet](https://avatars.githubusercontent.com/u/1684349?v=4)](https://github.com/DevertNet "DevertNet (1 commits)")[![dfrankland](https://avatars.githubusercontent.com/u/2488926?v=4)](https://github.com/dfrankland "dfrankland (1 commits)")[![drmjo](https://avatars.githubusercontent.com/u/1946791?v=4)](https://github.com/drmjo "drmjo (1 commits)")[![gnowland](https://avatars.githubusercontent.com/u/4430119?v=4)](https://github.com/gnowland "gnowland (1 commits)")[![jasonpapertraitors](https://avatars.githubusercontent.com/u/20212768?v=4)](https://github.com/jasonpapertraitors "jasonpapertraitors (1 commits)")[![barryvdh](https://avatars.githubusercontent.com/u/973269?v=4)](https://github.com/barryvdh "barryvdh (1 commits)")[![JustMaier](https://avatars.githubusercontent.com/u/607609?v=4)](https://github.com/JustMaier "JustMaier (1 commits)")[![matthewdolman](https://avatars.githubusercontent.com/u/6881201?v=4)](https://github.com/matthewdolman "matthewdolman (1 commits)")[![mklooss](https://avatars.githubusercontent.com/u/710748?v=4)](https://github.com/mklooss "mklooss (1 commits)")[![Mojo1](https://avatars.githubusercontent.com/u/959868?v=4)](https://github.com/Mojo1 "Mojo1 (1 commits)")[![ajnetterfield](https://avatars.githubusercontent.com/u/7559529?v=4)](https://github.com/ajnetterfield "ajnetterfield (1 commits)")[![rehoehle](https://avatars.githubusercontent.com/u/223007?v=4)](https://github.com/rehoehle "rehoehle (1 commits)")[![renepenner](https://avatars.githubusercontent.com/u/98465?v=4)](https://github.com/renepenner "renepenner (1 commits)")[![rengaw83](https://avatars.githubusercontent.com/u/5131653?v=4)](https://github.com/rengaw83 "rengaw83 (1 commits)")

### Embed Badge

![Health badge](/badges/webcomm-magento-boilerplate/health.svg)

```
[![Health](https://phpackages.com/badges/webcomm-magento-boilerplate/health.svg)](https://phpackages.com/packages/webcomm-magento-boilerplate)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)