digg

Join DiggAbout

Discover the best of the web!
Learn more about Digg by taking the tour.

12 Basic CSS Templates

mitchbryson.com — These templates are intended to be a starting point for your own designs, they aren't in any way meant to be an actual website design.

Bury
show profanity settings
expand all
  • hpkomic, on 10/12/2007, -4/+14Simple and effective layouts, I have a lot of friends who ask about CSS, this should help them out.
    • ptFoe, on 10/13/2007, -4/+85Stop bragging about how many friends you have.
    • justinm1, on 10/12/2007, -4/+6These are nice, but do most people use these for generally static content? I'd like try something like this instead of a CMS package (less complexity), but how do people handle the content end? I'm speaking as a n00b...
    • duckedtapedemon, on 10/12/2007, -0/+3Just make individual html files if your not using a cms
    • KillerJ59J, on 10/12/2007, -2/+3justinm1, the people these are intended for aren't 'n00bs.' These layouts are meant for people who want to use CSS and be standards compliant. 'n00bs' don't really care and could find compete templates or just use tables. You don't need a CMS at all, but you probably should learn CSS/HTML..

      btw, these are great templates. I think I may learn a thing or two when I get a chance to look the code over. Thanks.


      --Are the download links broken for ya'll, also?--
    • justinm1, on 10/12/2007, -0/+3Fair enough (I can find my way around CSS, so I guess I'm not a pure "n00b"), but I guess I'm wondering how people who go this route handle content, apart from directly updating HTML files.
    • ductions, on 10/12/2007, -0/+2@justinm1

      Other than making individual html files; a lot of people use software such as Textpattern, or Word Press, where the structure of their sites can be easily styled using the CSS section of the admin area.

      Read about separating style from content and structure.
  • haxorjoe, on 10/12/2007, -1/+9These are great for a website noob like me!
  • Dementual, on 01/27/2008, -1/+10Download links seem to be dead.

    Aw.
    • suicidal-kid, on 10/12/2007, -0/+3Just download them all. On the top of the page linked to.
    • codenexus, on 10/12/2007, -6/+2I second that no downloads... you are all going to have to view the css manually and download the source code... :)
  • stalefries, on 10/12/2007, -0/+1Very nice, especially for someone just getting into css/xhtml/etc.
  • iFrank, on 10/12/2007, -1/+1Links are dead, but these look nice.
  • Gzero, on 10/12/2007, -0/+6These layouts are pretty good. They're semantic, and have different stylesheets for screen and print. The guy that made these did a thorough job.

    I just don't like how the doctype is xhtml 1.0 transitional. I don't like any of the transitional doctypes, sites should've stopped being transitional years ago.
    • rodrigo74, on 10/12/2007, -0/+2This is usually to avoid IE6 getting kinda funny
  • mrwiggl3s, on 10/12/2007, -15/+1Cant download

    Also, how do i make it frames? OR is it already there
    • Gzero, on 10/12/2007, -0/+4You can just look at the source code for the example pages.
    • Th0Rr, on 10/12/2007, -0/+15"how do i make it frames?"

      you don't
    • NanoStuff, on 10/12/2007, -0/+12"how do i make it frames?"

      *gasp*
    • Agret, on 10/12/2007, -0/+7Frames? This isn't 1996.
    • grammarpolice, on 10/12/2007, -0/+5Haha your funnnny. . . Frames.

  • firehydra2k, on 10/12/2007, -1/+10The three column ones kinda look like headless bodies...
  • SkreamNet, on 10/12/2007, -0/+4The download all link on the main page works.
  • thesimo, on 10/12/2007, -1/+6they dont work right in Firefox

    u need a break with clear all in there
    • wingnut21, on 10/12/2007, -0/+1*snort* I noticed that on the website itself: content overflow. Seriously, who doesn't check firefox?!
    • brendanc, on 10/12/2007, -0/+3Actually, it's clear:both; and no, you can just apply it to the element right above where you'd put the extra div with the clear class (or inline style if you prefer).

      What I do is make a global class...

      .clear {
      clear:both;
      }

      and just add class="clear" to whatever element i need to. if you want to add multiple classes to an element, you can do something like class="class1 class2 class3"

      just my 2 cents
  • Nick22, on 10/12/2007, -0/+1This is great. Im mostly a programer, not a designer (though I am getting better), and I often have trouble getting the basic layout to work properly. Def bookmarking this
  • rYno, on 10/12/2007, -0/+9I like how on his main page, the bottom of the page doesn't fully enclose the last row of images... makes me wonder about his 'templates'
    • SkreamNet, on 10/12/2007, -0/+2I noticed that as well, but if anything this should be nice to look at to get a grip on this kind of layout without tables. After all, fixing something that's broken is a good way to learn it.

      It only happens in firefox though. In internet explorer the box encloses all the content fine.
    • tetsuya, on 10/12/2007, -0/+1It is not broken in IE.
    • se7en11, on 10/12/2007, -0/+1You should just be able to add "background: #fff;" to those image styles and it should look right.
    • galen, on 10/12/2007, -0/+1exactly what i was thinking
  • jtrost, on 10/12/2007, -0/+4The multicolumn layouts seem to be missing the option of each column having equal height.
  • synorgy, on 10/12/2007, -2/+2effing awesome.

    Saves me a bit of trouble.
    Dugg.
  • jcaino, on 10/12/2007, -0/+2@justinm1

    you would have to use php (or asp) with a MySQL (or msSQL or pSQL) backend to generate dynamic content
  • seanmc303, on 10/12/2007, -1/+6My favorite part of this page is how the CSS is broken at the bottom of the page so that the last 3 layouts overflow the content container. Makes me want to trust this guy for my CSS ;)
    • markus941, on 10/12/2007, -0/+1The templates are definitely not browser compatible. It should be titled "12 ***** CSS templates". I'm sorry but if you purport to be a resource, you should be a good resource.
  • TheOther1, on 10/12/2007, -1/+3You should also check out http://www.csszengarden.com/ Some amazing examples of CSS
  • fullphaser, on 10/12/2007, -0/+5I really just wish that CSS had better vertical support, these simple templates exemplify how difficult it can be for CSS to handle vertical columns
  • legioss, on 10/12/2007, -1/+1can't download it for some reason
    • tetsuya, on 10/12/2007, -0/+0I was able to download a zip file, which contains everything, from "download all templates" link at the top of the page. But, for some reason, I couldn't save it directly to my hard disk. I had to download it to WinRAR and extract it.
  • allcdnboy, on 10/12/2007, -0/+0nice resource. I know quite a few people that are trying to learn this stuff ...
  • rcktwnmad, on 10/12/2007, -0/+1really wish these were more barebones. i dont need half of whats in there just to start working on a site. one html and one css will do me fine thanks.
  • mrkebi, on 10/12/2007, -0/+0good! Thanks.
  • SSYe, on 10/12/2007, -0/+3The last ones look almost human
  • pmclinn, on 10/12/2007, -0/+1A good starting point for CSS can be found @: http://www.w3schools.com/css/css_intro.asp. These templates are good.
  • omoimasuyo, on 10/12/2007, -0/+0This was a worthwhile article to read. It will definitely give me more than a few ideas for where to start a future design. I don't know that I will download them all (thought about it enough), but I will definitely pass a link that way when I see it.
  • adolfojp, on 10/12/2007, -0/+2CSS templates that look like headless robots! Thanks Digg! :-P
  • tybris, on 10/12/2007, -1/+1Meh, more boring CSS layouts. Why does no one create something useful, like nice looking text (p, h1, pre, etc..) styling?
  • buya, on 10/12/2007, -0/+0how did this get so many diggs? poo
  • linuxinit, on 10/12/2007, -0/+0Honestly... These aren't that great, and from looking at some of the other sites that this guy has done, I would never ever use these templates.

    Plus, I've already made my own barebones css and xhtml files... They don't contain styling either, like this guy's. This guy has a good eye, but his design skills just aren't up to par. On his other layouts, there are things like overflowing text, inaccessible menus, images sticking out of divs, etc...

    To the guy that said 'Meh, more boring CSS layouts':
    These aren't supposed to be layouts, but barebones templates to start from. The problem is, these aren't barebones, they have styling and such. My idea of barebones is a site structure something like:

    wrapper
    -header
    --nav
    ---ul
    ----li
    -----href
    -sidebar
    --ul
    ---li
    ----href
    -content
    --item
    ---h1
    ----p
    -footer
    --ul
    ---li
    ----href

    And of course, empty meta tags, empty title, etc... and then a CSS file with all of those elements defined, but with no styling applied. Doing this alone saves you loads of time, since just about every layout is the same at its core. I guess barebones is a bad way to describe it... more like... skeleton.

    These 'templates' aren't that great, and if they can get 1500 diggs, I can't help but wonder what some better ones would get. ;)

    All in all, these 'might' be decent, but he needs to strip all of the styling...
  • mbryson, on 10/12/2007, -0/+0Thanks for the comments, These templates weren't actually meant to be this widespread but since they are I've updated them to work properly (the links also work now). and i'll upload some new ones without any styling later.

    as for the rest of my work, sorry you had to see that ;-) all the URL's on there are 3+ years old so i might have to update that now too!
  • monjurul, on 10/12/2007, -1/+0Great work Mitch! I took the liberty to convert one of those templates into a WordPress theme, if anyone is interested:
    http://blog.mdolon.com/2007/01/get-this-theme/
  • edjackk, on 10/12/2007, -0/+1Hey Monjurul, the link is broken...
  • loxi, on 10/12/2007, -1/+0http://www.design-sites.net
  • infinityanant, on 04/26/2008, -0/+1thanks digg for finding this missing link for me.

    i was looking for it for 1hr.
  • xpirtdesign, on 07/18/2008, -0/+0good stuff. saves time.

    http://www.xpirtdesign.com
  • aleks2008, on 08/10/2008, -0/+0Great templates. Thank you.
    http://www.webdco.com/
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.