Noupe Editorial Team July 27th, 2011

Resources for Styling Lists

In our continuing quest to listen to our readers and give them what they are looking for, we have a post of resources that we were asked to compile. With the amount of content being shared through the web, so much of it is presented in lists, designers are constantly looking for stylish ways to deliver these listings. Below are some resources and more to help you out in this arena. We have collected some valuable tools that designers can use to creatively get this done, and have also gathered a showcase of some unique and inspiringly crafted lists. First you can get some interesting ideas for creating lists for your own design projects via the showcase, before you dive into the resource section of the post in order to bring those ideas to life.

Showcase

Versionapp Carsonified Rapidweaver 5.0 Three Penny Editor Maisengasse Dan George L'Echappee Laine Host Bacon Melbourne Studio of Art Factoria eFrog Themes Ideaware Kenny Saunders Wikia Shelly Cooper Design Smorge gbit Uniquexports Jorge Rigabert La Web Shop

Tutorials

Listutorial 5 Ways to Set Your Unordered Lists Apart Sexy Ordered Lists with CSS Reinventing a Drop Down with CSS and jQuery Definition lists – misused or misunderstood? CSS & HTML: nested lists with style

Tools

Listamatic CSS Menu Maker MenuMatic (rb)

Noupe Editorial Team

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags:

7 comments

  1. Some of them are columns, not lists. Altough one can format them with unordered lists, the title „Styling Lists“ is wrong for these contexts. Same about all that menu tutorials. They are not list contents, they are listed navigation items. Semantically thats a difference (as well as Layouts are no tables, even if you style them with table elements).

    Reply

    1. Hey nik

      While yes columns are available in CSS3, in older versions and browsers not supporting CSS3, styling using lists is still a go to method for achieving the effects that are needed. So the context is still very relevant. And while yes nav elements are their own tag, they are still styled via the list elements in your CSS so those tuts are also very relevant when looking at ways to style and arrange lists. Would you not agree?

      Noupe Editorial Team

      Reply

  2. Thank you very, very, very much for these examples and tutorials. Finally everything is collected and well stored in one place. I had a collection of code snippets, and always had to figure out which one to take. But now, all my search-and-find problems are nicely solved.
    Thanks again!

    Reply

  5. Thanks for adding my blog to the list. I’m glad someone found my article useful.
    Have a wonderful summer day!

    Reply

  6. Some nifty ideas to conciser, like Nik indicated, “Some of them are columns, not lists”, but conceptually fit well within the context of this resource. Great post!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *