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

  • Joshua Johnson

    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!

  • Joshua Johnson

    And… they’re back :)

  • http://www.sabordesigns.com Michael Murdock

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

  • http://www.oxzenmedia.com Custom Website Development

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

  • http://www.howtoaustralia.com.au/ Justin

    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.

  • http://usabilitysense.com Shawn West

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

  • http://phpsymfony.com Guillaume BRETOU

    Thanks for this list !

  • http://www.masroorkk.com KK

    Nice Collection. Can be time saving

  • Abdullah

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

  • http://www.goldplateuk.com bournemouth

    I’m lazy so these suits me fine! thx

  • Devi

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

  • http://www.kenyawebsitedesign.com job ballard

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

  • Pingback: 715 simples y gratis layouts de css | Diseño web Colombia Macromedios()

  • Pingback: CSS Brigit | 715 Awesomely Simple and Free CSS Layouts()

  • Pingback: [CSS] 715 Awesomely Simple and Free CSS Layouts – レイアウトのネタ帳まとめ - mBlog()

  • Pingback: links for 2010-08-25 | The Good Designs()

  • Pingback: Desenhos (Layouts) em CSS gratuitos()

  • http://www.torbalscales.com ddeja

    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.

  • Pingback: Cientos de Layouts en CSS gratuitos()

  • http://www.92pixels.com Arslan

    Thanks for this stuff

  • http://www.gmbhnews.com mobile news reader

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

  • Pingback: 715 Awesomely Simple and Free CSS Layouts | shiplogs()

  • http://datosalud.com Jose Bustos

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

  • Pingback: 715 Awesomely Simple and Free CSS Layouts | HOOOON()

  • http://blogs.volstate.edu/webmaster/ Derek Pennycuff

    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.

  • Pingback: 715 sencillas plantillas de CSS gratis | Güebstudio.blog()

  • Pingback: Adam To Atom » Blog Archive » 715 CSS Layouts()

  • Pingback: 715 Layouts CSS | Alex Aguiar | Diseñador Web Freelance()

  • Pingback: 715 Increíbles plantillas CSS gratis()

  • Pingback: Webification Mashup 30-Aug-10 | Webification()

  • Pingback: Anonymous()

  • http://www.rodescodesign.com David

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

  • http://mensajes-claro.com mensajes claro

    Great collection i love it.

  • http://www.Zylun.com Website Outsourcing

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

  • http://chreissteurer.wordpress.com Chris Steurer

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

  • Pingback: Más de 700 Layouts en Css | El Blog de Sol()

  • http://www.merjj.com Sarah

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

  • gilles testard

    Thank you that will help me!!

  • suludi

    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!!

  • Pingback: Shared on FAQPAL.com()

  • http://www.zopimlivechat.com Zopim Live Chat Software

    This is for the newbies. Great collection!

  • http://www.zylun.com/ IT Outsourcing

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

  • http://www.hashimkhan.com/ Hashim

    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.

  • Pingback: Plantillas CSS | CMSTECNO()

  • http://gnrsu.com G.N.R.S.U

    I like simple css editor better !!!

  • Pingback: 700 Layouts gratis en CSS()

  • Pingback: 700 layouts gratis en CSS - Vgroup Network()

  • Roger

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

  • http://jitendra-shah.co.uk Jitendra Shah

    Nice collection of layouts!

  • http://www.solo2clic.com mensajes claro

    715 Awesomely Simple and Free CSS Layouts Design Shack

    Muy buen articulo!. Gracias por la informacion.

  • http://www.quizzes.net quizzes

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

  • http://tutohost.com tutohost

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

  • http://www.accuratesensors.com rajdeep

    great stufff

  • Footers

    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.

  • http://www.moradabadyellowpages.com Moradabad

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

    thanks again

  • lizzy

    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

  • Zack

    Helped alot! Keep up the good work..

  • neda

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

  • Pingback: CSS Layouts « S-Man Designs()

  • Pingback: 715 Awesomely Simple and Free CSS Layouts | Design Shack | The Sorato's Blog()

  • Pingback: Techno HungamaHow Do You Design Your CSS Layouts? | Techno Hungama()

Subscribe

Membership
About the Author