Version 3.0.6

Grid System

ProgressUI includes a responsive, mobile first grid system based on Bootstrap's grid system.

  • xs - 455px
  • sm - 728px
  • md - 1024px
  • lg - 1365px

This is the preferred basic 12 column grid structure give you access to a fluid layout that has set breakpoints at different screen sizes. The md in the class signifies that it will break at the "medium" breakpoint. Other available breakpoints for this grid include lg, sm, and xs. To have access to these columns, you must wrap them in a parent container with the class .grid-half.

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-1

.col-md-2

.col-md-2

.col-md-2

.col-md-2

.col-md-2

.col-md-2

.col-md-3

.col-md-3

.col-md-3

.col-md-3

.col-md-4

.col-md-4

.col-md-4

.col-md-6

.col-md-6

.col-md-12

This 24 column grid is a more advanced version of the "Basic 12 Column Grid" laid out in the section above. All the same breakpoints are available, except with this grid, you have 24 columns to use for more control over your layout. To have access to these columns, you must wrap them in a parent container with the class .grid-full.

.col-md-3

.col-md-21

.col-md-5

.col-md-19

.col-md-7

.col-md-17

.col-md-9

.col-md-15

.col-md-11

.col-md-13

.col-md-12

.col-md-12

ProgressUI comes with a few pre-defined layouts baked in. They are designed to be semantic in nature to more easily define your page structure. These columns must be wrapped in an element with the class that matches the title of their row name. For example, Row Golden will be .row-golden.

Row Golden

.col-narrow

.col-wide

Row Thirds

.col-third

.col-third

.col-third

Row Halves

.col-left

.col-right

Progress also offers a flex grid system. Developers can use this instead of the grid system for a flex box alternative. In order to implement the grid system add .flex to the parent element. Then add .flex-item to the parent element along with another class to define its size.

.full

.half

.half

.three-fourths

.fourth

.two-thirds

.third

.fifth

.fifth

.fifth

.fifth

.fifth

.sixth

.sixth

.sixth

.twelfth

.twelfth

.twelfth

.twelfth

.twelfth

.twelfth

.seventh

.seventh

.seventh

.seventh

.seventh

.seventh

.seventh

.eighth

.eighth

.eighth

.eighth

.eighth

.eighth

.eighth

.eighth

.ninth

.ninth

.ninth

.ninth

.ninth

.ninth

.ninth

.ninth

.ninth

.tenth

.tenth

.tenth

.tenth

.tenth

.tenth

.tenth

.tenth

.tenth

.tenth

.eleventh

.eleventh

.eleventh

.eleventh

.eleventh

.eleventh

.eleventh

.eleventh

.eleventh

.eleventh

.eleventh

Search Results

Powered by