Basics and Grids

Desktop Grid

Desktop Grid (click to view larger)

Mobile Grid (click to view larger)

Basics

AAFP.org is a responsive site that changes layout based on screen size. The desktop grid (see image at right) is based on a modest width that can accommodate a large variety of users. It is composed of:

  • 12-column grid
  • 60-px columns
  • 20-px gutters

The small screen width is the minimum size accommodated (see mobile grid, at right). It is composed of:

  • 4-column grid
  • 60-px columns
  • 16-px gutters

The aafp.org template responds to screensizes on several breakpoints. When incorporating CSS/JS files, you need to be aware of the following breakpoints:

  • 360px - 479px
  • 480px - 599px
  • 600px - 767px
  • 768px - 979px (a.k.a. tablet view)
  • 979px - all larger (a.k.a. desktop view)

Templates

These two "shell" HTML templates contain all of the required tags, classes, and scripts to create an AAFP application:

Grids

The aafp.org website runs on a 12-column grid system. Each grid responds differently at each breakpoint. The following are the various classes and sizes:

 

360px - 767px
ClassBehavior
360px - 767px:  Class: all grid sizesBehavior: All grid sizes fall to width of 100%
768px - 1051px (devices)Class
Behavior
768px - 1051px (devices):  Class: .one-columnBehavior: Max width: 55px
768px - 1051px (devices):  Class: .two-columnBehavior: Max width: 110px
768px - 1051px (devices):  Class: .three-columnBehavior: Max width: 165px
768px - 1051px (devices):  Class: .four-columnBehavior: Max width: 220px
768px - 1051px (devices):  Class: .five-columnBehavior: Max width: 275px
768px - 1051px (devices):  Class: .six-columnBehavior: Max width: 350px
768px - 1051px (devices):  Class: .seven-columnBehavior: Max width: 350px
768px - 1051px (devices):  Class: .eight-columnBehavior: Max width: 400px
768px - 1051px (devices):  Class: .nine-columnBehavior: Max width: 450px
768px - 1051px (devices):  Class: .ten-columnBehavior: Max width: 500px
768px - 1051px (devices):  Class: .eleven-columnBehavior: Max width: 550px
768px - 1051px (devices):  Class: .twelve-columnBehavior: Max width: 600px
768px - 1051px (devices):  Class: .fullBehavior: width: 100%
768px and Larger
Class
Behavior
768px and Larger:  Class: .one-column
Behavior: width: 60px
768px and Larger:  Class: .two-columnBehavior: width: 140px
768px and Larger:  Class: .three-columnBehavior: width: 220px
768px and Larger:  Class: .four-columnBehavior: width: 300px
768px and Larger:  Class: .five-columnBehavior: width: 380px
768px and Larger:  Class: .six-columnBehavior: width: 460px
768px and Larger:  Class: .seven-columnBehavior: width: 540px
768px and Larger:  Class: .eight-columnBehavior: width: 620px
768px and Larger:  Class: .nine-columnBehavior: width: 700px
768px and Larger:  Class: .ten-columnBehavior: width: 780px
768px and Larger:  Class: .eleven-columnBehavior: width: 860px
768px and Larger:  Class: .twelve-columnBehavior: width: 940px
768px and Larger:  Class: .fullBehavior: width: 100%