I’ve had interest from @tacjtg, and @A7Web, so hopefully we’ll get some good stuff out in the wild soon.
If you’d like to help out, hit me up and we’ll get-it-on.
So here’s what happened.
After importing the test-data.xml and adjusting the WordPress settings accordingly including the the Long and Short menus I decided to add an html comment to the top of each of the php files in the bootstrap theme . I did this to make it a little easier to pinpoint which file to edit from viewing the source. In Firebug. (Select the HTML menu flyout and choose ‘Show Comments’)
Add the bootstrap hotlink to the hosted stylesheet:
link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.1.min.css"
For now, I’m going to leave the twentyeleven.css in place give me a helping hand (kinda like the feeling of walking hand in hand through a park in the autumn with a new love). I will however remove the reset css from the top of this file.
I will start at the top of the homepage and see what I fancy changing first.
Taking the menu from underneath the banner and placing it at the top and inheriting the bootstrap styles seems to be a good starting point.
Moving the search into the topbar which meant removing some default twentyeleven functionality which changed the position of the search if there’s the Display Text enabled or not.
Including #masthead from the docs.css from Bootstrap to emulate the same design made the look of the entire header and nav pretty sweet.
If you’re looking at this blog at the end of August 2011 then this is likely to be what you’re seeing right now.
Many times I’ve attempted to stream-line my development processes in a variety of different ways, using 960gs, Eric Mayer’s reset.css, HTML5 Boilerplate, to mention only a few. One of my favourite time-savers is to create an ‘interface template’ this template usually takes the form of a single page with every UI element that I’m likely to need to build the website. This helps to ensure that all components ‘play nice’ with each other.
During this process I often find myself using the same markup with the same class names, for example my pagination nearly always ends up exactly the same HTML and CSS with different styles. After a while I noticed a number of tricks and techniques were also being repeated. This included CSS to style buttons exactly the same if the markup used was an anchor, button or input. Then a number of styles to make the button appear disabled, negative, positive and neutral, then I’d usually include classes to make them large, medium and small.
Think in your mind that dreamy type of music to set the scene….
“Wouldn’t it be great if these techniques were available to implement at the beginning of a project with a way of modifying them to suit the design of the website I’m building them for.”
While this is still a distant “I may get round to doing something one day” thought. Along comes Bootstrap from Twitter. A set of tools put together by @mdo and @fat (from Twitter) which takes this concept by the short and curlies and provides a full set of amazingness, especially if the things I describe above are familiar to you.
A grid system, typography, lists, tables, forms, buttons, tabs, pagination, page messages, modals, tool-tips, popovers are all included, which is so amazingly comprehensive I am overwhelmed!
Wait, there’s more! ‘Really?’ I hear you say. No, there’s actually Less. Combining all this Bootstrap awesome with the power of Less is nothing short of genius. It would have been great without it but so so so much better as part of the deployment. You can get really funky with mixins and all that jazz.
As you can see, my blog is a bit of a shambles, with no styling of any note. It’s all because I like to tinker with the source code of my themes. I enjoy dipping into the world of WordPress every now and then as it feels more of a hobby than the java that I’m exposed to on a daily basis.
My intention is to implement Bootstrap from Twitter into a WordPress theme as it simply feels like the right thing to do, then make it available for download. Watch this space… Please get in contact (or comment on this post) if you have the same intentions and would like to help out and keep up the motivation to get something released pretty soon.
With the recent release of Bootstrap from Twitter I thought it could be an opportunity for me to release a WordPress plugin, so I requested a plugin at WordPress.org and I think I made a bit of a booboo. Simply sending a request for a plugin does not immediately give you a place to post your intentions for the plugin.
So I’ll get my shizzle out and create my desired implementation of Bootstrap into my WordPress theme and then and only then will I request it has a place in the themes section on wordpress.org.
As a first attempt to understand Bootstrap for Twitter I simply bolted the hotlink css into my existing theme and hey-presto, a new look website! -sweet-
I’m currently knee deep into constructing and developing my WordPress theme in HTML5, CSS3 spiced up with a bunch of @media queries.
As I described in my previous post, I’m experimenting with a number of new technologies. I have started to build this framework for a WordPress theme which will showcase the power of CSS3 @media queries. So, while you’re here, scale your browser to see the different @media queries in action, and why not take a peek using your smartphone, or if you have one, your iPad. When you’re there, give it a twist and see what it looks like in portrait and landscape.
Funky EH! Right, I’m off to do a little more coding before going to visit my nephew, who’s celebrating his first birthday.