Page Grids

There are several pre-defined page grids that you can use. It might also be the case that your application views needs a different page grid that is not among the pre-defined, contact the Central Web Group to discuss the best solution for your specific application.

There are two categories of page grids that the CSS from the asset host supports, the first category are using two white boxes and the second are using one box on fixed or liquid width.

Page Grids with Two Boxes

The first category has a separate boxed column to the right. Most pages on www.malmo.se are using this grid layout and are using the right column box for a contact box. The main box can have one wide column or be divided into a grid with a sub-menu to the left and a content column to the right.

Two boxes, the main one with a sub menu to the left

This is the regular page grid you will find on www.malmo.se. The "speech bubble" style of the box to the right must only be used for contact data in the way it is used on www.malmo.se. The following code creates this grid layout:

<body>
  <div class="wrap-all">

  <!-- Include the remote masthead as specified here -->

    <div class="main">
      <div class="columns-3">
        <div class="content-wrapper">
          <div class="content-wrapper-1">
            <div class="content-wrapper-2">
              <div class="content-wrapper-3">
                <div class="content-wrapper-4">
                  <div class="content-wrapper-5">
                    <div class="content-wrapper-6">
                    
                      <!--eri-no-index-->                      
                      <div class="sub-menu">
                        <div>
                          <ul>
                            <li class="selected no-children active"><a href="#">Menu item 1 (active)</a></li>
                            <li><a href="#">Menu item 2</a></li>
                            <li><a href="#">Menu item 3</a></li>
                            <li><a href="#">Menu item 4</a></li>
                            <li><a href="#">Menu item 5</a></li>
                            <li><a href="#">Menu item 6</a></li>
                            <li><a href="#">Menu item 7</a></li>
                          </ul>
                        </div>
                      </div>
                      <!--/eri-no-index-->

                      <div class="content">
                          Your application/content/menus goes here 
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="aside">
          <div class="contact-box">
            <div class="contact-box-header">
              <h2>Kontakta oss</h2>
            </div>
            <div class="contact-box-content-wrapper">
              <div class="contact-box-content-container">
                <div class="contact-box-content">
                  <dl>
                    <dt class="name">Malmö stad</dt>
                    <dd><a href="/">Skriv till oss</a></dd>
                    <dd class="epost">E-post: malmostad@malmo.se</dd>
                    <dd class="tel">Tel: 040 34 10 00</dd>
                    <dt>Telefontider</dt>
                    <dd>Vardagar 07.30 - 17.00</dd>
                    <dt>Postadress</dt>
                    <dd>Malmö stad</dd>
                    <dd>205 80 Malmö</dd>
                  </dl>
                </div>
              </div>
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</body>

Yes, that is surely divitis with a lot of div containers just to make up a white area on a page. Unfortunately it will have to be this way until all major browsers supports rounded corners and box shadows defined with CSS.

Note the eri-no-index comment on line 16 and /eri-no-index on line 30 above. Using those comments around a block prevents it from being indexed by The City of Malmö's indexing service.

One Wide Column In the Main Box

Regardless if you have a grid layout with one or two boxes you can remove the sub menu and use the main box area for one column. This can be useful if your views are application centric like the following example:

Two boxes, the main one without the sub menu

You will achieve this  by changing the class name columns-3 to columns-2 on line 7 and remove the sub-menu block on line 16—30 in the code above.

Page Grids with One Box

In the second category, the white main box is filling up the full width. You achieve this by changing the class name columns-2 to columns-1 on line 7 below and remove the aside container and all its contents. The box is in the example below divided into a custom grid.

<body>
  <div class="wrap-all">

    <!--Include the remote masthead here -->

    <div class="main">
      <div class="columns-1">
        <div class="content-wrapper">
          <div class="content-wrapper-1">
            <div class="content-wrapper-2">
              <div class="content-wrapper-3">
                <div class="content-wrapper-4">
                  <div class="content-wrapper-5">
                    <div class="content-wrapper-6">
                      <div class="pagecontent">

                        Your application/content/menus goes here

                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</body>
Page grid with one box

Liquid Layout

If your application is using views with wide table data, you can get a liquid layout where the main area expands to nearly the full width of the browser window. Change the class wrap-all to wrap-all-expanding on line 2 below to get this effect. Do not use the liquid layout for content centric views since that makes text lines too long.

<body>
  <div class="wrap-all-expanding">
Liquid layout where the contents of the page is expanding to the full browser width

Senast ändrad: 2011-03-06 11:59