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 stetching 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  991px - 1199px wide ) - Generally Computers / Landscape Tablets
  • LG - ( Screens 1200px+         wide ) - Generally Widescreen Computers

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-md

.visible-lg

.hidden-xs

.hidden-sm

.hidden-md

.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

Using Media Queries for XS, SM, MD, LG

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.

/* 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) {
    
}
Frow Shortcuts

Frow is from Cody Sherman via Beg.in