In Part II of our DIY Responsive Design series, we’re going to show you how to use Bootstrap’s CSS grid to create responsive store templates. Bootstrap is a popular HTML, CSS and Javascript framework for developing responsive sites, and is an perfect place to start creating your pages for multiple devices.
Responsive store templates all have the Bootstrap CSS grid included in their style sheets. The Bootstrap website has helpful information about how the library’s responsive grid works and plenty of examples on how to use it.
To simplify, the Bootstrap grid breaks websites into a collection of twelve column rows. Bootstrap rows define a group of page elements that appear side by side on the page together. Bootstrap column classes describe how many columns per row an element takes up on specific screen sizes.
From there, it becomes a matter of understanding the Bootstrap column class names. These contain three parts. First “col” identifies the name as one of the column classes. Second the “xs”, “sm”, “md” and “lg” describe browser window sizes that the class responds to.
- xs = cellphone screens
- sm = tablet screens
- md = larger tablet screens and smaller laptop monitors typically 11 inch to 13 inch screens
- lg = 15 inch and up screens.
Building Your Page
There is a lot that goes into building a well structured page that holds together across browsers, and the following tips and tricks are meant to help you create responsive layouts with as few issues as possible.Use the Code Editor
For the best results in creating responsive pages using the Volusion platform, we encourage you to use the code editor as opposed to the visual editor. Using the code editor will ensure that no unnecessary styles or elements are added to your page while you are working on it. You can turn on the code editor in the Volusion platform by clicking the </> on the editing box tool bar.Do not copy and paste content from a rich text environment into the editor. Rich text environments, such as Microsoft Word or Adobe InDesign, are tools that allow you edit the presentation of text and page layouts. Copying text from a rich text environment such as these may include formatting information that could cause issues.
It is encouraged that you use a text editor such as Atom or Sublime Text to write your HTML and CSS when creating pages. These text editors offer syntax highlighting and a collection of plugins to help you as write your code.
Utilize the Bootstrap Breakpoints
As discussed earlier, the contents of responsive templates are included in the Bootstrap responsive grid. The contents of your template are wrapped using the Bootstrap container class. The container class sets widths to the page contents ensuring everything fits within the screens of various devices.We recommend using CSS media query rules that align with Bootstrap when creating your article pages. Aligning your styles to adjust when the Bootstrap grid adjusts will help your pages respond better to a variety of screen sizes.
Bootstrap defines four break points that represent phone, tablet, laptop and desktop screen sizes.
- Phones: Screen sizes less than 768px wide
- Tablets: Screen sizes greater than 768px wide but less than 992px wide
- Laptops: Screen sizes greater than 992px wide but less than 1200px wide
- Desktop Monitors: Screen sizes greater than 1200px wide
@media only screen and (max-width: 768px) {
/* Your CSS Rules Here */
.myArticleWrapper p {
font-size: 18px;
}
}
Pro Tip: When working with media queries, write universal CSS rules for styles that do not need to respond to various devices and screen sizes, and only use media query rules to change styles that need to respond to devices and screen sizes.
Keep Structure Separate from Presentation
It is highly encouraged to use the Bootstrap grid when building content for your responsive template. This said, the Bootstrap grid works best if the width, margins and paddings set on the various grid elements are not changed. This means that you should create elements that either wrap around the Bootstrap grid elements or are inside the grid elements that have their own width, margin, padding or border settings.A common element structure to follow could be:
<div class="myArticleWrapper">
<div class="row">
<div class="col-sm-6 col-md-3">
<div class="myArticleContent">...</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="myArticleContent">...</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="myArticleContent">...</div>
</div>
<div class="col-sm-6 col-md-3">
<div class="myArticleContent">...</div>
</div>
</div>
</div>
Note the div classes myArticleWrapper and myArticleContent. Use these elements to add CSS borders, backgrounds, apply additional margins and padding or other such structural styles. Do not use the elements with the Bootstrap classes (i.e. .row or .col-sm-6.col-md-3). The reason behind this is due to how web browsers render pages using the Box Model. Changing the margins, padding or widths of Bootstrap elements will affect how this library uses the Box Model to create responsive page.
That wraps up the Bootstrap portion of our DIY Responsive Design Guide. In the next and final post, we'll share general best practices for HTML and CSS.
Interested in having our team design a responsive template or page for your business? Check out our custom design services and premium templates!