Simone - a free accessible responsive WordPress theme

Simone – Responsive, Accessible, Content Focussed, Free WordPress Theme

Simone is a new free WordPress theme designed and developed by lynda.com staff author Morten Rand-Hendriksen.

Simone is available from the WordPress Theme Directory and from the theme installer in your WordPress site. You can download the most current version directly from GitHub by following this link.

The theme is based on _s (Underscores) and features future-forward web design and development standards. All the buzz-words are covered: Responsive web design, accessibility support, internationalization, RTL language support, screen-focussed typography and font-scaling, HTML5 markup, high-resolution support through CSS and icon font graphics for that crisp and clear “Retina-ready” look, the list goes on.

The primary focus when designing and building Simone was putting the content front and center. This is achieved through the use of large easily legible fonts that scale based on screen size and by placing the content in the middle of the screen whenever possible. Wider screen space is utilized to its full extent by centering the featured image and main content, breaking post meta out of the content, sticking the right-hand sidebar to the right edge of the screen with the remaining content centered, and allowing blockquotes and images aligned left and right to break out of the main stream and get a pull-quote effect.

Features

Language Support

Simone is fully translatable for LTR and RTL languages through standard WordPress internationalization (i18n). Out of the box the theme ships with English as the default language and translation support for the following additional languages:

  • Catalan (CA via Faleg)
  • Chinese (simplified) (zh_CN via Jerry Wang)
  • Dutch (nl_NL via Richard van Naamen)
  • Finnish (fi via Sami Keijonen)
  • French (fr_FR via Christine Rondeau)
  • German (de_DE via Caspar Hübinger)
  • Hungarian (hu_HU via Beata Kozma)
  • Italian (it_IT via Giorgio Riccardi)
  • Norwegian Bokmål (nb_NO)
  • Persian / Farsi (fa_IR via Emad Navy)
  • Portugese (pt_PT via João Gomes)
  • Russian (ru_RU via Vladimir Samoletov)
  • Spanish (es_ES via Juan Pablo)
  • Swedish (se_SE via Ted Derneby)

More translations are forthcoming in regular updates. If you want to contribute your own language translations to Simone feel free to submit a pull request to the Github repo.

Customizer options

Extended options available from the Customizer:

  • Background color and background image on index and archive pages (new in version 2.0)
  • Display excerpts or full content on index and archive pages (new in version 2.0)
  • Sidebar position right (default) or left (new in version 2.0)
  • Header background color
  • Header text color
  • Link color (changes link colors throughout the site including site title. Also sets color of .border-custom class.)
  • Optional Header image of 1280px x 300px can be displayed in combination with title and tagline or on its own.

Optional Social Media menu

The header features an optional social media menu which is displayed on the far right of the menu area. Social media icons from Font Awesome are automatically generated based on the URLs of different social media services so a link menu item with a Twitter URL will automatically show the Twitter icon etc. To activate the menu simply create a new menu and assign it to the Social Menu template location.

The social menu is inspired by this article by Justin Tadlock.

Social networks currently supported:

  • Dribble
  • Facebook
  • Flickr
  • Foursquare
  • Github
  • Google+
  • Instagram
  • jsFiddle
  • LinkedIn
  • Pinterest
  • Reddit
  • Soundcloud
  • Stack Overflow
  • Tumblr
  • Twitter
  • Vimeo
  • Vine
  • Yelp
  • YouTube
  • WordPress.com

When a network is not supported an external link icon is displayed.

Widgetized areas

By default Simone has a one-column centered layout. When widgets are assigned to the Sidebar the Simone will run with a two-column layout. The default page template has the sidebar applied. An optional no-sidebar template is also provided.

The default position of the sidebar is hard right meaning it will stick to the right side of the screen. The position can be changed to hard left in the Customizer.

The Recent Posts, Recent Comments, and Archive widgets have icon font styling applied to clearly indicate to the visitor what type of content is presented. Custom styling is also applied to the Custom Menu and RSS Feed widgets.

The footer widgetized area is displayed in a responsive Masonry tiled layout when the document width allows it.

Simone has two widgetized areas available:

  • Optional sidebar, max content width 300px (set position in Customizer).
  • Footer, max content width 320px.

Editor styles

Simone has built in editor styles that ensure the appearance of your content in the post and page editors is as close to the appearance of the content on the live site as possible.

Featured Images

Posts and pages can have Featured Images. On single posts and pages max Featured Image (Post Thumbnail) size is 1060px x 650px. On index pages the featured image is displayed in 780px x 250px hard crop.

Pull quote blockquotes

When using blockquotes the user can opt to add the .alignleft or .alignright classes to the blockquote tag. The blockquote will turn into a left- or right-aligned pull quote when the document width allows for it. On wide screens the quote will be pulled out of the frame of the content to float to the left or right.

Blockquote citations

Blockquotes support the <cite> tag which displays in a smaller sans-serif font aligned right and below the quote.

Post Formats

Standard and Aside post formats are supported. Asides are displayed without headings or meta content in index pages. All other displays are identical with Standard posts.

Proper paging, single post, and paged comments navigation

On index pages proper paged navigation is displayed on the bottom of each index clearly indicating where the visitor is in relation to all published material.

On single posts navigation links with the titles of the previous and next posts are displayed.

In the event of paged comments similar comment navigation is provided at the bottom of the comments section.

Helpful 404 and no search results pages

When a visitor lands on the 404 (nothing found) page or makes a search with no results she is presented with a helpful message explaining what went wrong, a search field to make a new search, and a list of the 6 most recent published posts.

Extras

Image border classes

Simone ships with three border options for images and other elements that can be applied by adding a class to the desired element. The classes add a 1px solid border around the current element. The classes are .border-black (black), .border-gray (#b9b9b9 or 25% gray), and .border-custom (defaults to header color but is overridden by custom link color in Customizer). These classes are added to allow the user to add borders in a semantic and standards based way.

Friendly comment moderation

When a visitor leaves a comment that is held for moderation she is met with a friendly note highlighted in green rather than a warning.

Licenses and External Assets

Simone is distributed under the terms of the GNU GPL v2

Simone’s code base started out as _s as it were on February 6, 2014.

The theme features three custom fonts:

The accessible main menu is powered by Superfish (MIT License).

Responsive triggers for Superfish and Masonry powered by Enquire.js (MIT License).

Namesake

Simone is named after renowned philosopher and feminist Simone de Beauvoir.

Contribution and future development

Simone is open sourced and in continuous development. The current development version of Simone is available on GitHub where you can fork it, build on it, and contribute back if you have a new feature you want to share.

If you have feature requests leave them under Issues on GitHub.

85 comments:

  1. Hello,

    I have a problem with too much H1 tags used in the themes, I tried to change the H1 tag from menu-toggle:

    to use H2 tag instead:

    After I made this change the menu on small devices wasn’t working.

    How can I fix this?

    Thanks,
    Markos

  2. Thanks so much Morten for Simone! This is the best accessible free theme so far.
    I’m using it to build my new website but noticed that social media icons don’t show up on the menu bar. I tried everything I could find in the Internet but can’t fix it. I really want the social media to be on the main menu bar. Any suggestions? Thanks! M

  3. hi morten,
    i like your theme and right now i am trying to set up my layout with it which works fairly well.
    the only problem i struggle with is that the 4 footer widgets behave in a way i don’t want them to: right now, the 4 footer widgets are only shown in one row when the window has a width of 1846 px. to the left and right of the widget row there is a padding of almost 200px. i’d like to have the window width at 1200 px showing all 4 widgets in a row and reduce the side padding significantly.
    obviously the width of the footer widgets and the padding of the widget row are calculated somewhere i could not find out. is there a way to get control over the dimensions concerning the footer and its containing widgets?

  4. Hi Morten,

    Thanks for a great wordpress them. I am using WordPress 4.2.4 with Bitnami Virtual Applicance. I am using the Simone them. I had a problem with Social menu. I did not see the checkbox for “Open link in a new windows/tab”. How can I fix this issue?

  5. Great theme!

    Is there an easy way to add three widgets to a single row within the footer? Whenever I add a third, it creates a second row. I’d like to have all three widgets contained within the same row to minimize the height of the footer.

    Any suggestions?

    Thanks!

  6. Yes. Great theme, cheers. Can’t understand why its not one of the most used themes on wordpress, but I’m sure people will find it in time.
    Pity its named after Simone de Beauvoir (perhaps you’d dedicate the next one to Kierkegaard?!)
    har det bra!

  7. For those of us taking the WP: Building Themes from Scratch with Underscores course on lynda.com, it would be nice to include the Post Format: Gallery post along with the associated images in the .zip download package.

    Best regards

Leave a Reply

Your email address will not be published. Required fields are marked *