Tags:
create new tag
, view all tags

Responsive Multi-Column Page Layout using CSS

2015-05-08 - 01:18:17 by PeterThoeny in Deployment
The internet becomes more and more mobile; mobile devices are used increasingly to access the internet and intranet, including company internal TWikis. The goal is to design websites that work equally well on desktop computers and mobile phones.

Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience, easy reading, and navigation with a minimum of resizing, panning, and scrolling, across a wide range of devices, from desktop computer monitors to mobile phones.

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule, in the following ways:

  • The fluid grid concept calls for page element sizing to be in relative units like percentages, rather than absolute units like pixels or points.
  • Flexible images are also sized in relative units, so as to prevent them from displaying outside their containing element.
  • Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on, most commonly the width of the browser.

In this blog we cover one aspect of responsive web design: How to create the fluid, proportion-based grids, or a multi-column page layout that changes depending on the device used. This blog uses a two-column layout. On a mobile phone you will see just one column. This can be achieved with some CSS modern browsers can interpret. It will degrade gracefully to a single column on older browsers. Content in columns flow properly on a page per page basis when printing out a long text with a two-column layout.

First, let's enclose text in a div tag that has a class for the two-column layout.

<div class="twikiTwoColumns">
...this text will be shown in two columns...
</div>

The CSS for two-column layout looks as follows:

<style>
.twikiTwoColumns {
  -webkit-columns: 2 300px;
     -moz-columns: 2 300px;
          columns: 2 300px;
  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
  -webkit-column-rule: 1px solid #e2e2e2;
     -moz-column-rule: 1px solid #e2e2e2;
          column-rule: 1px solid #e2e2e2;
}
</style>

What the .twikiTwoColumns class does:

  • columns: 2 300px; - this tells the browser to use maximum two columns, with a minimum width of 300 pixels. If the width of the screen or window is less than 300 pixels, a single column is used.
  • column-gap: 4em; - the gap between the columns is 4 ems.
  • column-rule: 1px solid #e2e2e2; - the vertical rule between columns is a solid light gray line.

The columns and column-* properties are fairly new. That is why we specify browser specific properties (such as -moz-column-gap) along the official properties (such as column-gap).

Now, at some point it is desirable to interrupt the flow of two columns. Let's use CSS to tell the browser to start a new column layout at h2 headings:

<style>
.twikiTwoColumns h2 {
  -webkit-column-span: all; 
          column-span: all; 
}
</style>

What the .twikiTwoColumns h2 class does:

  • column-span: all; - interrupt the column flow at h2 headings. Note that this currently is not supported by Firefox.

We also want images to automatically shrink if they do not fit into the screen or window width:

<style>
.twikiTwoColumns img {
  max-width: 100%;
  height: auto;
}
</style>

What the .twikiTwoColumns img class does:

  • max-width: 100%; - automatically shrink embedded images to the width of the column.
  • height: auto; - disable fixed height in embedded images so that resizing can be done with the proper aspect ratio.

That is basically it. Try this out on a desktop computer. Resize the window and watch how the text flows, the two columns change to a single column, and how the GIF image resizes.

Here is a GIF animation that shows a page layout with two columns change to a single column on window resize: (source)

2-column-rule.gif

Do you need a multi-column page layout? In the same way we can define threeColumns and fourColumns classes for three-column and four-column layout, respectively. The only difference is the number of columns specified in the columns property.

Now on to TWiki specific implementation. To make it easier to write articles and papers with a two-column layout we hide the divs in TWiki variables so that we can simple write:

%TWOCOLUMNS%
...this text will be shown in two columns...
%ENDCOLUMNS%

For this we define new preferences settings. The upcoming TWiki release will have %TWOCOLUMNS%, %THREECOLUMNS%, %FOURCOLUMNS%, and %ENDCOLUMNS% defined. For now you can define the settings in your Main.TWikiPreferences for site-wide scope:

   * Set !TWOCOLUMNS = <div class="twikiTwoColumns">
   * Set !THREECOLUMNS = <div class="twikiThreeColumns">
   * Set !FOURCOLUMNS = <div class="twikiFourColumns">
   * Set !ENDCOLUMNS = </div>

You also need to define the styles for site-wide scope. You can do that with a custom overriding style sheet indicated by the USERLAYOUTURL setting.

Resources:


-- Peter Thoeny - TWiki.org Founder

Comments

.

Edit | Attach | Watch | Print version | History: r3 < r2 < r1 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r3 - 2015-05-08 - PeterThoeny
 

Twitter Delicious Facebook Digg Google Bookmarks E-mail LinkedIn Reddit StumbleUpon    
  • Help
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.