In this video, I’m going to walk through how to install a framework. To demo this, we’re going to use the free bootstrap responsive Developer Framework. This is a free framework anyone can download and use as a starting point for your store. It is based off the popular framework, Bootstrap, made by Twitter. When installed in your store, it will turn your store into a very basic, but responsive website that you can customize. Let’s download this and see how to install it.
When we open up the zip file, we’ll see a few things. The first is a pdf of instructions on how to install it, the change log, this Miva_bootstrap.pkg and a skincust.mvc module which is a skin customization module. Now the actual framework itself is this file. This pkg file is your framework. This one file gets uploaded and it contains all the pages needed to overwrite the existing pages.
So now that I have my framework file, let’s go upload it in the Miva Merchant Admin. The first thing we want to do is navigate to User Interface and then the Frameworks tab. This button here is used to upload a framework. So I’m going to select my pkg file here and hit open. Perfect, now the framework’s been uploaded, but it hasn’t been applied yet. So this list shows me all of the frameworks I have available to use. I have the default CSSUI framework that we talked about. The the new Miva Bootstrap framework. You can see the information about each one and you can see a little thumbnail of what it’s going to look like.
To apply this framework I open up its settings.Here, it gives us more information about the framework, all the pages and components that are a part of it. Here you’ll see that this includes quite a bit of css files which I want to overwrite and quite a bit of images. These images are images that make up the framework. Here I have javascript, as well as web fonts that are a part of this framework. Once I have these selected I can simply hit “Apply Framework” and it will give me one last warning message saying, “are you sure you want to do this?” It’s going to overwrite all my existing page templates. I’ll say yes. What it’s doing right now is going through all of the page templates and updating it with the page templates contained in my framework. Perfect. Now we have the bootstrap framework selected.
Let’s open up the front end and see what the web site looks like. So you see, our default CSSUI framework that we were working with earlier has been updated to this new framework. Every page template has been modified to support the bootstrap template code. This framework gives me a great starting foundation to build my site based off of. I can update the CSS and the images to completely change the look and feel. But at it’s core, I get all the responsiveness free because it’s all part of the framework.
So if I grab this web page and squeeze it down, you’ll see how at certain breakpoints the web site changes and molds itself to fit the size of the screen. Let’s jump back to the admin. Now there’s no limit to the amount of frameworks you can have uploaded here. However, it’s important to note that what framework you intend to use when starting off with a new store. You wouldn’t want to take an existing store that has a bunch of customizations to it and apply a framework. Because what this would do is overwrite every page template from the store so you would lose all those customizations you had, including any item tags that were referenced within the page template.
Frameworks are an incredibly powerful tool in Miva Merchant and as a Developer, once you start using them as a foundation for your site builds you can easily shave off 30-40% of the overall build time by starting with a well planned and well thought out framework.