-
Notifications
You must be signed in to change notification settings - Fork 63
Viewsets and Bootstrap
In order to make current and future customization easier and more orderly, Web Store uses the concept of viewsets. Simply put, a Viewset refers to the complete collection (set) of master view layer files upon which themes are based. There are two viewsets currently available, cities and cities2.
The viewsets are located under the protected folder, and are named views-cities and views-cities2. Viewset folders will always be named using "views-" followed by the name. Names should be all lower case with no spaces. Admin Panel looks for this pattern when displaying available viewsets to the user, and Admin Panel will point to the correct folder automatically for whatever viewset the user has chosen.
##Twitter Bootstrap The views have been designed using Twitter Bootstrap layout, a set of files which makes design easier. Cities currently utilizes version 2 while Cities2 uses the new version 3. Bootstrap has been included as part of a Yii extension, so the files are always loaded. This is why you do not find the links to the files in the HTML Header document. Yii adds them as part of the display process.
The most used portion of Bootstrap in Web Store is the grid system for layout. The grid system divides up the page into 12 columns, and your view files use <div class> statements to specify width. It is high recommended you read up on columns (version 2, version 3) since they will assist greatly in layout.
One advantage of using the grid system is proper collapsing on smaller screen sizes. For example, a page with hardcoded widths may display incorrectly on an iPad or iPhone, or force the user to zoom in and out and scroll to view the content. Proper use of a grid means that the screen will resize automatically and look correct on each platform. The Brooklyn theme on a desktop will also show on an iPad, and you will even see scaling differences between iPad landscape and portrait mode as you turn the device. It will always present correctly.) Any modifications to themes should not break this functionality, and your templates should operate correctly on both platforms. (Submissions to the template gallery will be tested for this functionality.) iPhone display is particularly challenging so we are generally more forgiving of "perfection" when displaying on an iPhone. However, the template should still be usable to navigate products and perform a checkout.
Because Bootstrap is always installed, you can use anything available in the package. There is also default css loaded by Web Store that we have used for buttons in lieu of Bootstrap buttons. You are free to use either.