Magento-Bootstrap theme it is package fully based on Twitter Bootstrap 3 framework.
- Bootstrap (SASS latest official version)
- HTML5 support
- Microdata support (schema.org)
- Composer installer
- Gulp js/css builder
- 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
$ 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
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": "git@github.com: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 git@github.com: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": "a.filippovich@mavenecommerce.com",
"role": "Developer"
}
],
"repositories": {
"firegento": {
"type": "composer",
"url": "http://packages.firegento.com"
},
"mbootstrap": {
"type": "vcs",
"url": "git@github.com: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.
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 :)
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
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.