I’ve been talking for months now about the integration of the wonderful Sandbox and the Yahoo User Interface CSS library. Well, I’ve done it.
It’s codenamed Vanilla and it’s in “closed Alpha” just for now.
But with all things new, I need some people to step up to the mark and help me test it, refine it and so on. You can do that in the comments below (more about that in a moment).
So what’s the big deal?
The BIG Deal: One Theme, Many Layouts
To my mind, the “Holy Grail” of Wordpress theme design is to create themes that look great and are truly flexible. Sure, there’s all that stuff about standards, but bloggers first and foremost choose themes that make their blog look good, and allow them a degree of straightforward flexibility when it comes to making their own customizations.
Up until now that flexibility has been pretty limited. It’s meant being able to change the header graphic, some colours here and there, and so forth. But I reckon we can do better than that!
So Vanilla adds a simple admin screen offering most of the layout options available with the YUI grids. This means that theme developers can now create new Wordpress themes (or retro-fit old favourites) so that they can accommodate any one of dozens (maybe hundreds?!) of different layout combinations.
This means Bill the Blogger can use the same theme for his “no-nonsense” one-column blog (with sidebar content at the bottom of the page), while someone like me can choose a three-column layout with, say, both primary and secondary columns on the right-hand-side, or one column on each side, or whatever!
Think about how a theme built on top of the Vanilla platform is more useful and flexible to a newbie blogger than all of the themes out there now!
Think about it… the whole reason why the Wordpress Theme Viewer groups the themes according to how many columns they have is because they’re hard-coded that way! You can’t change them to a different column layout without some serious coding, and most bloggers are not up for that.
(Maybe the Wordpress Theme Viewer will need to include a new category for Vanilla-built themes… “universal” or something!)
If you’re a theme designers, you might like to consider how many bloggers are not using a given theme of yours, just because the layout/column setup is not to their liking (much as they might have loved the overall design).
Well, no more!
Vanilla gives you the best of both worlds: firstly it’s built on the Sandbox, which is hands-down the best semantic markup you could hope to built a Wordpress theme on. Then there’s the YUI CSS library, not least the Grids system, which provides the awesome power to create one theme with a huge number of layout options.
Here’s what the Vanilla Settings page looks like (in Wordpress Admin):
Vanilla Theme Settings
Vanilla’s settings page (in Wordpress Admin) lets you rapidly choose a one-, two- or three-column layout, along with a number of options for page widths and column positions. This gives you literally hundreds of layouts (i.e. column combinations) to choose from!
Here’s what the settings form looks like. Just three select-boxes does the trick:
- Page Width
- This setting determines the overall width of the entire content of your page (not the browser window width, of course). You have three fixed-width options, which are all centered, and one full-width (100%) option.
- Outer Column
- The outer column can be set to one of three fixed widths, and either to the left or right of the page. It is a quirk of YUI CSS Grids (and related to IAB “standards”) that these widths differ slightly between the left-hand and right-hand positions on the page.
- Inner Column
- The width of the inner column is measured relative to the width of the main content area. For the three fixed page width options, the inner sidebar also has a fixed width, however for the 100% page-width option, the inner sidebar width is “fluid” and will proportionally resize, relative to the browser window (as will the content area).
Layout Notes
- The leftmost sidebar column will always contain the primary sidebar, meaning that if both sidebar columns are used (whether set to the same side of the page or not), the primary sidebar will always appear to the left of the secondary sidebar.
- For a one- or two-column layout (where either the outer or inner sidebar column is set to “none”, or both) the displayed column will contain both the primary and secondary sidebars, the latter following on immediately from the former. In the case of a one-column layout (where no outer or inner sidebar column is used) the primary and secondary sidebars will appear below the content area.
(Understanding the “why” behind these points requires an appreciation of how YUI CSS Grids have been designed to work.)
Using the YUI Grid Builder
By far the easiest way to play around with Vanilla’s layout settings (and to learn how the Grids work) is to use the YUI Grid Builder. Once you are happy with what you see there, enter those settings into the form on the Vanilla settings page and you’ll have the same layout structure in Vanilla.
Important note: Vanilla’s use of the YUI CSS grid system is limited, compared to the YUI Grid Builder (in terms of row and column options). This is reflected in the range of choices available for the inner column (a couple of the YUI CSS Grid options you can play with in the Builder make no sense for a blog layout).
Theme Developer Notes
- Design one theme with many layout options.
- If you know your CSS well enough you should be able to design a great looking theme that won’t break, no matter what layout options are selected above. Go on, I dare you!
- You’re ahead before you’ve started.
- The YUI CSS library means your theme development starts ahead of the rest. The strange differences between browsers have been cleaned up, there’s a rock-solid grid to build off, and the optional Base.css file gives you a headstart on default CSS settings for the most common elements.
- Very minor differences from the Sandbox.
- Vanilla is based on the Sandbox theme, with just four renamed elements:
- div#wrapper is renamed div#doc/doc2/doc3/doc4
- div#header is renamed div#hd
- div#container is renamed div#bd
- div#footer is renamed div#ft
- Err, nothing. That’s it!
YUI CSS requires the addition of extra DIVs and classes, but these need not be styled, as a rule.
- Tricked up sidebars, but they take care of themselves.
- Vanilla’s “logic” controlling the display of sidebar content (and the surrounding HTML markup) is, well, messy. But the good news is you’re still just styling div.sidebar and/or div#primary and div#secondary.
- Converting existing Sandbox themes (skins) is easy!
- In light of the above, you should by now realize that converting an existing Sandbox theme to Vanilla is pretty easy. (I converted Sandpress–the Sandbox competition’s winning entry–in just a couple of hours, having never looked at the CSS before. And this wasn’t just a conversion to the grid, but to YUI’s Reset CSS as well.)
So Who Wants To Play!?
Vanilla will remain in “closed Alpha” for as short a time as possible. The purpose of this is to avoid releasing the theme with too many embarrassments to myself! No, but seriously, I’d rather get some key theme designers to give it a run through its paces first, so we can iron out the most obvious issues. I’d rather fewer bug releases at the start so what people get first up is at least stable and tested.
Secondly, I’m hoping Vanilla can go to beta with a few simple themes ready for release, which demonstrate these exciting new capabilities.
For all this to happen quickly and with little fuss, I’d like to send out an invitation to accomplished Sandbox and/or Wordpress theme developers and designers, who’d like to take Vanilla for a serious “spin”. My simple criteria are that a) you have already created at least one Wordpress theme for public consumption, and b) you have time to either play around creating a new one on Vanilla or retro-fitting an existing theme for Vanilla.
If you have developed a popular Wordpress theme that you’d be prepared to rework for Vanilla, I’d especially like you to get involved.
Either way, please apply to join the Alpha test in the comments below, or via my contact form, or by email to .
Let’s make this BIG!
(Oh yeah, and I won’t be emailing people with updates and stuff. Please subscribe to my RSS feed for that.)
44 Comments
you were wondering... I believe in rewarding commenters!
Your first link is missing the http://
can has svn? or, even better, bzr?
Whilst I don’t qualify (cough) , it seems to me you are running a version of it on this site now.
The CSS is not the same as in the past… and I can even read it
Seems to me this is more beta, and will be suitable for live sites people are happy to tinker with.
@Ryan - thanks. Fixed
@Monster - can have… I think SVN is part of code.google.com offerings… but I’ll get to that shortly. Soon as it comes out of Alpha, or maybe earlier.
Hey Alister- I’d be glad to work with your theme in the next project I’m developing. Sounds great!
wow looks cool, i will like to use it after u complete this theme.
I would love to have a crack at the theme. I’ve used Sandbox for every theme I’ve done, for probably the past 20 or so. I’d love to see what Vanilla adds to the mix
Looks like an interesting concept.
I like it.
@m0n5t4r: *I* got the reference.
Well well I was wondering why this hadn’t been done earlier. Hat tip to you for taking the initiative! I’m sure this will become a standard, a theme category in itself, and everyone will look to you as its creator!
Wow, I can’t wait for the release!
I’d like to join the test too but I’m not sure if I’m useful
I’d be really interested in doing some testing for you. I’ve done some small scale WordPress dev, and have played with the YUI a bit on client work.
BTW, on first view the “Are you human” text didn’t display
Great initiative Alister. I’d be happy to jump on board and do some testing and even work on coming up with a chocolate flavoured theme, or even a nice cocnut and cinamon
Just let me know how I can help
Hi,
I like to test Vanilla too.
Best regards from germany
Wilfried
Although I am not a dev I am very interested in this from a user perspective. There’s always a new page to do and this sounds like it would make things much easier from a non developer perspective.
If you ,at some point, need a guy who knows a bit CSS and HTML but would never be able to code a sidebar from the left to the right, I’m yours
Just shoot me an email!
I’d love to help out. I host several blogs of my own plus some for family and friends. They are all using Sandbox (or derivatives) plus themes. I’ve hacked at themes myself more than once, so this sounds really promising as a project.
Count me in!
Wow, I’d love to have a play with this and see what I can come up with, but I don’t fir your criteria.
Good luck with the alpha. And I’m looking forward to the beta.
I would enjoy having a play with (test) this theme. I did spend a bit of time trying to merge grids and sandbox myself so am familiar with both. I use the basic sandbox theme on my blog which I have yet to finish styling to my liking. I am experienced with HTML and CSS and have played around with Wordpress themes a bit but only know a little PHP.
You have a great plan. good on ya! The “Vanilla sandbox YUI”
I’m in !
Hi, i would like to test Vanilla!
Thanks
Hey, I too would be happy to test your Vanilla theme!!!
Sorry, I do not qualify by your criteria about submitting a theme. But I do know a bit of HTML and CSS, plus I love “Sandbox” and use it whenever I can. It just feels like the right thing to do.
Let me know, what I can do to help in doing another step in what I consider the right direction.
Sounds like a great concept! We’ve been really enjoying working with the Sandbox theme. Don’t have time to play around with an alpha version but will certainly be waiting in anticipation for the beta version. Best of luck!
yes, google code does offer svn; some sort of VCS is useful because it makes it easier to provide patches; and a DVCS is even better because it allows for better local development, following multiple code paths and seeing what works better, etc.
so, how does one get to be an alpha tester?
I’d like to take Vanilla for a test drive please! Sign me up!
I’m not qualified to test, but if I’d love to know when it is out of testing and ready for the masses! Thanks
I’m very interested in this. Count me in, please.
Think i’ll wait.
Hope the closed beta is going well for you Al.
I’d put my hand up… but I can barely even *spell* “C-S-S”
Brent
Theme looks really good looking forward to use it
Would love to test Vanilla.
I’d be interested in alpha testing Vanilla!
I’d like to alpha test Vanilla. I’m a CSS/HTML guy and have longed for a cruft free Wordpress template with good typography.
I’d like to test as a user if needed.
Gavin
+1 on that! I was just about to convert my current theme to use the YUI CSS Foundation. Then I would have to convert it to Sandbox or some other theme framework. Now I can have both in one and half of the work already done. Great!
I’m not qualified to be an alpha tester (no CSS skills, have never designed a theme) but would be happy to beta test or help in some other way.
My site http://sandbox.popularlogistics.com is, essentially, a wordpress sandbox and notebook - which I set up in order to teach myself how to use WordPress. So I’m qualified to simulate an end-user of a theme. Low-end, that is.
Jon
Probably way to late in the game on this, but I wish I could have helped test it
I’m not the best with CSS, but it sounds really cool and I’m getting tired of my bland look :/
Sorry to everyone waiting for the Alpha code, etc.
I am mad keen to get it to you, but for those who don’t have it yet, I’ve stopped sending it out until I can alter some key things about it.
My vision for it has expanded a little and it’s not even ready for Alpha yet… but it will be soon.
Please sit tight and I’ll be there shortly… sorry!
–Alister
So please try to keep up the great work all the time. Greetings
Hi
I’m in too.
MC
Sounds pretty cool, but I still think most people aren’t savvy enough to use any sort of theme with options. They prefer just picking something and it’s done. Or hiring someone to do it for them.
I’m on the edge of my seat waiting for this!
this sounds pretty cool. nice use of the yui tool.
I just used Sandbox for my new blog design… but it’d be nice to have the built-in YUI grids and layout selection ability of Vanilla.
I know you must be busy, so I’ll be patient.
17 Trackbacks/Pingbacks
Posted 38 years, 4 months ago
Posted 2 months, 3 weeks ago
Posted 2 months, 3 weeks ago
[...] extremely savvy about such matters, so please see his post on alpha testing Vanilla. Even if you choose not to participate, you’re bound to learn something [...]
Posted 38 years, 4 months ago
Posted 2 months, 3 weeks ago
Posted 38 years, 4 months ago
Posted 2 months, 3 weeks ago
[...] Codename: Vanilla Interesting new Wordpress Theme system based on Sandbox and the Yahoo CSS toolkit. (tags: CSS Wordpress) This entry was written by PJ Doland, posted on February 21, 2008 at 1:19 am, filed under del.icio.us Links. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL. « links for 2008-02-17 [...]
Posted 2 months, 3 weeks ago
[...] That got Alister Cameron excited; he’s building a Sandbox-inspired, Yahoo! CSS-based WordPress theme he’s codenamed Vanilla. [...]
Posted 2 months, 3 weeks ago
Posted 2 months, 3 weeks ago
[...] Call for Alpha testers for the next-generation Wordpress theme [...]
Posted 38 years, 4 months ago
Posted 38 years, 4 months ago
Posted 38 years, 4 months ago
Posted 2 months, 1 week ago
[...] and grid systems, which have the potential to achieve what I’ve at least attempted with Vanilla: a single theme with many layout options. Whether with the YUI grids, or Blueprint, or any other [...]
Posted 2 months, 1 week ago
Posted 2 months ago
[...] http://www.alistercameron.com/2008/02/20/vanilla-theme-alpha-testers-call/ [...]
Posted 38 years, 4 months ago
Post a Comment