Free HTML5/CSS3 WordPress 3.1+ Theme With Responsive Layout: Yoko

Advertisement

In this post we are glad to present to you yet another freebie: a responsive WordPress theme Yoko which was designed by talented designers Ellen and Manuel from Elmastudio1 and released for the Web design community. Of course, the theme is absolutely free to use in private as well as commercial projects.

Yoko is a modern and flexible WordPress theme. With the responsive layout based on CSS3 media queries, the theme adjusts to different screen sizes. The design is optimized for big desktop screens, tablets and small smartphone screens. To make your blog more individual, you can use the new post formats (like gallery, aside or quote), choose your own logo and header image, customize the background and link color.

2

Download the Theme for Free!

The theme is released under GPL. You can use it for all your projects for free and without any restrictions. Please link to this article if you want to spread the word. You may modify the theme as you wish.

Screenshot3

Features

The theme requires WordPress 3.1+ to run. It has following features:

  • Cross-browser compatible (tested in Chrome, Firefox, Safari, Internet Explorer 8+)
  • HTML5 (with fallback for IE < 9) and CSS3
  • Responsive layout (CSS3 media queries, not supported in IE < 9, but you can use libraries like Respond.js10 by Scott Jehl or CSS3-Mediaqueries-js11 by Wouter van der Graaf to make it work in older versions of IE.)
  • WordPress post formats (aside, gallery, image, video, link and quote)
  • Theme options page, custom background, custom header image
  • Optional sub menu
  • A custom social links widget to promote your RSS-Feed, Facebook, Twitter, Flickr, Vimeo, LinkedIn or Delicious profile
  • Full-width page template
  • Google Web fonts in use (Droid Sans and Droid Serif)
  • Threaded comments with Gravatar support
  • Shortcodes for multiple columns, info boxes in three colors and highlighted text
  • Currently available in English, German and French.

Screenshots

three-column-layout12
Three-Column-Layout.

two-column-layout13
Two-Column-Layout.

one-column-layout14
One-Column-Layout.

comments15
Comments area.

customheader16
Custom Header.

post-format-gallery17
Post Format Gallery.

themeoptions18
Theme Options.

Behind the Design

As always, here are some insights from the designers:

“Since the mobile Web is getting more and more popular every day, we think that it’s also time for WordPress themes to become more flexible and adapt to different devices and screen sizes. While designing the Yoko theme, our goal was to create a minimalistic design with focus on content and good readability on various devices. Also we wanted the theme to be easy to use and customizable for everybody, so we kept the theme options simple while still including the most important options to add a personal style to the theme.

The main problem to solve during the design and development process was to make sure that all the different contents and plugins that people will use still work in the responsive layout. Of course the responsive design approach is still in development but we think it’s a lot of fun to explore new possibilities and as doing so make Web design and WordPress themes more powerful and flexible to use.”

Thank you, Ellen and Manuel! We sincerely appreciate your work and your good intentions!

Footnotes

  1. 1 http://www.elmastudio.de/wordpress-themes/yoko/
  2. 2 http://yoko.elmastudio.de/
  3. 3 http://www.elmastudio.de/themes/yoko-wordpress-theme/
  4. 4 http://yoko.elmastudio.de/
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2011/06/yoko.jpg
  6. 6 http://wordpress.org/extend/themes/download/yoko.1.0.4.zip
  7. 7 http://www.elmastudio.de/wordpress-themes/yoko/
  8. 8 http://www.elmastudio.de/wp-content/uploads/themes/yoko-theme-documentation.pdf
  9. 9 http://vimeo.com/album/1616312
  10. 10 https://github.com/scottjehl/Respond
  11. 11 http://code.google.com/p/css3-mediaqueries-js/
  12. 12 http://yoko.elmastudio.de/
  13. 13 http://yoko.elmastudio.de/
  14. 14 http://yoko.elmastudio.de/
  15. 15 http://yoko.elmastudio.de/
  16. 16 http://yoko.elmastudio.de/
  17. 17 http://yoko.elmastudio.de/
  18. 18 http://yoko.elmastudio.de/

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

Advertising
  1. 1

    Great start. Though this theme has a lot of issues on my Windows Phone 7(HTC HD7)

    0
  2. 52

    Surender Markam

    June 21, 2011 9:29 am

    awesome theme.. I’m going to use it on my next wordpress blog.

    0
  3. 103

    Thank you for this nice theme! I just wonder is it possible to add two additional modules – Tags (with Tag cloud) and Related posts? Can you advice how is it possible? Thank you in advance!

    0
  4. 154

    I love this wordpress theme! just changed over to it and have got it looking the way I want except for 1 sidebar only.

    Has this been rectified yet? I’ve checked several forums but it doesn’t appear to.

    Ellen…is this possible?

    Shauna
    Secret Secretary

    0
  5. 205

    Thanks, Ellen and Manuel! It’s a really nice, clean and fresh looking theme. I gonna use it soon

    0
  6. 256

    Shailesh Tripathi

    July 10, 2011 6:18 am

    Nice theme i’m gonna use it on my next site. I loved the layout and design of the site. Share it to each other is my current website and I am constantly conscious of it’s design factor.

    0
  7. 307

    Hi Ellen –

    How do I get a Post(with Categories, and Tags) to appear on a specific page? Right now what happens is; when I create a post it shows up on all of my pages. I don’t want that.

    Help.

    Thanks.

    0
  8. 358

    the categories widget in the sidebar does not work – clicking on any of the categories brings up ALL posts, not just those in that category. we would appreciate any advice to solve this matter. thanks.

    0
  9. 409

    So, duster / twenty eleven with a few tweaks, renamed Yoko? The custom logo function is great as is the second sidebar. But it should say somewhere that you forked twenty eleven and added some mild adjustments.

    -2
    • 460

      Why the red arrows on this comment? – it’s true. I’ve built many themes on twentyeleven and this theme is almost a direct port of twentyeleven with a tweak or two.

      0
  10. 511

    Hi Ellen, awesome work, great theme. Thanks a lot. I am trying to use it for one of my website. One thing I’m unable to get it right is the custom post type. While my other website (different theme) I was able to create custom post type. The same process I’m trying however I’m unable to lineup the posts in a page. I can view the custom post but they don’t line up in a page. Any help would be greatly appreciated.

    Thanks
    dip

    0
  11. 562

    official cheap tory burch sale

    August 24, 2011 10:31 pm

    The wide width dress sandals from Softspots are extremely popular because of the high level of comfort they offer while retaining the style element.

    -1
  12. 613

    Simple but nice and useful……
    Thank you for this nice theme!

    0
  13. 664

    Really very nice..
    And the greatest part of this is, it’s cross browser compatibility..Thx
    U can get more stuff related to HTML5 here..
    facebook.com/html5apps

    1
  14. 715

    Superb…. this is the only word that comes out…

    0
  15. 766

    Great theme and great work…

    0
  16. 817

    How can i change the display of comment posts? I want to display user name above the profile image and posting date and time below the image. Comment display should be normal like other posts.

    Is it possible by css or i have to change php

    0
  17. 868

    Awesome theme!!! ….. How can make a sticky post like in the demo? I’ve read the documentation, but I can’t find the way…… Thanks for reply

    0
  18. 919

    Is there a way when you set a featured image, to not have it show in the post too? On the home page, for each post, it has the feature image on the far left, and then the same image in the blog post – so two images are side by side and it looks funny.

    Also, is there a way to make the header image smaller? I’d like to have it be about 220 pixels instead of 350.

    This is a GREAT theme. I tried 3 or 4 others and this one turned out the best and gave me the most flexibility. I love the submenu.

    0
  19. 1021

    well.great.simple but suitable

    0
  20. 1072

    In FireFox (7.0.1), the rightmost page menu item (above the header image – where you have CONTACT in your demo) does not respond to the mouse hover. It responds to a click though, but hover does not activate the mouse cursor or shade the menu item. My screen is 1280 wide and FF is maximized. Incidentally, it does the same thing with your lie demo.

    0
  21. 1123

    Its taking hell lot of time to load on Safari (5.1) not sure what’s the reason. Checked it in couple of machine and its the same across.

    0
  22. 1174

    Hi, thankyou very much for this great theme…this is the best theme I’ve found in 3 day of search.
    Just one question: how can you put the category and sub-category like the demo under the main image in the home page?
    Thanks!

    3
  23. 1225

    What a great theme! Inspires me to make some nice WordPress themes to go on my blog. We will be using this for a client’s blog.

    0
  24. 1276

    LOVE the theme. Super responsive and nice and wide, just how i I need it to be! The only thing is that I want to make sure it works on IE7, and I’m happy to make some custom tweaks, but I’d love to know if anyone has tried it with IE7 so far. Merci!

    0
  25. 1327

    Christopher Sullivan

    June 16, 2012 5:52 am

    Thanks for sharing.

    0
  26. 1378

    Hi

    This looks very good to me but the only regret i have is about the sub menu from the category menu.
    My opinion is that a drop “down menu with hidden sub menu” option for this part would have been great. same with the mobile version, making the current submenu visible whenever you over the Main navigation item would have been great.

    But it s just my opinion.
    Anyway great theme with great fonctionality. and for free !! Thanks

    0
  27. 1429

    I just love yoko!

    Thanks so much, Ellen and Manuel for such a beautiful work! This template was exactly what I was looking for and it worked much much better than my expectations! Just perfect!

    thanks, thanks, thanks!!!

    check out how it worked for my blog: http://www.mundodegato.com.br

    0
  28. 1480

    The package cannot be downloaded. It comes in as a 1K zip archive with nothing in it. Tried it 3 times. Same result. Please check. Thanks.

    0

↑ Back to top