Skip to content
This repository

Responsive and fluid child theme for P2

branch: master

Merge pull request #5 from jeremyfelt/stylesheet-uri

Load JS via stylesheet_directory_uri rather than a relative path
latest commit a47dbab8b4
Jonathan Warren authored March 13, 2014
Octocat-spinner-32 img Initial commit. January 26, 2012
Octocat-spinner-32 js Update FitVids to 1.0.3 January 16, 2014
Octocat-spinner-32 comments.php Initial commit. January 26, 2012
Octocat-spinner-32 entry.php Trim whitespace. January 16, 2014
Octocat-spinner-32 footer.php Initial commit. January 26, 2012
Octocat-spinner-32 functions.php Load JS via stylesheet_directory_uri rather than a relative path March 12, 2014
Octocat-spinner-32 header.php Initial commit. January 26, 2012
Octocat-spinner-32 readme.md Add theme screenshot. January 16, 2014
Octocat-spinner-32 screenshot.jpg Add theme screenshot. January 16, 2014
Octocat-spinner-32 style.css Version bump 1.1.0 January 16, 2014
readme.md

Responsive P2

A fluid and responsive child theme for P2.

I've tried to do as much as possible with CSS but there are a few things that had to be moved around in the markup, plus a bit of JS magic:

  • comments.php rename the comments function so it could be modified:
    • p2_responsive_comments place span.actions at the end of comments so it responds nicely.
  • entry.php again, move span.actions to after the_content so it responds nicely
  • footer.php nothing major here, just moving the sidebar so it flows under posts/content when we switch to single column layout on small screens.
  • functions.php adds a few functions we need to make it responsive.
  • header.php remove the sidebar and put it in the footer and also add a mobile viewport on line 14
  • img/responsive-bg.png a responsive faux column for the sidebar
  • js/jquery.fitvids.js Embedded videos maintain aspect ratio when resized
  • js/modernizr.min.js polyfill for HTML5 elements and media queries
  • style.css All our responsive goodness lives here. Unfortunately it's quite messy CSS, hopefully it can be made much neater when it's merged with the parent theme.

Demo

See the theme in action p2.nmecdesign.com

To-do

  • Test on more mobile devices
  • Test on old browsers (boo, IE)
  • Integrate with parent theme
  • Tidy and optimise CSS
Something went wrong with that request. Please try again.