Stacks4Stacks

Key / value pairs are where you have the key (name) of an item and then a corresponding value against it. Traditionally you might consider using tables to create this type of thing, but tables are more geared towards larger quantities of tabular data. Plus tables can be very difficult to display on smartphones, unless you're using something like FlatPack. You'll find that description lists, like the ones the DescriptionList stack generates are altogether more flexible and less frustrating to build with.

The DescriptionList stack provides a friendly user interface to setup your description list key / value pairs. You can input content using styled text, HTML or Markdown. A bountiful choice of powerful colour and style options are built in. No code is required to accomplish the basics. Should you need to do some really advanced things with your description lists, then of course, custom CSS code is supported too.

It's worth emphasising that description lists are excellent for website accessibility and SEO. This boils-down to the fact that the markup (code) to generate them is very simple. Assistive devices and search engines can instantly recognise the relationship between keys and their corresponding values. Depending on your use of the DescriptionList stack and quality of the content you use in it, you might see your SEO ranking to increase.

Examples

Here are some quick examples demonstrating the sort of things DescriptionList can do. These examples (and more) are available in the downloadable project file too. DescriptionList is compatible with a lot of different stacks, so it would certainly be feasible to incorporate it with things like your favourite background, border and shadow stacks, to create some really compelling content blocks.

 

Setup

Follow these steps for getting the DescriptionList stack setup in your website:

1. Download and install the stack in the normal way.
2. Open your Stacks Library. Search for 'DescriptionList'. Drag and drop a copy of the stack into your page.
3. With the stack selected in Edit Mode, click the blue to start adding new list items.
4. For every list item you add, the key goes in the first box, and its corresponding value goes in the second box.
5. If you select the main DescriptionList stack, you can access all of its settings within the Stacks side panel.
6. Preview the page to see the result. Save your changes and export or publish the website as normal, when done.

All settings display informational tooltips on mouseover. These explain what each setting does and may provide important information to follow.

Some of the settings are purposefully duplicated. The mobile settings take effect on screen widths less-than the specified breakpoint width, and the equivalent settings are applicable to screen widths greater-than the breakpoint. This enables you to have more precise control on smaller screens like mobile. Additionally each item (as a whole) has settings like padding and background fills; and these are replicated for the keys and values.

If you select and individual list item in Edit Mode, you'll see that it also carries a couple of settings. In particular, you can change the content type used for entering your text, and optional links or special classes can be added to each item. If you need to quickly duplicate a list item, click on it with your mouse or touchpad while holding down the ALT key and drag it up or down.

Working with CSV files

On the assumption you had several hundreds or thousands of key / value pairs stored in a spreadsheet, the CSV capabilities in DescriptionList let you quickly bulk-import all this data in just a couple of seconds. Likewise this option could be useful if you have colleagues or clients that want to update CSV files remotely, without using RapidWeaver.

If you are working with a large CSV file comprising of many columns, DescriptionList lets you choose the column numbers to use, for the keys and values. Please remember that in computer programming, column numbers are zero-based, so the first column of your CSV file is actually column number 0. The optional prefix and suffix boxes let you insert labels before or after each piece of data.

To use CSV as a data source, add a new list item, as you would normally do. But this time, set its Content Type to CSV. You'll then see a button to specify the link to the CSV file and an optional checkbox to hide the first (header) row. Column numbers can be changed if required. Optional prefix and suffix labels could also be added.