Already a customer? Please sign in.

Twenty Twelve: Live demo

by Drew Strojny on July 6, 2012 / 53 comments

Screenshot of the Twenty Twelve WordPress theme

Working on the new default WordPress theme, Twenty Twelve, has been a very special, exciting, and humbling experience. We got off to a slow start earlier this year, but the pace has picked up significantly since then, and we’re now preparing to move the codebase back into WordPress core.

Live demo

We have a live demo of Twenty Twelve hosted over on WordPress.com!

Twenty Twelve isn’t finished yet, but all the major styling is complete. The goal was to design a clean, minimal, and responsive theme, with a focus on typography and readability. I think we met that goal and I’m really happy with where we are right now. Take it for a spin and let us know what you think.

Saying goodbye to Forge and Git

While I’m excited to see Twenty Twelve move back into WordPress core, I’m sad to stop using some of the theme building tools we love here at The Theme Foundry: Forge for developing WordPress themes in a tidy environment with Sass, and Git for easy and distributed version control. We’ll leave the Twenty Twelve Github repository up for posterity, but active development of the theme will soon move over to the Subversion powered WordPress Trac.

More to come

I still plan to pen a few more posts here detailing more of the design decisions and processes we went through during development of Twenty Twelve. Please do let me know if there is anything specific you would like to hear more about.

Update for contributors: All development is moving to the WordPress Trac and the code should be hitting core soon (hopefully next week!). In the meantime, please don’t open any Pull Requests over on Github.

Enjoy this post? Read more like it in From the workshop.

53 Comments

  1. Kim Parsell

    That is sweet looking! Should be very easy to develop child themes for it.

    Some of the images aren’t showing up on the demo on wordpress.com – image links show domain as wordpress.local. Just wanted to let you know so you could fix them. :)

    Thanks for all the hard work that’s gone into building Twenty Twelve!

  2. Toan

    I like the show navigation button when browsing on phones. Nice touch

  3. Nancy Seeger

    Beautiful! Can hardly wait for this to be released and make child themes from it. Any estimated time frame to completion?

  4. Brian Gardner

    Outstanding work Drew, really well done. Over the past year I’ve personally become a huge fan of whitespace and typography so I can really appreciate this. Props to you and the team!

  5. Drew Strojny

    Toan: Thanks! I have to give credit to Matt for kickstarting the discussion that lead to the mobile navigation show/hide.

    Nancy: Glad to hear you like it :-) I don’t have any specific details on the official release, but I would guess WordPress 3.5 at the latest.

    Brian: Thanks! We appreciate the support. Look forward to catching up at WordCamp San Francisco next month.

  6. Andras Guseo

    Simple, clean, beautiful!
    Can’t wait to work with it!
    Congrats to the team!

  7. Sue Surdam

    I love it! I can’t wait to start developing child themes for it. Thanks for everything.

  8. Badhan

    I am glad to see the Twenty Twelve theme. It’s amazing. But I personally like a full wide page theme. Can we have get this feature? Thanks.

  9. Drew Strojny

    Sue: Thanks! Glad you like it :-)

    Badhan: There are no plans to change the dimensions of Twenty Twelve, but I appreciate you stopping by and letting me know.

  10. Paul

    Hi Drew

    One question regarding the base font size, would you be able to share your thought on the use of rem unit ?

    Thanks for the great work !

  11. Drew Strojny

    Sure thing Paul, we went with rem’s because they provide more flexibility for the end user. The whole design will scale up nicely when you increase your browser font size setting. We also provided a pixel fallback for browsers that don’t support it.

  12. Aahan Krish

    Drew: Great stuff there. Can’t wait to use it on my personal site. But why is there no search box? Is this kinda intentional or the theme is not into that stage of development?

  13. Drew Strojny

    Good point Aahan. There is a search box, but I didn’t have it enabled in the sidebar. It’s enabled now :-)

  14. Anna

    Will custom link colors be included as they are with Twenty Eleven, or will we have to pay for the new Custom Colors upgrade that WP just started to offer?

  15. Drew Strojny

    Hi Anna. I’m honestly not sure if the link colors will be included yet, I don’t believe it’s been decided.

  16. Aahan Krish

    Drew: Ha! Was expecting it in the header like Twenty Eleven. Looks like I am gonna have to modify the theme, as I plan to go full-width blog-wide. :^)

  17. John Sarvey

    One change this so frequently desired is to have the page title of the home page not be displayed. It is so frequent and common that there should be an easy, obvious option to turn that off without having to search for the code and paste it into the style.css of the child theme.

  18. Aahan Krish

    John Sarvey: Actually what you are seeing in the demo is the default menu. When you actually setup your menu under Appearance -> Menus you’ll have full control over what shows and what doesn’t. :-)

    Drew: I simply pulled some CSS from Twenty Eleven for the search box, and I am having a great time with the search box right at the top of the page on all pages of my Twenty Eleven child theme. :)

  19. Aahan Krish

    Drew: Looks like I am gonna be troubling you again. :( There seem to be issues when sizing in rem — buggy in Chrome, fine in Firefox. Would be glad if you can confirm after reading this. Thanks!

  20. Drew Strojny

    Aahan: It looks like the answer provided over on Stack Overflow should help. I don’t think it’s a bug with the theme. If you do run across any bugs go ahead and open a ticket over on the WordPress Trac.

  21. clozed2u

    Sweet looking theme. I just download from Github and use it with my site. Waiting for full version. Thanks a lot :)

  22. Tomas M.

    Little bit late to the discussion… Theme looks very smooth. The best part I like is that it was design with the 2010 structure, because I use 2010 as my little framework.

    Question: is 2012 designed with a “mobile first” approach? And will it include HTML5 BP or Bootstrap ideas or bits?

    Thank you!

  23. Drew Strojny

    Tomas: Glad you like the theme :-) Yes, Twenty Twelve was designed with a mobile first approach, but we won’t be including any HTML5 BP or Bootstrap ideas or bits.

  24. Panagiotis Galatis

    Fantastic theme and excellent work as always! I am using a similar one I created for my website based on the Twentyten theme. Big fan of the Open Sans typeface as well :-)

  25. Kreativ Theme

    Seems a bit too clean … but I hope the new theme customizer will be able to make it more interesting … can’t wait to test it … ;)

  26. Elian Ibaj

    Excellent theme! Love the great reading experience it provides!

    I was working on a child theme for twenty eleven and had somewhat of a hard time undoing all the responsive styles by overwriting them from the child’s stylesheet ( the client insisted on a child theme but didn’t want it to be responsive).

    I thought I’d let you know so this doesn’t happen with twenty twelve. Maybe applying all the responsive styles to a ‘responsive’ body class that can be remove_filter’ed from child themes would be a good idea.

  27. Drew Strojny

    Hi Ellan,

    Glad you like the theme, and thanks for the idea. Right now it isn’t in the plans to make it easy to undo the responsiveness. With that being said, if you feel strongly about it you could open a ticket over on the WordPress Trac. The development of WordPress and this theme is a somewhat democratic process, so if you can rally support for the idea, it might be implemented.

  28. Richy

    Looks nice but…. I’ts completly broken in IE8. I know you guys don’t care about support for IE browsers but at least IE8 should be supported in my opinion. There are still a lot of (coperate) bussiness that only allow using IE8 or higher. (Running Windows XP)

  29. Drew Strojny

    Hi Richy. I know the trunk version has seen a bunch of IE related improvements. You might want to check that out until the official theme is released in it’s final form.

  30. Tomas M.

    Hello again! I noticed on some pages that featured image is above the title, which is great in terms of usability. But on other pages post/page title was first. Is it an option that you can select or it is per post (image first) and page (title first)?

    P.S. looks like you decided to remove footer widgets from the front page.

  31. Drew Strojny

    Hey Tomas!

    It’s an option. The page you’re seeing has an image inserted into the post. You could set a featured image instead and it should look like the home page.

    Thanks for the heads up on the widgets, they must have disappeared during an update. They should be back now :-)

  32. John Bierly

    Installed the trunk version on my site and love the look, but Open Sans does some weird formatting things, such as not displaying an ellipsis. Is that a theme thing, or something specific to the font? I don’t want to clog up the conversation here; if there’s an appropriate place to ask this, please let me know and I’ll take my question there. Thanks as always for your time.

  33. John Bierly

    (As a followup, my ellipses in all my old posts return when I disable Open Sans. Seems to be an issue with the font.)

  34. John Bierly

    (Followup #2 — ellipses work with Open Sans on Firefox but not on Chrome. Interesting. I’ll stop clogging up this thread now.)

  35. John Bierly

    Okay, this time I’ll really shut up. But! It has to do with the command in the code that turns a typed ellipsis (period period period) into an ALT+1033 ellipsis. It works in Safari, IE, and Firefox, but not in Chrome.

    Please don’t let this ellipsis saga make you think I don’t love the theme. I do. It’s so clean and fast and functional. Love it. As a purchaser of four Theme Foundry themes so far, it’s nice to see that handcrafted touch getting some major play as the new default WordPress theme.

  36. Eva Dillner

    I’ve been using Dreamweaver for years, but find it increasingly expensive to update and time consuming to stay up on the rapid changes for on line content. I’ve looked at many many alternatives like Weebly, Sandvox, Adobe Muse, RapidWeaver and WordPress. My site is pretty big, so changing platforms is a major decision. Until I saw the Twenty Twelve theme… it’s spot on what I’m looking for and I can’t wait for its release. This theme tipped the scales – I’ll be building my new site in WordPress!

  37. Drew Strojny

    John: Good find! Sounds like it’s a bug with Chrome? Don’t worry about the extra comments, nice work getting to the bottom of it. Also, thanks for continuing to support us and buy our themes, we appreciate it :-)

    Tomas: I’m pretty sure this was fixed at some point, are you running the latest trunk version?

    Eva: Thanks! That’s so awesome that you chose WordPress. Welcome aboard :-)

  38. John Bierly

    Drew: Gotta be a bug with Chrome, specifically Chrome for Windows. On my Mac, an ellipsis shows up just fine on Chrome. On my PC, it doesn’t. Weird. Works just fine on Firefox, Safari, and my mobile phone (where Twenty Twelve looks especially beautiful).

    Do you have a personal favorite browser?

    Congrats again on Twenty Twelve. I’m running the version uploaded on August 21. Beautiful theme. Can’t wait for the completed version! Will it be out before WordPress 3.5 on December 5?

  39. John Bierly

    Still loving this theme not only for its beauty (I can’t stop staring at Open Sans; it’s gorgeous) but for its functionality. I love the classy image borders, too. Subtle and smooth, especially on lighter images.

    I also appreciate how easy it is to customize. My ONLY complaint about the theme is that the date is buried too deeply in the entry-meta line in the footer.

    So I moved the date so it appears first, followed by Categories and Tags, separated by a “|” so it looks a little more streamlined than the default sentence format.

    Example: http://www.johnbierly.com/5677

    The way you structured the entry-meta line in the code with numbers that correspond to categories, tags, date, and author makes it really easy to move them around, even for someone like me who’s VERY uncomfortable when it comes to code.

    Everything I’ve learned about themes and codes has come from asking questions to your staff about Theme Foundry themes I’ve purchased over the years. You guys are the best.

  40. Drew Strojny

    Thanks John!

    Your site looks great, nice work customizing things :-)

    Answers to your questions:

    • Favorite browser: Right now I use Chrome for Mac.
    • Included with 3.5: I would expect it to be in 3.5 for sure. It also will be available in the WordPress theme repository before then.
  41. Samuel Lavoie

    Sweet looking theme! (:

    BUT even more important to me, fully responsive. Can’t wait to try it out with WP 3.5!

  42. Kojiki

    All the words get cut off at the end of a line (even in the widget area) your themes Twenty Twelve for WordPress.
    Check Firefox http://kojiki.wordpress.com/ check blog area…..
    Is this a bug or someting ….can you fix this…….
    Your design is absolut great and I like it very much …..
    Thanks for all your great work!

  43. Drew Strojny

    Samuel: Thanks! Glad to hear it :-)

    Kojiki: I checked out your site in Firefox for Mac and it appears to work well. I should let you know, this really isn’t the place to report bugs. It’s much better to report them over in the WordPress.com support forums.

Comments are closed.