Free CSS Layouts And Templates

Advertisement

As a web-developer you don’t have to re-invent the wheel all the time. If it just has to work, and has to be valid, and has to have a nice, visually appealing design hierarchy, you just can use css-techniques developed in the web-dev-community over the last few years. If you take a look around, you’ll find many templates, which include basic (X)HTML/CSS-markup.

You can start from there, learning and exploring the possibilities of CSS and modifying templates for your exquisite taste. Below you’ll find a list of resources which offer free, gorgeous and valid CSS-based templates – usually with images and full layout structure, such as headers, navigation bars, content containers, sidebars and footers.

Usually developers require a link to the site where the template was downloaded from. So before using these templates it might be useful to take a look at the license agreement the developer provides. Links checked: July/13 2010.

(X)HTML- and CSS-Templates

Footnotes

  1. 1 http://opensourcetemplates.org/
  2. 2 http://www.oswd.org/
  3. 3 http://www.oswt.co.uk/
  4. 4 http://maxdesign.com.au/presentation/page_layouts/
  5. 5 http://www.cssplay.co.uk/layouts/index.html
  6. 6 http://www.stuffandnonsense.co.uk/archives/changingman_layout.html
  7. 7 http://www.mollio.org/
  8. 8 http://www.sixshootermedia.com/free-templates/
  9. 9 http://developer.yahoo.com/yui/grids/#available-templates
  10. 10 http://templates.arcsin.se/
  11. 11 http://css-discuss.incutio.com/?page=ThreeColumnLayouts
  12. 12 http://www.intensivstation.ch/en/templates/
  13. 13 http://www.cssfill.com/
  14. 14 http://www.dynamicdrive.com/style/layouts/category/C11/
  15. 15 http://www.ex-designz.net/template/tempcat.asp?cat_id=13
  16. 16 http://www.code-sucks.com/free-css-templates/
  17. 17 http://www.jimmylin.info/templates.html
  18. 18 http://blog.html.it/layoutgala/
  19. 19 http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
  20. 20 http://www.solucija.com/home/css-templates/

↑ Back to topShare on Twitter

Co-Founder of Smashing Magazine. Former writer, web designer, freelancer and webworker. Sven is now writing Science Fiction Stories.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1
  2. 2

    Amazing resources! Well Done!

  3. 3

    Thanx for all the usefull links again :D

  4. 4

    Love you guys! And blogged about you a few times in the last few months. Keep it up!

  5. 5

    I’m using CMS in my Macromedia 8 -it’s really cool.
    I like it thank you for article ;-)

  6. 6

    Jaime Silva | Publicidade e Multimedia

    February 23, 2007 10:56 pm

    Nice Blog.
    Interesting to see how the web design 2.0 have so much sucssess.

  7. 7

    I love(not like) love these! The ones at Dynamic Drive are exactly what I’ve been looking for. I wished I would have found this before I designed the site I just finished up! Arg…!

  8. 8

    These are relly very good. i like them most

  9. 9

    nice weblog & nice job
    very thanks…

  10. 10

    good article

  11. 11

    These are relly very good. i like them most

  12. 12

    Well Done!
    These are relly very good. i like them most.
    Thanks ;)

  13. 13

    Thanks for very interesting article. Can I translate your article into polish and publish at my website?
    I will back here and check your answer. Keep up the good work.

  14. 14

    So here is a question. Can a CSS layout be built to be as follows.

    3 columns plus header (and even footer) where the right hand column extends to the top of the page, i.e. top of right hand column is equal to top of header.

    I have looked at LOTS of the CSS Layout around on the net and have yet to see this – is it not possible?

    .m
    p.s. Thanks for a great site.

  15. 15

    CSS Template Gallery
    The site includes a search function, however it includes only 32 templates.

    On the page, the link to the CSS templates is the same address as the link to the home page itself, and it takes you nowhere. Is it just me?

    I really wanted to review these templates, but it was a hassle opening the pages through the Google translator.

  16. 16

    NICE

  17. 17

    Thanks another great resource and something to learn

  18. 18

    Klein George Kamau

    August 16, 2008 5:31 am

    ya, already available in deramweaver cs3. lol

  19. 19

    These are relly very good. i like them most

  20. 20

    Useful, thanks.

    I tend to use the same CSS stylesheet on most of my projects, then strip it down and tweak it til its lean and great looking.

  21. 21

    rely very good

  22. 22

    very nice collection. thanks a bunch.

  23. 23

    I’ve seen a lot of CSS Layouts around but I think the Yahoo Interface Library Core CSS is one of the better ones.

  24. 24

    very good, thanks

  25. 25

    These are very good and can be easily implemented on sites. Thanks for this post.

  26. 26

    Wow… Wonderful Links.

    Thanks for the links. SEO Services

  27. 27

    Great list… Some ideas I used on my page

  28. 28

    Nice ;)

  29. 29

    hoş temalar

  30. 30

    hi my name is alex and im bored in my computer class

  31. 31

    Daniel Errante

    June 4, 2009 1:18 pm

    Great list of resources, will save designers hours of time now that all of this is in one place!

  32. 32

    great list… and template details… i need more templates for training… and need css based design for …. 22 website design

  33. 33

    great site..im looking for a cool css layout..does anyone know where i can find one?

  34. 34

    Thanks This is a big help to web designers everywhere.

  35. 35

    One of my clients wants the (textual) content on the right hand side to follow the contour of an ellipse. All suggestions are appreciated!

  36. 36

    Thank you so much!!!

  37. 37

    its a good content will help in ma web design
    thanks

  38. 38

    I dont know what kinda page this is but in IE6, it only has one narrow columb on the left side. You would think a site like this could do better. :))

  39. 39

    I like this site very much. This is relly very good site for see and find nice graphic and web designing sources.

  40. 40

    Some of you might be interested in a free template I made. It has valid code, a decent design, portfolio page and a working contact form … all totally free. You can check out the demo on my blog: http://www.iamnatesmith.com/vibrantfoto-a-free-site-template/

  41. 41

    very good, thanks
    ill kepp ut on my site kolomensky

  42. 42

    Excellent resources. Thanks.

  43. 43

    very good inforamation

  44. 44

    very nice

  45. 45

    Happy to found this collection.

  46. 46

    Very informative…Thanks for sharing!

  47. 47

    thx a lot…
    really2 cool

  48. 48

    i love men oiled up

  49. 49

    Thanks! Here are 2 providers I usually get free nice templates from: WT and FTO …no link dropping…i’m just saying =)

  50. 50

    Nice list of template websites! You may want to check out or include this Free Templates website to your list as well.

  51. 51

    Wow, that’s really useful if i’m strapped for time. Thanks.

    If you’re interested in knowing how to create your own css layouts, go here http://hubpages.com/hub/CSS-position-with-float

  52. 52

    thanks a lot

  53. 53

    ya really cool

  54. 54

    hi dear

↑ Back to top