Magento-Bootstrap responsive theme
Magento-Bootstrap theme it is package fully based on Twitter Bootstrap 3 framework.
Assets
- Bootstrap (SASS latest official version)
- HTML5 support
- Microdata support (schema.org)
- Composer installer
- Gulp js/css builder
Requirements
- Composer â Open https://getcomposer.org/doc/00-intro.md and install Composer to your system
- Node.js â Open http://nodejs.org and install latest Node.js version
- Gulp â Open http://gulpjs.com/ and install latest Gulp version
You can check if all of this installed by commands:
$ composer -V && node -v && gulp -v
Composer version 1.0-dev (d1a9cfbd634d3b9e3350a77189de9c6b20737111) 2015-07-02 09:36:31
v0.12.3
[16:35:34] CLI version 3.9.0
[16:35:34] Local version 3.9.0
Project_root/ folders hierarchy example:
$ tree -L 2
.
âââ composer.json -> composer.json file
âââ composer.lock
âââ magento -> Magento CMS folder
â  âââ LICENSE.html
â  âââ ...
â  âââ gulpconfig.js -> ../vendor/mavenecommerce/mbootstrap/gulpconfig.js
â  âââ gulpfile.js -> ../vendor/mavenecommerce/mbootstrap/gulpfile.js
â  âââ ...
â  âââ node_modules -> ../node_modules
â  âââ package.json -> ../vendor/mavenecommerce/mbootstrap/package.json
â  âââ ...
â  âââ var
âââ node_modules -> node_modules folder
âââ vendor -> installed composer modules
How to install
Step 1. Install theme as Composer module
Create (or edit) composer.json
file in your project folder, near magento/
folder. You need add next lines to your composer.json:
"repositories": {
"firegento": {
"type": "composer",
"url": "http://packages.firegento.com"
},
"mbootstrap": {
"type": "vcs",
"url": "[email protected]:mavenecommerce/mbootstrap.git"
}
},
"require": {
"magento-hackathon/magento-composer-installer": "*",
"mavenecommerce/mbootstrap": "dev-master"
},
"extra": {
"magento-root-dir": "magento"
}
You need add repository
, require
and path to your magento folder extra.magento-root-dir
.
Or do it via commad line interface:
$ composer config repositories.firegento composer http://packages.firegento.com
$ composer config repositories.mbootstrap vcs [email protected]:mavenecommerce/mbootstrap.git
$ composer require magento-hackathon/magento-composer-installer:*
$ composer require mavenecommerce/mbootstrap:dev-master
So you will get something like that:
{
"name": "mavenecommerce/mbootstrap-example",
"description": "Mavenecommerce MBootstrap Theme Example",
"minimum-stability": "stable",
"license": "proprietary",
"authors": [
{
"name": "Oleksii Filippovych",
"email": "[email protected]",
"role": "Developer"
}
],
"repositories": {
"firegento": {
"type": "composer",
"url": "http://packages.firegento.com"
},
"mbootstrap": {
"type": "vcs",
"url": "[email protected]:mavenecommerce/mbootstrap.git"
}
},
"require": {
"magento-hackathon/magento-composer-installer": "*",
"mavenecommerce/mbootstrap": "dev-master"
},
"extra": {
"magento-root-dir": "magento"
}
}
If you don't use command line and just edit composer.json
than run $ composer install
(if you run it in first time) or $ composer update --no-plugins
for update your dependies.
Step 2.1 Prepare Gulp build environment
Go to your project folder and create project_folder/node_modules/
folder. You get:
.
âââ composer.json
âââ composer.lock
âââ magento â Magento folder
âââ node_modules - npm node_modules/ folder
âââ vendor - Composer modules
Then open magento/
folder and create symlink for node_modules/
folder by command
$ ln -s ../node_modules node_modules
If you are Windows user sorry but i don`t know how to help you with that :(
It is need for Gulp builder.
After that just run $ npm install
in your magento/
folder to install Gulp dependies. All Gulp dependies should be instaled to project_folder/node_modules/
folder, example:
.
âââ composer.json
âââ composer.lock
âââ magento
â  âââ ...
â  âââ gulpconfig.js -> ../vendor/mavenecommerce/mbootstrap/gulpconfig.js
â  âââ gulpfile.js -> ../vendor/mavenecommerce/mbootstrap/gulpfile.js
â  âââ ...
â  âââ node_modules -> ../node_modules
â  âââ package.json -> ../vendor/mavenecommerce/mbootstrap/package.json
â  âââ ...
âââ node_modules
â  âââ del
â  âââ gulp
â  âââ gulp-autoprefixer
â  âââ gulp-bless
â  âââ gulp-cache
â  âââ gulp-concat
â  âââ gulp-imagemin
â  âââ gulp-load-plugins
â  âââ gulp-minify-css
â  âââ gulp-rename
â  âââ gulp-sass
â  âââ gulp-sourcemaps
â  âââ gulp-uglify
â  âââ vinyl-paths
âââ vendor
note: if you know how to make it easier share with us please :)
Step 2.2 Build MBootstrap theme resources (JS/CSS)
Go to project_folder/magento/
and run $ gulp
:
$ gulp
[15:28:37] Using gulpfile /path_to_project_folder/vendor/mavenecommerce/mbootstrap/gulpfile.js
[15:28:37] Starting 'build-base-scripts'...
[15:28:38] Finished 'build-base-scripts' after 348 ms
[15:28:38] Starting 'build-base'...
[15:28:38] Finished 'build-base' after 17 Ξs
[15:28:38] Starting 'build-mbootstrap-scripts'...
[15:28:38] Finished 'build-mbootstrap-scripts' after 13 ms
[15:28:38] Starting 'build-mbootstrap-styles-clean'...
[15:28:38] Finished 'build-mbootstrap-styles-clean' after 1.36 ms
[15:28:38] Starting 'build-mbootstrap-styles'...
[15:28:39] Starting 'build-mbootstrap-images'...
[15:28:39] Finished 'build-mbootstrap-images' after 759 ms
[15:28:47] Finished 'build-mbootstrap-styles' after 9.31 s
[15:28:47] Starting 'build-mbootstrap-styles-ie9'...
[15:28:47] Finished 'build-mbootstrap-styles-ie9' after 129 ms
[15:28:47] Starting 'build-mbootstrap'...
[15:28:47] Finished 'build-mbootstrap' after 4.4 Ξs
[15:28:47] Starting 'build'...
[15:28:47] Finished 'build' after 2.82 Ξs
[15:28:47] Starting 'default'...
[15:28:47] Finished 'default' after 2.59 Ξs
This bulder will create JS/CSS theme files:
- JS: builder will generate scripts into
magento/js/build/
folder - CSS: builder will generate css-files into
magento/skin/frontend/mbootstrap/default/build/css/
folder
Step 3. Update Magento configuration
Go to Admin Panel -> System -> Configuration -> Developer
and open Template Settings Tab.
Set Allow Symlinks to Yes and Save.
Go to Admin Panel -> System -> Configuration -> Design
and open Package Tab.
Set Current Package Name with mbootstrap value and Save. Open Theme Tab and check Default option value â it should be empty or default value and Save.
PS: rebuild cache if enable via Admin Panel -> System -> Cache Management
. Select All and select Refresh or Disable action.