Grow your CSS skills. Land your dream job.

Free Template: DocTemplate

Published by Chris Coyier

Little freebie template for ya'll today. It was actually Doug Neiner's idea, I ran with it, then he helped me out at the end tighten some stuff up.

View Demo   Download Files

Note

It's PHP. So if you download it to check it out, throw it up on your web server to test it out (or somewhere you run PHP locally).

Navigation

The navigation is all AJAX'd up using the jQuery .load() functionality. I just think it's kinda fun. It supports "deep linking", so if you were to link to this page with a hash-tag of a page (e.g. /DocTemplate/#parameters.php) , it will see that and load that page up.

If you were to use this template to document some kind of JavaScript thingy, it should be noted that when content is loaded in this way the JavaScript on that page won't be "active".

If you don't like or can't use the AJAX navigation, simply remove the two JavaScript <script> links in the file common/doctype-and-head.php. It will fall back to simply reloading the page to go to those pages, with current navigation highlighting fully intact.

And...

The index.php file has all the different text style stuff available. Not much, but just the typical hierarchy of header tags, code styling, emphasis/strong tags, links, callout class, etc.

There is a good bit of CSS3 stuff going on from rounded corners to drop shadows to :hover:after with generated content. It should degrade just fine though.

As with anything else on this site, feel free to use it for whatever you'd like, no attribution of any kind required.

Comments

  1. Permalink to comment#

    Thank you for the tamplate Chris i really enjoy it

  2. May be a nice little design for phpDocumentor.

  3. Matt
    Permalink to comment#

    This would be a great resume layout!

  4. Adam
    Permalink to comment#

    @Matt

    Exactly what I thought

  5. Permalink to comment#

    Thank you, it’s a nice design, and it works just fine except for one recurring thing when doing full Ajax sites… The Back and Forward buttons do not work (Safari, Chrome, Firefox, IE) although the hash tag changes the actual content does not.

    I have used the jquery history plugin for this issue before (http://plugins.jquery.com/project/history) but I still feel I do not have enough control and that is still a little confusing. Does anyone know a better plugin/thechnique for handling this?

    • Permalink to comment#

      You could look at SWFAddress :)

    • I’ve never had luck with the history plugin. Never heard of the SWFAddress thing but looks cool.

      If someone finds a way to get the back button working I’m all ears, I’ll update the demo/download.

    • Permalink to comment#

      Well, I just remembered that there is window.onhashchange in HTML5. It will work in IE8 and FF 3.6. When the user clicks the back arrow, the hash will change and we will fire the function to update the content and set the .active :)

    • Oooh that’s cool, that would be the progressive way to deal with it.

    • Permalink to comment#

      Well, the “normal” way of supporting the back/forward buttons is to have a JavaScript function that runs every so often (via setInterval) which keeps checking the hash to see if it has changed or not. To me this seems pretty ugly, though.

    • Krum Lozev
      Permalink to comment#

      Looks great!
      One more issue besides the back button:
      fixing the position of the left menu is – how am I supposed to browse it on mobile browsers? or how about netbooks with smaller resolution?

    • It’s a template, so you should adjust things as you deem necessary for the application you use it for. For example, unfix the navigation if you don’t like it. Or shorten it. Personally, I wouldn’t be too worried about people with tiny phone screens being inconvenienced by a site intended to document code (not a lot of people writing code on phones), but it’s a valid point for sure.

    • Permalink to comment#

      I think this nav history issue has been mentioned in a nettuts article How to Load In and Animate Content with jQuery.

      a commenter named Patrick (http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/#comment-2856) suggested a fix and revised the demo, which now loads the page content when you press Back. You might want to check it out.

      http://www.tigerofdoom.com/ajaxContent/howto.html

    • Gentlemen. what is this that does disturb you – I joined header, footer, navigation and index in one index.php and everything works fine even when I rename it index.htm.

  6. Permalink to comment#

    Nice template Chris.

    You should have people submit what they do with the template. Maybe a contest for best design. Just a thought.

  7. Permalink to comment#

    Very slow page scrolling in FF 3.5 =\

    • James
      Permalink to comment#

      doesn’t that happen on all sites with fixed backgrounds? (It’s the main reason I almost never use them!)

  8. Permalink to comment#

    I like the fixed menu concept and the overall design is really fresh.

    No back button will frustrate some users, so an elegant solution to that would be good if anyone knows of one.

    Also, the inline link text has a decoration:underline, which changes to a border-bottom when hovered, which looks a bit odd. It actually looks unstyled apart from the inherited font-family, so maybe that rule got deleted? An easy fix mind you.

  9. Permalink to comment#

    Thanks, you
    Is higher

  10. Permalink to comment#

    Very cool. I was actually looking for something similar so this will work out great. Maybe someone here will be able to fix the back button hash tags but if not, no biggie. Thanks a lot.

  11. Oh, this would make a great WP theme all on its own without all the AJAX and fixed-scroll stuff.

  12. Very good stuff. Thank you for sharing. This can come in handy.

  13. Thanks Chris,
    I have a couple of clients I could use this with.

    -Anthony

  14. Nice to see this released… after waiting on me for.. how long? Hope lots of people use it and change it to their needs.

    It is official. No developer has an excuse now to release a horrible website for their new plugin/software/whatever. They need this template and a few minutes to set it up.

  15. Mike Dedmon
    Permalink to comment#

    Hi All,
    Educational moment for me here…

    The script tag in doctype-and-head.php in this example contains, "....jquery/1.4/jquery.min.js?ver=1.3.2'"

    I know the new 1.4 version of jquery is out, but I’m not sure what the “ver=” does. Is it a compatibility thing, minimum version?

    I haven’t found the documentation on it… yet.

    Thanks!

    • Just ignore that and/or remove it from the doctype-and-head.php file. I think it’s just a weird mistake on my part, I have no idea where it came from and it doesn’t affect anything as far as I can tell.

  16. Azar
    Permalink to comment#

    It’s just awesome, i’m not going to use it for now, but one day… you’re great !

  17. Hi…
    This is really looks rocking…..best wishes

  18. Thank you for sharing this, I needed it terribly.

    I’ve used with a codecanyon submission, you can see it here.
    http://geek-like-me.com/simpleAdminPlus/

  19. Permalink to comment#

    Looks great. congratulations

  20. I like it. I could see this being useful for delivering a client presentation, especially on a projection screen.

    The only suggestion I can offer up in terms of design is perhaps to not use the horizontal gradient in the menu or instead use a different shade on the image’s right side to have the active menu item stand out a little more.

  21. Matt
    Permalink to comment#

    I think it looks pretty good. Two things irk me is that it doesn’t have a Deep linked address and it has that “lag” in Gecko browsers that Javascript-y sites usually do. Other than that, and no offense, I really don’t know what I’d use this for.

  22. Starboy
    Permalink to comment#

    First time poster, long time lurker.

    Chris, I would just like to say thank you for posting up all these screen casts and information. It always seems that when im working on a project or stuck on something, within that week you come out with a tutorial / cast that describes how to fix my problem.

    All in all I would just like to say hellova job your doing here, and Thanks..

  23. John Deerhake
    Permalink to comment#

    Sadly this doesn’t seem to play well with Lightbox. Just having the Lightbox JS files loaded makes this stop working. Any idea why?

  24. Grate stuff Chris love it just love it

  25. Excellent! Thank you for sharing.

  26. Stefan Sobering
    Permalink to comment#

    This is really sweet, Chris! I’ve got really nothing to document, but when I find something I will for sure use it! This is really cool!

  27. Awesome.. I like the scroll effect. thanks for sharing :)

  28. Sahan
    Permalink to comment#

    Thumbs up man ! Great..

  29. ttrusty
    Permalink to comment#

    Very cool! Thanks (…to Doug also).

  30. suej
    Permalink to comment#

    Great template – Looks super! Thanks for sharing this :-)

  31. looks great!

  32. Permalink to comment#

    Totally stole my idea for an article I’ve been meaning to write (already have the design finished and coded)! ;)

    Absolutely love the look of this, though. :)

  33. Looks like I might be using this for a theme options panel in wordpress. If/when I do, I’ll let you know. It looks awesome by the way :)

  34. Quick question – would it be easy to edit this so the content loaded is not a new file, but a different div in the main file?

    ie: in an index.php file there are four main divs: overview, terms, section, last.

    Would it be easy to hide the divs that weren’t “in view” and have them show only when clicked on in the nav?

  35. Yesterday I put it on my friend’s new domain. The site itself. It’s just rough beginning, but the template is very cool.
    It will be in Bulgarian only unfortunately.

  36. Permalink to comment#

    great template for small corporate websites. I am sure will use it someday for my clients! Thanks, Chris!

  37. Permalink to comment#

    Nice Bro… I Love that, you do the great job…

  38. Krum Lozev
    Permalink to comment#

    I am currently working on applying this template on a site (notabene-bg.org/beta/). Unfortunatelly i am kinda stuck with the content coming from TinyMCE’s Word-paste plugin and tables in some articles.
    You can have a look here:

    http://translate.google.bg/translate?hl=bg&sl=bg&tl=en&u=http%3A%2F%2Fnotabene-bg.org%2Fbeta%2Findex.php

  39. thanks! when I get a free millisecond will check this out.

  40. Permalink to comment#

    Hi Chris,
    Love the layout! I have a customer that is definitely going to benefit from this simple layout. The simpler the better!!
    Cheers.

  41. Very nice! Thanks for sharing this freely.

  42. Like it, could be used for a number of different purposes

  43. Anon
    Permalink to comment#

    Epic fail @ ie6 dude

  44. Krum Lozev
    Permalink to comment#

    I’ve been playing around your template all day yesterday and just decided to share something here. Might be useless for now but I hope some day I will find it some real implementation :)

  45. Permalink to comment#

    The only annoying thing is that the <title> is the same for each page. I’d suggest adding a variable for page title to each page, it’d look better :)

  46. Bert de Vries
    Permalink to comment#

    I really love this simple but very effective design. I took this idea and did a little project in wordpress. This is the rough version…
    Click

  47. Susana
    Permalink to comment#

    Thanks for this beautiful template.

  48. tim
    Permalink to comment#

    Lovely

    But how do you create a link to one of the pages in the menu from another content page in the same website?

    a regular href link does work but the menu doesn’t change to the according page

    • Hi,
      You unfortunately are right. I just wrote this.
      But the idea having just one menu to link you to all of your pages is amazing. Especially when you are writing site by hand and it contains 1500 pages.
      Best regards.
      Zarko.

  49. It is fantastic template, but unfortunately there are some bugs. If in the main-content I put a link to another page, nothing happens – I see the page on the bar but the page still remains the same.
    If i put URL – it reloads the page in the main content (page in page occurs)
    I combined all 4 pages in one .php and nothing wrong happened – it works.
    I used this template to -http://asiatbg.com – it is my friend’s new site for asian shepherds
    and a use it as a template as a training cms at http://asiatbg.com/1/if his wife wants to edit the site. In other words the template is that I call “very clean, very pure, and very attractive”. Trust me – I am impressed.
    Best regards to all.
    Zarko

  50. Permalink to comment#

    I have tried it in IE8 and the letters do not show very well after loading a new page with ajax and the animation. The letters look like deformed.

    Anyone has had this problem???

  51. Tareq Mahmud
    Permalink to comment#

    Very nice layout! Thanks for creating it.
    Can I use this for marketplace product like for themes created for themeforest?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".