Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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

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

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 Link

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 Link

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 Link

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 Link

  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 https://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/
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

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.

  1. 1

    nice, but what about IE? 7-8?

    -19
    • 2

      What about them? If you want or need to make it responsive for them too you can use respond.js or CSS3-Mediaqueries-js as they said in the article.

      3
    • 3

      @franszo, I think this is your first time hearing about html5 and css3.

      1
  2. 4

    Darko Škulj

    June 7, 2011 9:58 am

    Not impressed. Big picture is just waste of space, especially when opening some category… acitve links? kinda not userfrendly… sorry 4 being honest. But still like resizing part :)

    -6
    • 5

      Hi Darko Škulj,
      the header image is optional. You can just remove the it with one click if you go to Appereance / Header in your admin panel :-)

      5
  3. 6

    looks awesome! thanks

    3
  4. 7

    Rishi Luchun

    June 7, 2011 2:22 am

    Very nice looking theme!

    4
  5. 8

    thanks a lot for this inspiration and giveaway :)

    1
  6. 9

    Suddenly inspired!

    June 7, 2011 2:32 am

    I think I just died and went to heaven ;-)

    11
  7. 10

    Pixelpusher

    June 7, 2011 2:36 am

    The smartphone/iphone layout does not work well. The logo and image takes up too much space and the “categories”-links does not work (as well as taking too much screen space). Clicking on a category link loads “the same page” (it does change the articles listed below, but the user will only see the same page with the category links again and it does not seem to have changed).

    -4
    • 11

      Hi Pixelpusher,

      I actually think its quite common on mobile devices that you have to scroll down the page a bit to see all the content. But since the header image and the sub menu both are optional you can just not use them and have a very small header instead. In my opinion this solution is working good especially for a theme that has to hold so many different contents :-)

      7
      • 12

        Manoj Kumar Sharma

        June 8, 2011 4:32 am

        Hi,

        Excellent Theme. Looks really good, especially in the small screen versions.

        However, as already pointed out, if you were to switch to the phone view, the sub-categories in the menu never appear. On has to scroll all the way down to view the CATEGORY section to identify the sub-category names. And then, the sub-category names do not appear identifiable as sub-categories to the selected category.

        Thanks for sharing this.

        -1
  8. 13

    Very nice clean theme! well done.

    0
  9. 14

    Aweseome Theme – use it on both blogs!

    2
  10. 15

    Very clean and fresh looking theme. Will certianly use this somehwere :) Thanks

    1
  11. 16

    Amazingly awesome theme, thanks for sharing and a nice clean theme too.
    Bravo.

    0
  12. 17

    Ohh, very clean and fresh. Love the vivid green header picture. Many thanks.

    0
  13. 18

    Anterpreet Singh

    June 7, 2011 3:40 am

    Great theme. Simple and perfect :)

    1
  14. 19

    Thanks for this great high tech theme! Love the concept, so I’ve tried it out immediately. After having uploaded a new header image, I opened my blog on my iPad. It shows the default header image instead of the freshly uploaded one. On my desktop everything looks the way it should! Any idea why this is?

    1
    • 20

      Thanks for your feedback, Michael. I am not sure, but you might have to clear the cache one more time. Do you use a chache plugin for your WordPress blog?

      0
  15. 21

    Great looking theme, and I’m definitely going to put it to use somewhere.

    Running through the W3 Validator results in 21 errors however. Do you suppose this is more related to WordPress 3.1 rather than the theme itself?

    Thanks again for all your hard work!

    0
    • 22

      Hi Shad,

      thanks a lot for your feedback :-) Yes, you’re right about the validation errors. The theme didn’t have this validation errors just a couple days ago. I believe its the “rel” attributes that the W3C validation doesn’t accept, but I will check it for sure again :-)

      3
  16. 23

    Robert Hauk

    June 7, 2011 4:09 am

    Very fine work – thank you. Clear design and good readability.

    0
  17. 24

    i love this. but i am not sure if the media-query thingy is a really good solution …

    0
  18. 25

    Jason Levine

    June 7, 2011 5:06 am

    I could be horribly wrong but this looks like fluid percentages rather than media queries, at least the way I have seen them implemented.

    0
    • 26

      Hi Jason,

      its a mix of both (media queries and % width sizes). With this solution the theme can adapt to as many different screen sizes as possible :-)

      1
  19. 27

    Nice….

    1
  20. 28

    Thanks for the lovely theme!

    0

↑ Back to top