Giter VIP home page Giter VIP logo

mbootstrap's Introduction

mavenecommerce

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

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

mbootstrap's People

Contributors

akorolyov avatar alexandrkorolev avatar klierik avatar leek avatar lykhouzov avatar rjocoleman avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.