Magento-Bootstrap responsive theme

Magento-Bootstrap theme it is package fully based on Twitter Bootstrap 3 framework.

Status:

Current version: Beta

Assets

Bootstrap v3.2.0
HTML5 support
Microdata support (schema.org)

How to install

Open our wiki and read How to install theme via modman? please.

How to use

Really it is very-very easy to use :)

Develop process as usual for Magento theme (more about front-end develop for Magento you can see on Designer's Guide To Magento)

Create your theme based on Magento-Bootstrap theme

You need create custom theme based on Magento-Bootstrap theme. After git clone command you will have next folder hierarchy:

.
├── app
│   └── design
│       └── frontend
│           └── mbootstrap
│               ├── default
│               ├── advanced    -- example theme with LESS compile
│               └── simple      -- example theme with http://getbootstrap.com/customize css file
├── skin
│   └── frontend
│       └── mbootstrap
│           ├── default
│           ├── advanced
│           └── simple

So you need create new theme in mbootstrap package

Example

.
├── app
│   └── design
│       └── frontend
│           └── mbootstrap
│               ├── default
│               └── custom-theme    -- your Custom theme templates files folder
├── skin
│   └── frontend
│       └── mbootstrap
│           ├── default
│           └── custom-theme        -- your Custom theme css/images files

That's it! Now you can develop your custom theme based on Magento-Bootstrap theme

(i) don`t forget enter your just created theme name (in example it is custom-theme) at Admin Panel (System -> Configuration -> General -> Design tab -> Themes section -> Default field)

Skin folder structure description

Open magento/skin/frontend/mbootstrap/default path

.
├── bootstrap             -- Bootstrap framework source files
├── css                   -- Theme css files compile there
├── images
├── js
├── Gruntfile.js          -- Script file with *compile* less to css, minify css files and uglify js files, *watch* file system changes commands. Use `$ grunt` to compile or `$ grunt watch` to watch files for changes
├── less                  -- Theme less files
└── package.json

Developer tools

Magento-Bootstrap theme contains also developers tools. You can use Grunt to compile files.

For more information go to magento/skin/frontend/mbootstrap/default/ folder and read Gruntfile.js file

Requirements

Node.js -- Open http://nodejs.org and install latest Node.js version
Bootstrap framework install -- Open magento/skin/frontend/default/mbootstrap and run $ npm install command in terminal
modman (Module Manager) -- Open https://github.com/colinmollenhour/modman and install it

laurnts/mbootstrap