The Open Source Web Design Toolbox: 100 Web Design Template Sources, Tools and Resources

Posted by Mustafa

The open source model has, over the last 20 years, proven that collaborative development is one of the best ways to incorporate the newest ideas and latest concepts into design.

In fact, the open source model, which began with programmers, has been so successful that it is currently being applied in government, media, education and private business. But despite these new applications, the unique combination of the open source model with the universalism of web design remains one of the ideal applications of open source. This pervasiveness of the open source spirit in web design now means that you can use open source software to design both graphics and your CSS and HTML, and you can also use the dozens of reliable open source code resources or thousands of web design templates to base your own designs on. In this article we highlight 100 open source web design templates, resources, and tools.

The Best Directories of Free Open Source Web Design Templates

There are tons of free design template directories on the net, but sorting through all of them can be a very tedious process. Instead, we suggest that you start with these four, which we consider to be the best free open source design template directories online.

  1. OSWD: Over 2,000 of the best freebie web design templates. Also allows for search capability by color, contrast, validation, and other categories.
    OSWD
  2. OpenWebDesign:A large and active community of individuals who share free web design templates. Includes regular design contests and a sub-category of most popular designs to speed up your search.
    OWD
  3. Open Designs: Headed by a non-profit board, the open design community has almost 600 designs which have been vetted and moderated by the community’s volunteer board. Also includes a relatively active forum where designers can share tips and resources.
    OD
  4. CSS Tinderbox: CSS Tinderbox prevents you from having to “reinvent the wheel” by providing very basic, yet solid, CSS/XHTML design templates from which you can build off of.
    CSST

Open Source Web Design Programs

Why pay for software if you can find it free? Usually, the answer is that the free stuff just plain isn’t any good. You won’t find that to be the case with the open source web design software programs in this section, however, which are all the best of the best.

  1. Nvu: An open-source web authoring system to rival FrontPage and Dreamweaver. (Linux, Windows, and Mac)
  2. Cssed: A CSS editor featuring auto completion, syntax highlighting and validation. (C, C++) (Linux)
  3. Quanta Plus: A top-notch HTML editor and web development for the K Desktop Environment.
  4. Bluefish: An HTML editor for programmers written using GTK, designed to save the experienced webmaster some keystrokes. (C) (GNU/Linux, Unix)
  5. GIMPShop: The open source replacement for Photoshop. (Mac, Linux, and Windows)
  6. Inkscape: The vector graphics application which may spell the end for Adobe Illustrator.

Complete Web Design Templates

If you want to get off the ground with your website quickly, then you may want a complete template that requires minimal tweaking. In this section we highlight some of the best complete template resources on the web. These templates include not only the CSS, but also the (X)HTML and in some cases the graphic files to get your site up as fast as possible.

  1. TemplateNavigator: The largest catalogue of free website and flash templates, along with quality preview shots.
  2. TemplateBox: Over 300 freebie website, logo, banner, and flash templates to complement their collection of paid offerings.
  3. Template Monster: A small but very high-quality set of web, flash, and blog templates.
  4. Art for the Web: 75 freebie templates. Pretty good place to look if you’re looking for something slightly out of the ordinary.
  5. Free CSS Templates: A 206 template strong resource which is frequently updated with new submissions.
  6. Effex-Media: Free website templates designed by designers, this massive list is categorized by website type and includes user reviews of many of the templates.
  7. DotcomWebDesign: Hundreds of free templates, some of which are really top-notch. However, the categorization is a little arbitrary so be ready to spend some time manually searching.
  8. Themebot Design Templates: This site has some design templates, but not very many. There is a good amount of free themes.
  9. Groovy Lizard: Personal page templates (commercial use must buy a license)
  10. Interspire: Freebie web, Frontpage and Dreamweaver templates
  11. Joyful Heart Designs: Personal page templates generally with floral designs.
  12. OpenSourceTemplates: Free CSS and xhtml open source website templates and Web 2.0 designs.
  13. Ricky’s Web Templates: 50+ freebie templates, graphics, and buttons.
  14. Free CSS Templates: A dozen full-featured fully functional CSS based templates.
  15. FreekTemplates.com: A collection of business, cars and bikes, and hosting templates.
  16. Template Perfection: 200+ freebie templates with quite a few non-english oriented templates.
  17. TemplateWorkz: 48 freebie web templates, along with some basic logo and newsletter templates.
  18. Zymic: 80 freebie templates (HTML Pages + CSS + Images + PSD Files + Blank Images Files).
  19. OpenSourceTemplates: A community-driven CSS and xhtml open source template design showcase.
  20. Freelayouts: HTML and Flash templates.
  21. FreeCSSTemplates.org: Over 100 freebie CSS templates.
  22. Free Layouts: Complete list of hundreds of HTML, flash, and CSS templates.
  23. Free Templates Online: Dozens of easily customizable templates categorized by theme.
  24. Free Website Templates: A large collection of templates that don’t require a reciprocal link.
  25. Six-Shooter Media: Free CSS and xhtml open source templates.
  26. Free Flash Template: Web templates and intros with tons of special features.
  27. Layouts4Free.com: Free web layouts with search capability.
  28. Solucija: Free XHTML / CSS website templates already setup and sorted by commercial use.
  29. MasterTemplates: Professionally designed free website layouts along with PowerPoint templates.
  30. TemplateWorld: Free, tableless, W3C-compliant web design layouts designed by Template World designers.
  31. Painted Pixels: Free web page templates, buttons, and background tiles for non-commercial use.
  32. CSSFill: A selection of CSS / XHTML based layouts and templates by Michael Strand.
  33. ThemesBase: Templates organized by popular content management, blogging and forum systems.
  34. Arcsin Design Templates: 22 Freebie XTML and CSS Templates
  35. Snakeye Web Templates: 20 templates with a focus on Dreamweaver and Fireworks.
  36. Steve’s Templates: Dozens of templates, free with link back.
  37. GordonMac.com: Free CSS templates along with some freebie PHP scripts.
  38. Web Design Helper: Full page templates including the graphics and code.
  39. Webmaster Resources: 25 free web templates.

CSS Layouts

If you’re looking for the freedom to create something entirely original but just want some of the basic layout taken care of, this section is for you. The templates below are pure CSS, leaving you a clean slate from which you can add the design, graphics, and text as you see fit.

  1. Layout Gala: 40 CSS tri-color layouts to help you pick a format.
  2. AndreasVilkund.com: Free Templates by designer Andreas Viklund.
  3. CSS Template Directory: A collection of CSS formatted page templates, developed and distributed by different designers.
  4. BenMeadowcroft.com: Top-notch web design templates by Ben Meadowcroft, mixed in with a few spoof pages and experimentation.
  5. Mollio: A set of basic CSS templates that that also have some sample basic content to speed things along.
  6. Real World Style: CSS layouts organized by format type.
  7. Little Boxes: CSS template arrangements with quickly accessible code.
  8. The Layout Reservoir: Simple, straightforward, and manipulable 2 and 3 column layouts.
  9. Protagonist Web Resources: A list of 43 tableless layouts to go along with the other protagonist resources.
  10. Glish: CSS Layout Techniques by Eric Costello which have been stripped down to the bare essentials.
  11. FU2K: CSS layouts designed for Netscape 4 compatibility.
  12. Position is Everything: Tableless design resource with CSS bug workarounds.
  13. ThreeColumnLayouts: The ultimate 3 column layout resource list.
  14. ssi-developer: Two column CSS template samples with recommendations.
  15. MIS Web Design: Fancy Paragraphs with CSS.
  16. Ruthsarian Layouts: Freebie-CSS layouts ranging from basic to complex arrangements.
  17. A List Apart: CSS: Practical CSS Layout Tips, Tricks and Techniques
  18. Code-Sucks.com: Creating 1, 2, 3, and 4 column layouts.
  19. Particle Tree: Dynamic resolution dependent layouts.
  20. Project Seven: Fluid CSS Layouts
  21. MyCelly: A collection of 16 basic layout templates.
  22. Ideas: 12 free CSS templates.
  23. CSS Library: Dynamic drive’s tableless CSS layouts.
  24. IntensiveStation: A collection of all new basic CSS templates.
  25. IronMyers: A collection of layouts with full Grade-A browser support for IE6, IE7, Firefox, Opera, Safari, and more.
  26. The CSS Playground: Cutting edge CSS demos by Stu Nicholls’
  27. WordPress Theme Viewer: Collection of searchable themes organized by columns, colors, rounded corners, and other categories.
  28. Fluid 2-Column Template: A fully usable “fluid” template, meaning that the design expands and contracts with the window size.
  29. Avinash 2.0: 12 Free CSS Templates

Automated CSS Tools and Generators

This set of resources isn’t for those that want to create something entirely unique. But if you aren’t a strong coder and just want to get the job done, these automated CSS code tools will let you create CSS at the push of a button.

  1. CSS Creator: Select the form colors, number of columns, html version, and press a button. Presto, a CSS template for your page.
  2. Inknoise: The layout-o-matic: fill out the form and out pops your CSS.
  3. Strange Banana: Simply refresh the template generator until you get the style you like, then save the page which has your CSS embedded in the header.
  4. Nidahas: A CSS-based form template.
  5. Maketemplate: A PHP – HTML – CSS template generator for two column layouts.
  6. IBDjohn: CSS template generator for three column layouts.
  7. TemplatR: Another easy CSS template generator.
  8. PsycHo: Your own psychogenesis, your own web design template.
  9. Firdamatic: Tableless 2 or 3 column layout generator.
  10. WordPress Theme Generator: Online generator creates custom unique WordPress themes.

Blog Themes and Templates

Designing blogs has become so popular as a subset of web design that we thought they deserved their own separate section. In this section, we highlight some of the best open source weblog template sources.

  1. SmashingMagazine: 83 Beautiful WordPress Themes You (Probably) Haven’t Seen
  2. Kaushal Sheth: Elegant WordPress themes.
  3. ErraticWisdom: Textpattern templates
  4. Scribez: 10 Best WordPress Templates.
  5. pinkdesign: Free diary / blog templates
  6. Textgarden.org: The official site for themes designed for Textpattern.
  7. Blogger Templates: A collection of Blogger templates on a wide variety of themes.
  8. Blogfashions: A collection of free Movable Type compatible blog templates.
  9. FinalSense: High-quality templates for Blogger.
  10. WP Themes: WordPress themes all designed by Sadish Bala.
  11. Drupal Theme Garden: Showcase of themes available for Drupal 4.7x and Drupal 5.x.
  12. Weblog Design: A small number of high-quality weblog templates.

Like this post? Stay up to date by Subscribing to our Full RSS Feeds


Other People Who Read This, Also Read

Post-Plugin Library missing

Reader Comments

  1. devnic - July 18th, 2007

    Wow! What a nice collection. I won’t say it is something absolutely new listing but my appreciation for making an effort to compile all these together in one page.
    Thanks

  2. Ian - July 18th, 2007

    I agree, great effort. There are some I haven’t seen before.

  3. Will - July 19th, 2007

    Nice collection of resources there guys. Well done on taking the time to compile them all :D.

  4. sidquill - July 19th, 2007

    Just the tool I was looking for. It will save me alot of time an money.
    Thanks sidquill

  5. Sudar - July 19th, 2007

    A very big and nice collection. Will be definetely useful. Thanks for your time.

    Cheers,
    Sudar

  6. Lance - July 19th, 2007

    Love the list! My personal favorite is http://www.free-css-templates.com. Thanks!

  7. Riz - July 19th, 2007

    omg! what a great list. thanks for sharing.

  8. Jake - July 19th, 2007

    Great job! thanks!

  9. MC - July 19th, 2007

    Thanks for the CSS tools and generators, those are very helpful.

  10. Doug - July 19th, 2007

    Thanks, great tools

  11. deadairspace - July 19th, 2007

    Nice! You should add aptana for Open Source Web Design Programs.

  12. Balamurali - July 19th, 2007

    Good collection. Keep up the good work!

  13. 10668844 - July 19th, 2007

    Thank you for the effort, you’ve just made my life a lot easier. THANKS.

  14. Blake Brannon - July 19th, 2007

    Nice post. Thanks!

  15. Crack Jack - July 19th, 2007

    nice collection dude.

    Thanx

  16. Rectal - July 19th, 2007

    Wow thanks for that great list. There is a nice one at rectalwart.com

  17. Marc - July 19th, 2007

    Excellent list dude, I look forward to using it frequently over the next few months!

  18. TV Online - July 19th, 2007

    Great compilation.

  19. Arthur Browning - July 19th, 2007

    Site looks good – and this is quite a post. Happy to mention in my blog.

  20. 100 Open Source Web Design Tools, Resources, and Template Repositories at treelimb.org - July 19th, 2007

    [...] templates, and code sources–that can save you time and money while designing web sites.read more | digg [...]

  21. George - July 19th, 2007

    Very useful list. I will have to let others know about it and go bookmark it…

  22. Jake - July 19th, 2007

    OSWD is great and I still recommend people to it often (I make my own templates most of the time now), but unfortuanetly it is no longer being updated.

  23. Web Design Strategist - July 19th, 2007

    This is a great collection.

  24. celsius - July 19th, 2007

    excellent resource… thanks for putting this together.

  25. Aaronontheweb - July 19th, 2007

    Great list!

  26. mosh - July 19th, 2007

    Really good collection
    bookmark it :)

  27. Free iPhone - July 19th, 2007

    Excellent resources! I’ve been on the lookout for most of these, so thanks.

  28. Scott - July 19th, 2007

    Great job! This will help a lot of students and burgeoning designers who cannot afford the initial cost of something like Dreamweaver or Photoshop.

  29. Tucows Services » Tucows Developer Blog > Blog Archive » Open Source Design Tools, Resources, and Template Sources - July 19th, 2007

    [...] There are many directories for open source code, but few for open source site designs and templates. DesignVitality is looking to fill that void with their list of titled The Open Source Web Design Toolbox: 100 Tools, Resources, and Template Sources. [...]

  30. Mario - July 19th, 2007

    I’ve used a few of these resources in the past for paid projects. It’s a good place to start if you’re stuck for ideas.

    As far as editors go, open source programs are sometimes better than their counterparts; Bluefish for example is great for editing HTML, CSS, PHP and Ruby code.

    great post – keep it up!

  31. Open Elements » Blog Archive » Open Source Toolbox for web designers - July 19th, 2007

    [...] The Open Source Web Design Toolbox: 100 Tools, Resources, and Template Sources [...]

  32. Honeycut - July 19th, 2007

    Man I never comment on blogs. But this list is freakin’ sweeeeet.

    Thanks mate.

  33. Friday's Links - Volume VIII :: Jatecblog - July 19th, 2007

    [...] The Open Source Web Design Toolbox: 100 Tools, Resources, and Template Sources – DesignVitality [...]

  34. Luigi - July 20th, 2007

    Nice list. Real good work.

    I’m missing the famous YAML css layout

    Tanks
    Luigi

  35. Web Templates Blog » Blog Archive » Design Vitality Delivers - Web Design Toolbox: 100 Tools - July 20th, 2007

    [...] The Open Source Web Design Toolbox: 100 Tools, Resources, and Template Sources – “The open source model has, over the last 20 years, proven that collaborative development is one of the best ways to incorporate the newest ideas and latest concepts into design. . . which began with programmers, has been so successful that it is currently being applied in government, media, education and private business. But despite these new applications, the unique combination of the open source model with the universalism of web design remains one of the ideal applications of open source. This pervasiveness of the open source spirit in web design now means that you can use open source software to design both graphics and your CSS and HTML, and you can also use the dozens of reliable open source code resources or thousands of templates to base your own designs on. In this article we highlight 100 open source web design tools, resources, and templates. [...]

  36. Taff - July 20th, 2007

    Just in case it hasn’t been said before:
    Great list, thanks for your time!

  37. 100 Open Source Web Design Tools, Resources, and Template Repositories - July 20th, 2007

    [...] templates, and code sources–that can save you time and money while designing web sites.read more | digg [...]

  38. Devlounge | Friday Focus #37 - July 20th, 2007

    [...] – The Open Source Web Design Toolbox: 100 Tools, Resources, and Template Sources List seem to be ever popular on Digg. Check out this list of 100 tools, resources, and templates [...]

  39. OerHeks - July 20th, 2007

    super lijstje met onmogenlijk veel oplossing ..

    [translate]: super list with impossible to count solutions

    thnx thnx again

  40. Malevi4 - July 20th, 2007

    Great collection! Thanks!

  41. Chris - July 22nd, 2007

    Thanks for sharing the list, I’d actually not visited OSWD in ages, I have o say they’ve done some great work turning the site around, it used to be 2000 templates, with the same layout just varying the colour scheme… often done by a colour blind monkey.

  42. Alex - July 22nd, 2007

    Awesome list!

  43. web design manchester - July 23rd, 2007

    Great resources, thanks for putting this together – Bookmarked!

  44. iddaa - July 23rd, 2007

    Nice color variation..

  45. Toronto Web Design - July 23rd, 2007

    This is a great collection of web related articles and sites. Very useful!

  46. Max Design - standards based web design, development and training » Some links for light reading (24/7/07) - July 24th, 2007

    [...] The Open Source Web Design Toolbox: 100 Tools, Resources, and Template Sources [...]

  47. savas - July 24th, 2007

    very good resource.

  48. MyWebResource » The Open Source Web Design Toolbox - July 25th, 2007

    [...] Read more… [...]

  49. Alice Barens - July 26th, 2007

    This is greate list. Thanks!

  50. sewmyheadon - Web Design Tips » Open Source Web Design Toolbox - July 26th, 2007

    [...] This cool post on Design Vitality lists a bunch of sites and tools for website designers including: [...]

  51. Eric Amundson - July 26th, 2007

    Thanks for posting such a splendid collection of tools and resources! Keep up the great work.

  52. 11amDesign - July 26th, 2007

    Nice collection of online tools. I will use some of these for my next web design.

  53. iddaa - July 27th, 2007

    As far as editors go, open source programs are sometimes better than their counterparts; Bluefish for example is great for editing HTML, CSS, PHP and Ruby code.

    thanks.

  54. Harvey Ramer - July 29th, 2007

    Thanks for doing the research and putting together a list that reflects the current state of open source software and development resources!

  55. Satellite Dish - August 12th, 2007

    Wow this list is great..I’m gonna stop lookin at all the other sites and stick to this…Its ALL that I need….to put me to…you know the rest

  56. SmashingMagazine - Best of July 2007 | Best of the Month - August 13th, 2007

    [...] The Open Source Web Design Toolbox A collection of over 100 references to open-source CSS-Templates, tools, services and WordPress-themes. [...]

  57. Mac-Sage.com - August 14th, 2007

    Great post. This is an excellent resource for folks who need to get a good start on a web design for their project.

    Thank you!

  58. ptamaro - August 15th, 2007

    Thank you!

  59. Sally - August 20th, 2007

    Thanks for such usefull information. Really, it’s very helpful.

  60. Jermayn Parker - August 23rd, 2007

    cool list.
    I personally prefer to code my own work but will keep in case i need to do some rush jobs.
    btw added to my post about useful web tips and tools (http://germworks.net/blog/2007/08/08/my-top-web-development-tools-tips-and-resources/)

  61. Heihachi - August 30th, 2007

    thanks

  62. web2design - September 11th, 2007

    nice~
    I come from China, and learning ” DIV + CSS “
    my website: web2design.cn

  63. mirc - September 12th, 2007

    mirc
    thanksss

  64. steve Mac - September 24th, 2007

    I applaud the effort.Well i will check whole your list it worth checking and like the colour combination and above all thanks for the time.

  65. nala - October 1st, 2007

    Nice Site!

  66. sohbet - October 6th, 2007

    very good resource.

  67. Peter - October 9th, 2007

    Great list

  68. mirc - October 11th, 2007

    cool job

  69. forum - October 14th, 2007

    thanks

  70. Paul - October 18th, 2007

    BOOKMARKED! This will be a bunch of tools that i might be requiring. You might want to take this url for added reference.

    ajaxflakes.com/web-design/now-you-can-code-css-like-a-pro-with-these-101-awesome-css-resources

  71. 010firm - October 23rd, 2007

    Your site is interesting, I will visit every day.Thanks

  72. marcog - October 29th, 2007

    Great Collection. Cool job. thanks

  73. Internet Marketing Blog - November 3rd, 2007

    Fantastic! I wish I would have found this sooner!

  74. Direct Download Center - November 3rd, 2007

    Great list! nice collection. Thanks for your time.

  75. Famous Stars and Straps Layouts - November 4th, 2007

    Great resource, thx!

  76. Neil - November 5th, 2007

    Great article and a very good list of resources. Some work has gone into this !

  77. Garchoun - November 5th, 2007

    Great resources thanks, :)

  78. Larry McCann - November 7th, 2007

    I am very impressed with the list of great of template sites. I love templates, this is going to keep me very busy for a long time. Thank you for all time and effort you have put into this list of template sites.
    Thanks
    Larry

  79. Create A Website For Free - November 16th, 2007

    Mustafa,

    Just had a look at some of those fantastic website designs. Can’t believe that they’re all free as well.

    Thank you so much for sharing them with us.

    Kind regards.

    Anthony Marquis

  80. forum - November 27th, 2007

    Great resources thanks

  81. Lailachristina - December 2nd, 2007

    Wow super site! Thanks :) I have you bookmarked now.

  82. Olaf - December 4th, 2007

    Great list, thanks for sharing (stumbled and bookmarked)

  83. myrize - December 25th, 2007

    I applaud the effort. Well i will check whole your list it worth checking and like the colour combination and above all thanks for the time.

  84. Ryan the New Zealand Website Designer - January 2nd, 2008

    Some great sites, I found OSWD a very useful resource it has a number of nice designs and everything is free!

    Nice post

  85. Web Designer Group - February 19th, 2008

    Very nice tools. Thank you for gathring such huge information.

  86. pradeep - February 29th, 2008

    Hey thanks a lot. so cool. lots of useful info. By the way, the link for GIMP is GIMPshop.com rather than gimpshop.net. please change accordingly. it will be useful to all others

  87. Business Financing Guru - March 1st, 2008

    A great help for small businesses tools like these can be. I wonder if the CSS tools are in the order you’d recommend them in too? Thanks!

  88. mirc - March 2nd, 2008

    nice collection dude i like it!

  89. Amazing Wordpress Themes - March 3rd, 2008

    This is an impressive list, I cannot believe there are sites here I have never heard of. Some of them have some of the best resources I have seen in a while.

  90. atm multimedia - April 10th, 2008

    This is an impressive list, thanks for sharing. There is some great inspiration

  91. nulled - April 12th, 2008

    wonderfull wordpress themes,thanks

  92. Jon - April 14th, 2008

    very nice list. Thank you very much. Some of them give me very big help.

  93. muhabbet - May 25th, 2008

    thanks..

  94. Bob Smith - June 16th, 2008

    Some great ideas, thanks for the article, without templates we would struggle with ideas!

  95. DataCard ID Printers - June 16th, 2008

    those tools are really helpful and most of them are simple to use

  96. Rajeev Verma - August 2nd, 2008

    Liked the resources. Good one. Thanx

  97. Volkan - August 5th, 2008

    Good collection. Keep up the good work!

  98. Cesme Otelleri - August 10th, 2008

    some wonderful wordpress themes, thanks

  99. Frank - August 13th, 2008

    nice article and some quality links – bookmarked !

    one more to add (a css optimiser) – cssslick.co.uk

  100. atama - August 15th, 2008

    Very nice tools. Thank you for gathring such huge information.

RSS feed for comments on this post. TrackBack URI

Leave a comment

Your e-mail address will be kept private. HTML is not allowed.