715 Awesomely Simple and Free CSS Layouts

by on 24th August 2010 with 61 Comments

screenshot

Frustrated with the quality of free CSS templates online but aren’t quite to the level of building your own? Tired of spending hours trying to customize lame pre-fab designs?

Today we bring you over seven hundred freely downloadable CSS templates that focus on providing you with only a basic layout to build upon. Using these cross-browser layouts you can avoid endless CSS positioning woes and focus on what you’re good at: design.

Who Are These For?

Many of you have been in the design game for years but are only now just beginning to create websites and code them by hand. You’ve got enough Photoshop skills to bust out a beautiful design and enough basic CSS knowledge to make the text look pretty.

However, the biggest problem that many new developers come across can simply be to get their basic layout to work in CSS. Positioning with CSS can be a lot trickier than basic styling, especially when you start to factor in multiple browsers. If you’re not sure about how to solve a problem, hours of tweaking can land you right back where you started, immensely frustrated and desperate for a little help.

The simple downloadable layouts below will provide you with a rock solid foundation on which to build your sites and provide great examples for learning how to create your own.

Why Not Full Templates?

If you run a quick Google search for free CSS templates, you’ll find a million. However, most of these aren’t ideal for real web developers setting out to create unique sites. What you typically get is something like this:

screenshot

Templates like this really force you in an ugly pre-established design that you either have to follow or spend hours pulling apart to try and customize. In the end it would’ve been easier just to code it yourself from scratch!

I think it’s much more useful to download a few super basic CSS layouts that are as simple as possible. This allows you to quickly prototype the layout for a page without wasting half your day sorting through code you don’t need. The typical layout in this category looks more like this:

screenshot

Here we don’t have any text or images to toss out, it’s just a bare skeleton ready for you to fill. Take a look at the great resources below to find all the basic layout templates you’ll ever need!

Primary CSS: 22 Layouts

“Primary is a simple CSS Framework, designed for Developers and Designers in order to make using CSS as easy as possible.”

screenshot

Little Boxes: 16 Layouts

An interesting collection of four basic layouts performed through a number of different methods.

screenshot

CSS Easy: 8 Layouts

A collection of four fixed and four fluid layouts aimed at teaching you the basics of CSS positioning.

screenshot

Max Design: 25 layouts

A solid collection of super basic templates many of which have accompanying tutorials so you can learn how it’s done.

screenshot

Iron Meyers: 224 Layouts

Definitely one of the best resources on the list. This site contains 56 basic layouts, each with four versions: 100% Fluid, 974px, 950px and 750px.

screenshot

Dynamic Drive: 47 Layouts

These CSS layouts are broken up into four categories: two columns, three columns, fixed layouts, liquid layouts and CSS frames.

screenshot

Intensivstation: 16 Layouts

A small but useful collection of XHTML 1.0 and CSS2 layouts.

screenshot

BlueRobot: 3 Layouts

Only three templates here but they’re solid and popular layouts that you’ll definitely want to check out if you need something basic.

screenshot

Matthew James Taylor: 7 Layouts

“No CSS hacks. SEO friendly. No Images. No JavaScript. Cross-browser & iPhone compatible.” These layouts also come with plenty of documentation to get you started.

screenshot

Free CSS: 252 Layouts

A whopping 252 CSS layouts that are sure to get you started on the right path. Quick to download and easy to customize!

screenshot

Code Sucks: 95 Layouts

Code Sucks has an impressive collection of free downloadable layouts featuring 53 fixed width versions and 42 faux column versions. Faux column layouts use a background image to make it look like the left and right columns are equal in height and independent of each other.

screenshot

Conclusion

Tearing apart the layouts above should teach you tons about CSS positioning in a much more practical manner than reading three books on CSS. Be sure to not just implement these templates but to really kick the tires and tweak the numbers to see how they work.

Leave a comment below and let us know if you found this post useful. Also be sure to share any other great resources that you use for basic CSS layouts!

Comments & Discussion

61 Comments

Comments & Discussion

61 Comments

  1. Joshua Johnson says:

    Note: It seems Code-Sucks has gone down! I took that screenshot this morning so hopefully it will come back up soon. Sorry for the inconvenience!

  2. Joshua Johnson says:

    And… they’re back :)

  3. This is great. Thanks for these, they will be really useful.

  4. Awesome collection of css layouts. Very helpful to have so many together in one place. Keep the collections and lists coming. Thank you!

  5. Justin says:

    http://www.960.gs/ – this generates you a CSS layout for whatever width you like and how many columns you like.

    Might be a useful addition.

  6. Shawn West says:

    Thanks for the great list! It’s nice to see the layouts without all the fluff.

  7. Thanks for this list !

  8. KK says:

    Nice Collection. Can be time saving

  9. Abdullah says:

    Thank you very very very much!
    you just made my life a lot easier!

  10. bournemouth says:

    I’m lazy so these suits me fine! thx

  11. Devi says:

    I agree that templates suck. This on the other hand is brilliant. Thanks for this – made my life easier.

  12. job ballard says:

    thanks for bringing code sucks to my attention, that was good stuff.

  13. ddeja says:

    Awsome stuff.

    I’m often using intensivstation website for clarification on how things are done.
    Just becouse sometimes we go too far with our creativity:)

    Cheers.

  14. Arslan says:

    Thanks for this stuff

  15. nice one, thanks for sharing this collection Abdullah, nice job.

  16. Jose Bustos says:

    En realidad nunca he usado Css pero me gutaria iniciarme en el tema alguien conoce un manual bueno…

  17. Oh man! Blue Robot and Little Boxes bring back some memories. Those 2, along with Eric Meyer’s CSS Edge ( http://meyerweb.com/eric/css/edge/ ) and Mark Newhouse’s Real World Style ( http://realworldstyle.com/ ) were essential to me learning CSS back in the day. I’m glad to see the tradition of openly sharing code and templates is alive and well nearly 10 years later.

  18. David says:

    Wow really great collection. Thanks for organizing in one easy resource!

  19. Great collection i love it.

  20. This is a great collection. Love the basic site layout which can be used for many different site designs. Thank you for sharing.

  21. Great collection! This is a lot better place to start with than using a full html template. Thanks for this.

  22. Sarah says:

    That’s great for starters :D
    Solves my problem.

  23. gilles testard says:

    Thank you that will help me!!

  24. suludi says:

    First of all i want to say thanks for this great collection,the only downside is that ironmeyers site is down for a last few days,so i am wondering if someone knows will it get back…they seem to have the finest collection of CSS layouts!!

  25. This is for the newbies. Great collection!

  26. Really simple layouts and very easy to edit i think. Thanks for sharing..

  27. Hashim says:

    Yes right said, either use the template as it is or design yours from scratch if ready made template does not fits your requirement, its more pain to modify it than building from scratch.

  28. G.N.R.S.U says:

    I like simple css editor better !!!

  29. Roger says:

    Muy interesante..y muy practico..me ayudaran mucho
    Gracias

  30. Nice collection of layouts!

  31. 715 Awesomely Simple and Free CSS Layouts Design Shack

    Muy buen articulo!. Gracias por la informacion.

  32. quizzes says:

    Thanks! this was much needed by me. Helps in creating simple layouts.

  33. tutohost says:

    really helpful this site. i am following this site to learn css template. thanks for sharing.

  34. Footers says:

    Please note: as far as I know, only Matthew James Taylor has created the perfect ‘keep the footer at the bottom of the screen, no matter how little content you have above it’ – and I doubt many, if any, of the other templates here, have that – in which case I wouldn’t bother using them until they implement it.

  35. Moradabad says:

    great ready to go wireframes of html and css these make my work easier than ever.

    thanks again

  36. lizzy says:

    You have no idea how much this helps me! I’ve been looking for a website with simple templates without all the extra add ons, and I’ve finally found it! <3

  37. Zack says:

    Helped alot! Keep up the good work..

  38. neda says:

    they r lovely.
    i just wanna use them in my project.
    thx

Leave a Comment

Subscribe
Membership
About the Author