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.