CSS Styling: List Pages

General Assembly: Part 1

Typically a web developer will build a website around an Object Type or a Resource for example: Products in an E-commerce Platform; Jobs on a Jobs Board; Startups in a Startup Database etc.

And it is now common practice for a web developer to showcase a list of these resources on the index / home page so that the user can quickly navigate to what they are looking for by scrolling through the listing, or using a filter search.

It is therefore vital to know how to build an effective list page, using the following design principals:-

1. Positioning

As you can see in the image bellow it is not evident how to display items properly on a page. In this case we think that inline block will give you the most desirable affect.

  • An inline element has no line break before or after it, and it tolerates HTML elements next to it. (Think a line of text).
  • A block element has some whitespace above and below it and does not tolerate any HTML elements next to it.
  • An inline-block element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element.

HTML

<div class="inline">Content</div>
 <div class="inline">Content</div>
 <div class="inline">Content</div>
<div class="block">Content</div>
 <div class="block">Content</div>
 <div class="block">Content</div>
<div class="inline-block">Content</div> 
 <div class="inline-block">Content</div> 
 <div class="inline-block">Content</div>

CSS

.inline {
  display: inline;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}

2. Responsive

  • Max-width: property allows you to set the max width of the element. The purpose of max-width is to prevent the element from extending the boundary.
  • You can make the image auto resize to the max width of the boundary by using max-width:100% and height:auto.
  • Min-width: is opposite to max-width. It sets the minimum width of an element. In the example form below, min-width is used on the input text field to prevent the input from getting very small when scaling down.
  • Relative Margin: This is an example of a comment list where relative left margin is used to space out the threaded comments. Instead of using fixed pixel value, I used percentage value to space out the sub-lists. As shown on the left side of the screenshot, the content box in the sub-lists gets very small on mobile resolution if pixel left margin was used.
  • Relative Font Size: With relative value (e.g. em or %), the font size, line-height and margin spacing can be inherited. For example, I can change the font size on all descendant elements by simply changing the font-size on the parent element.
  • Relative Padding: The screenshot below shows it is better to use relative percentage padding as opposed to fixed pixel padding. The box on the left shows an unbalanced padding space if pixel padding was used. The box with percentage padding on the right shows that the content area is maximized.

3. Hover Overlays

Hover over effects demonstrate to the user that the area is clickable. I.e. when you click on the list item it goes through to a show page.

Colour Overlay

The outer <div> will appear on page load, and the inner <div> will appear on hover.

<div id=”outer-box”>
<img src=”cartagena.jpg”>
<div id=”inner-box”>
<p>This is the overlay!</p>
</div>
</div>

4. Masonary

Masonry layout is also referred to as the Pinterest Style Layout, as www.pinterest.com was the first major website to use this layout style.

Masonry layout optimises the use of space inside the web page by reducing any unnecessary gaps. Without this type of layout, certain restrictions are required to maintain the structure of layout.

As you can see, having boxes with dynamic dimensions makes it difficult to design a layout without unnecessary gaps. This type of layout makes it harder for users as well, because the page height increases due to the additional spaces. It requires unnecessary scrolling to navigate to the bottom of the page. In such scenarios, we have to use a fixed-size box in each row.

Generating Masonry layouts involves some advanced calculations, so it is wise to use a plugin, rather than building it from scratch. There are many popular plugins for generating Masonry layouts, with a wide range of features. The following is a list of the top Masonry layout plugins:

Here is a simple tutorial:-

  • Step 1 — Download the masonry.pkgd.min.js file and include it at the end of the page as shown in the following code:
<html>
  <head>
    <title>Masonry Layout with Masonry Plugin</title>
  </head>
  <body>
    <script src='masonry.pkgd.min.js'></script>
  </body>
</html>
  • Step 2 — Create a list of elements with variable widths and heights. Each element should have a common class. We get the most optimal layout by defining element widths as multiples of the column width. Consider the following code:
<html>
  <head>
    <title>Masonry Layout with Masonry Plugin</title>
    <style>
      * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }

      .item {
        width:  50px;
        height: 50px;
        float: left;
        background: #2296DD;
        border: 2px solid #333;
      }

      .item.thumbnail {
        width:  100px;
        height: 100px;
        background: #cfcfcf
      }

      .item.medium {
        width:  150px;
        height: 50px;
        background: #A6E392
      }

      .item.large {
        width:  200px;
        height: 100px;
        background: #D092E3
      }
    </style>
  </head>
  <body>
    <div id='masonry'>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item thumbnail"></div>
      <div class="item medium"></div>
      <div class="item"></div>
      <div class="item large"></div>
      <div class="item"></div>
      <div class="item medium"></div>
    </div>

    <script src='masonry.pkgd.min.js'></script>
  </body>
</html>
  • Step 3 — Initializing the Masonry plugin is the final task in the process. We use this to restructure the elements and construct the layout. Consider the following initialization code:
<script>
  var container = document.querySelector('#masonry');
  var masonry = new Masonry(container, {
    columnWidth: 50,
    itemSelector: '.item'
  });
</script>

5. Dynamic Filtering

HTML

Include the Isotope .js file in your site.

<script src="/path/to/isotope.pkgd.min.js"></script>

Isotope works on a container element with a group of similar child items.

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item grid-item--width2">...</div>
  <div class="grid-item">...</div>
  ...
</div>

CSS

All sizing of items is handled by your CSS.

.grid-item { width: 25%; }
.grid-item--width2 { width: 50%; }

Initialize with jQuery

You can use Isotope as a jQuery plugin: $(‘selector’).isotope().

$('.grid').isotope({
  // options
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});

Initialize with Vanilla JavaScript

You can use Isotope with vanilla JS: new Isotope( elem, options ). The Isotope()constructor accepts two arguments: the container element and an options object.

var elem = document.querySelector('.grid');
var iso = new Isotope( elem, {
  // options
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'
});
// element argument can be a selector string
//   for an individual element
var iso = new Isotope( '.grid', {
  // options
});

COMPLETE EXAMPLE:

Demo & Github