Responsive Design

Responsive design is a term in web design meaning that the web page "responds" to the size of the viewport -- or the width of the device -- used to view the page, and adjusts accordingly. It's often used interchangeably with "mobile-friendly."

Many web pages are built on grid systems which used to heavily rely on table structures. Table structures can't adjust easily for smaller screens because they must be built with a set number of rows and columns, but a set, large number of columns often doesn't look good on smaller screens. Case in point: a table with 20 columns might look fine on a desktop computer with a 27" monitor, but it will definitely not look good on a 2" phone screen.

As such, one big aspect of responsive design involves using grid structures that automatically re-arrange themselves depending on the screen width. For example, a "table" with a single row of 20 columns would automatically adjust to only have 2 columns per row and simply increase the number of rows. Or more commonly, it may just stack all 20 cells on top of each other so it's 1 column per row and 20 rows instead.

Responsive divs on the Wiki

Rather than using table cells, divs are basic "block" elements you can use to built grid structures that have the option of being responsive. You can use the wiki's built-in block styles to include special CSS classes which handle responsiveness in divs.

Examples

To see these in action on desktop, change the size of your browser window!

>>lfx25<<

left-float 25% wide div, no margin, border or background.

>>lf50 h6 bd p15 bgcolor=yellow<<

left-float, 50% wide, 6 rows height, border, padding (15px) background color yellow

>>lf25 center frame<< 25% wide div text is centered "frame" includes a border and light gray background

>>lfx33 h6 bgcolor=#ffeeee clear<<

33% wide div tile clear puts this on clear new row, otherwise it may float upwards, wrecking the grid layout.

>>lfx33 h6 center<<
33% wide div with 6 lines height

Available classes

Div widths

  • lf25, rf25, lf33, rf33, lf50, rf50, lf66, rf66, lf75, rf75, lf100, rf100
  • lfx25, rfx25, lfx33, rfx33, lfx50, rfx50, lfx66, rfx66, lfx75, rfx75, lfx100

The difference between lf25 and lfx25 is that the former includes margins between divs and the latter does not. Remember to close blocks with >><< if you aren't following it with another block.

Div heights

  • h1, h2, h3, h4, h5, h6, h7, h8, h9, h10

These are proportional to number of text lines. For example, setting a div with "h5" will give it a height of 5 rows of text, regardless of how much text is actually in the div. Of course, if you have more than five rows of text, the div will expand accordingly. This just sets a minimum height.

Div padding

  • p0, p5, p10, p15

This sets 0-15px padding around the div. By default, divs have a padding of 3px top and bottom, 5px left and right.

Border classes

  • bd, bdt, bdb, bdr, bdl

This sets a solid #cccccc border around the whole div (bd), or in one particular direction.

Clear

  • clear

This sets the div on a new "row."