Jul 27 2011

Resources for Styling Lists

Advertisement

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

Worry Free Labs

Three Penny Editor

Maisengasse

Dan George

L’Echappee Laine

Host Bacon

Melbourne Studio of Art

Factoria

Poppies

eFrog Themes

Ideaware

Felipe Medina

Kenny Saunders

Wikia

Shelly Cooper Design

Smorge

gbit

Uniquexports

Jorge Rigabert

Pandr

La Web Shop

Tutorials

Listutorial

5 Ways to Set Your Unordered Lists Apart

The Amazing LI: Using CSS and Unordered List Items to Do Just About Anything

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

List-O-Matic

MenuMatic

(rb)

About the Author

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.

Homepage

Comments and Discussions
  • nik, 27 July 2011

    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).

    • Robert Bowen, 28 July 2011

      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

  • Designerist, 28 July 2011

    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!

  • Wayne McManus, 28 July 2011

    Great post. I’ll be coming back to this a lot!

  • George E. Frog, 28 July 2011

    Thank you for the mention.

  • Marco, 29 July 2011

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

  • Oddballz, 29 July 2011

    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!

search form
 
image description image description