The Titanic child theme is my last real attempt at creating a full fledged theme for the Thematic Theme Framework. This is the responsive child theme my site is currently built on, so technically you are looking at the demo right now. This is yet another theme built on my own Responsive Base which is a starter child theme for Thematic aimed at speeding up development times.
Titanic Highlights
This responsive theme is packed with best practices involving developing child themes for Thematic I have picked up in the past few years. The one thing that makes this theme stand out is the way the menu works, it uses a footer anchor approach which is not currently set up for drop downs.
The theme is also built on Sass and Compass which hopefully you are using as it will make developing sites quicker, even if you just use it for the ability to import and compile.
While creating this theme, I made my best effort to make it compatible with the new Thematic HTML5 Plugin created by Karin Taliga. This plugin is awesome for converting some existing elements in Thematic to HTML5 without losing any functionality. For anyone that has looked into this (me), it is a pain to do and she has done an amazing job.
If you want to know every detail about this theme, you will probably want to review the information on my Responsive Base theme since they share all the same features.
13 replies on “Titanic, a child theme for Thematic”
Thanks Scott, I’ll have a play with this. Should I install the Plug-In as well or is that more for the child-themes that aren’t yet responsive?
The plugin just swaps out some basic structure for some HTML5 things, it is kind of gimmicky (in a good way) in that it doesn’t matter if you do, or do not use it. You won’t see any performance gains or anything like that.
It is really just one small step towards having a more modern code base, it isn’t by any means perfect (structure wise) which mostly has to do with the way Thematic is actually made. The way the plugin works though is super intelligent and when I ran it on a already completed site, I had like literally two CSS errors to fix, and they were minor padding issues.
You could totally use the plugin to pass off a custom Thematic child theme as “HTML5” now though. :P
Hey Scott,
I’m trying to figure out what you did as far as compass — I’m using CodeKit, installed the Compass framework, but I see you’ve got a reference to it in your _base.scss in the css folder. I’m a bit confused… clearly I have compass set up differently than you do.
I am not knowledgeable about the Mac side of things. The @import “compass” loads compass core framework tools, so you can use their library (I only use 1 or 2 things). Currently I use a tool called Scout to compile Sass/Compass, but only because I couldn’t get SublimeText2’s build script to compile Compass, Sass worked, but not Compass. Eventually I will take another stab at it since it would be easiest to set up my text editor to just build it all on save without another program, but I haven’t quite got there. There are also a bunch of videos out there, especially geared towards Mac’s, so I have no advice to offer on Codekit, haven’t used it, although it looks awesome, especially the live reload.
Yep, took me a bit, but I got it working. I wound up reworking the placement of files in your themes to shift everything into a library folder, just for my own sanity. Turned out I wasn’t installing Compass correctly (and at time of writing the post above, I hadn’t actually installed it into Ruby. Oops!!)
Hey Scott,
I really love all of the work that you’ve done on your Thematic Child Themes! Really solid work to keep it current and extend an already great framework.
I’ve been messing around with Titanic for the past day or two – I really like it – and am trying to rework the location of the menu on small screens. I can appreciate why you added the jump menu and relocated the menu for mobile to the footer, but I’d like to “see” what it looks like if the menu stays just below the header.
That said, I’m running into challenges with doing that. I assume it’s because I’m not as familiar with the way that Thematic is coded. Essentially, all that I want to do is move the menu back up to the top of the page. Any thoughts on how I could accomplish that?
Again great work!
Happy Holidays!
Dave
It is probably easier to modify than you think. There are two menus at all times, one or the other is hidden by CSS.
To show the top menu, remove the
.access, .sf-menu { display: none; }in the main CSS chunk. You will see the menu, however it won’t look the same.If you want it to look the same, or mess with it, move the CSS out of the media query, it is in the
#branding navsection.Then if you want to get rid of the “+” jump to section, delete the
childtheme_add_menu_skiptofunction in your child theme. Now if you want to remove the footer menu, delete thechildtheme_override_siteinfoopenfrom the functions.php also.Responsive menus with WordPress suck, they really suck if you need dropdowns. So if possible, avoid the dropdowns at all costs! :P
Thanks for the help Scott!
You were absolutely right! After I really focused I found exactly what I needed. I added some jQuery magic to get it working the way I wanted and now am much closer to the end state that I imagined.
My work in progress is here: http://dev.davesabol.com/ and I’m more than happy to share any of the code that I’m using to anyone who wants it. It’s still rough around the edges and I’m monkeying around with a lot of places without much focus, but once I double down and start clearing my checklist, it will become my default theme.
Happy New Year!
Dave
The menu you created looks good, nice job. I will keep checking to see what you come up with, also if you see anything that could be improved on the theme, let me know. ;)
Couple of questions Scott:
1. Should I have SASS and COMPASS loaded on my PC to work with Titanic? Some of the code is very foreign to me..
2. There are a lot of widgets areas missing:
Index Top
Index Insert
Index Bottom
Single Top
Single Insert
Single Bottom
Page Top
Page Pottom
How difficult would it be to replace those widget areas? Thanks for being such a guru…
Sharon Keeping
I can answer Part 2 of your question for Scott. Scroll down to about line 170 and you’ll see where he’s taken out the widget areas by: unset($content[‘Index Top’]);
You could comment them out or remove the function without breaking the theme(I have altered this myself).
Thanks Derek for your ridiculously fast response time and that is the correct way to add the Widget areas back in.
Sharon, as far as Sass and Compass go, only use them if you are already using it or you have a desire to learn. Pretty much you can trash any Sass/Compass related code and folders (.scss) and just use the stylesheet as normal. I could go on and on why Sass is so awesome, but unless you are already really good at CSS it may just slow you down.
Forgot all about this post until Sharon’s comment popped through via email. Once again, thanks for your hard work with all things Thematic you’ve done here and on the thematic forums over the years.
Merry Christmas and have a Happy New Year.