Responsive Design
Frow Container
A .frow-container wraps the main content of the page and prevents it from expanding to 100% width, and adds in responsive design breakpoints at 768px, 992px, and 1200px. In simplest terms, it just stops page from stretching too wide on large displays. It is optional, but encouraged.
<html>
<body>
<div class="frow-container">
...
</div>
</body>
</html>
Click below to actually toggle on/off the container for this page.
Important Note: It doesn't need to wrap everything. Place content that you DO want to be full-width outside of the .frow-container. For example, on this page the header comes before the container, allowing it to span 100% width.
Frow's Responsive Sizes
Frow uses four sizes as breakpoints on the grid. Each one is designed to cover a type of device, but there are crossovers.
XS - ( Screens 0px - 767px wide ) - Generally Phones / Small Tablets SM - ( Screens 768px - 991px wide ) - Generally Tablets MD - ( Screens 992px - 1199px wide ) - Generally Computers / Landscape Tablets LG - ( Screens 1200px+ wide ) - Generally Widescreen Computers
Customizable: Change where the breakpoints happen, or even add more with Sass variables.
Mobile Column Stacking
On XS and SM screens, the column's fractions automatically are treated as 1-1. These three columns will just stack on top of each other on mobile by default, no extra code needed. This prevents your content from becoming too squished on phones.
<div class="frow"> <div class="col-md-1-3"></div> // col-xs-1-1 and col-sm-1-1 are assumed <div class="col-md-1-3"></div> // col-xs-1-1 and col-sm-1-1 are assumed <div class="col-md-1-3"></div> // col-xs-1-1 and col-sm-1-1 are assumed </div>
// Shrink your browser window to see the columns stack as if they were 1-1 instead of 1-3
// Expand your browser window to see these seemingly 1-1 columns appear as 1-3
.col-md-1-3
.col-md-1-3
.col-md-1-3
Responsive Classes
Columns can be also given .col-sm and .col-xs fractions to overrule switching to 1-1 on mobile devices. For example, if you want three columns to remain three columns on mobile devices, just define the .col-xs and .col-md classes.
<div class="frow"> <div class="col-xs-1-3 col-sm-1-3 col-md-1-3"></div> <div class="col-xs-1-3 col-sm-1-3 col-md-1-3"></div> <div class="col-xs-1-3 col-sm-1-3 col-md-1-3"></div> </div>
// Shrink your browser window to see the columns remain columns
// Expand your browser window to see the columns remain columns
.col-xs-1-3 .col-sm-1-3 .col-md-1-3
.col-xs-1-3 .col-sm-1-3 .col-md-1-3
.col-xs-1-3 .col-sm-1-3 .col-md-1-3
The .col-* rules always extend upwards to the larger breakpoints, unless those are defined as well. Here we are only defining .col-sm-1-3. This rule will be inherited by .col-md and .col-lg since we don't define those, but not .col-xs because it is smaller than .col-sm.
<div class="frow"> <div class="col-sm-1-3"></div> <div class="col-sm-1-3"></div> <div class="col-sm-1-3"></div> </div>
// .col-sm-1-3 will also be 1-3 on everything larger, but .col-xs will be the default 1-1
.col-sm-1-3
.col-sm-1-3
.col-sm-1-3
You can get clever with your designs. Here, these four columns on desktops become two columns on mobile devices.
// Shrink your browser window to see the four quarters snap into two rows of halves
// Expand your browser window to see the two rows of halves snap into four quarters
.col-xs-1-2 .col-md-1-4
.col-xs-1-2 .col-md-1-4
.col-xs-1-2 .col-md-1-4
.col-xs-1-2 .col-md-1-4
Responsive Show or Hide
You can easily make whole divs, etc. appear or disappear based on the screen size. Adding .hidden-xs makes content disappear on phones, while .visible-md makes content only appear on medium sized displays.
// Shrink your browser window to see which responsive rules are active
// Shrink or expand your browser window to see which responsive rules are active
// Expand your browser window to see which responsive rules are active
.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
Here are four divs where two of them are told to just not appear on mobile devices.
<div class="frow"> <div class="col-md-1-4"></div> <div class="col-md-1-4"></div> <div class="col-md-1-4 hidden-xs hidden-sm"></div> <div class="col-md-1-4 hidden-xs hidden-sm"></div> </div>
// Shrink your browser window to see two divs disappear
// Expand your browser window to see two divs appear
.col-md-1-4
.col-md-1-4
Responsive Content Direction
Sometimes you want your content to switch direction depending on screen size. Any of the four "Flex-Direction" shortcuts can be set to appear as different orientations based on screen size. Just add a -[size] to the end of the class.
// This will reverse the column order on mobile devices <div class="frow direction-column-reverse-xs direction-column-reverse-sm"></div> // This will reverse the row order on large screens only <div class="frow direction-row-reverse-lg"></div>
A use case example of this would be, for example, if you had content in one column on the left, and an image on the right. Normally, when going mobile, they would stack left to right and have the image under the content. If the image being on top is preferred, using ".direction-column-reverse-xs" would place the image on top for mobile devices.
Styling Your CSS Using Media Queries
You can use media queries in your CSS to have your code change alongside the same breakpoints that Frow uses.
Make sure to place the media queries after the original class. For example, here is code to make h1's shrink to a smaller text size on phones and tablets:
h1 {
font-size: 30px;
}
/* XS, SM */
@media (max-width: 991px) {
h1 {
font-size: 20px;
}
}
Here are some pre-made media queries of the most popular cases, for easy copying and pasting.
/* XS */
@media (max-width: 767px) {
}
/* XS, SM */
@media (max-width: 991px) {
}
/* SM */
@media (min-width: 768px) and (max-width: 991px) {
}
/* MD */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* MD, LG */
@media (min-width: 992px) {
}
/* LG */
@media (min-width: 1200px) {
}