• Stars
    star
    100
  • Rank 340,703 (Top 7 %)
  • Language
    HTML
  • Created over 11 years ago
  • Updated over 7 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Magento theme fully based on bootstrap framework.

mavenecommerce

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

  1. Composer β€” Open https://getcomposer.org/doc/00-intro.md and install Composer to your system
  2. Node.js β€” Open http://nodejs.org and install latest Node.js version
  3. 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.