Bootstrap, from Twitter for WordPress

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.

15 Responses to Bootstrap, from Twitter for WordPress

  1. Andi – looking forward to seeing what you create. I’m a bigtime WP user but am looking at getting seduced by proprietary systems that enable easier design without the coding.

  2. Mark Otto says:

    Hey man, awesome to see you’re working on this—hope it goes well! Hit us up on GitHub or on Twitter when you’re done and we’ll get you featured in a showcase as soon as we put it together :D .

    Let us know what feedback you have as well and we’ll try to address it as you go.

    Best of luck and thanks for using Bootstrap :) .

  3. Pingback: The Web Ain’t Dead Yet (And It’s Getting Easier to Create) - LOGO WORLD 2011 – LOGO WORLD 2011

  4. Ben says:

    This is a great idea! Just discovered bootstrap, and it looks extremely helpful. Would love to see this working in wordpress too!

  5. Paul says:

    Hey,

    Just thought I’d offer my 2 cents in here… we just released today our first ever WordPress plugin as inspired, like yourself, by Bootstrap from Twitter. It allows you to add the Bootstrap CSS (currently 1.2.0) to the head of your documents before any CSS loads.

    I thought you might be interested and perhaps use the plugin in conjunction with your theme. We intend to keep it up-to-date as bootstrap updates and hopefully in the future make it automatic.

    You can see more about it here if ya like (http://bit.ly/pL38fp)… and any comments you have would be great – there’s several directions we can take this plugin and I’d really like to hear what other people think

    Cheers! And good luck with the theme development!

  6. Pingback: The Web Ain’t Dead Yet (And It Is Getting Easier To Make) | Atulya Basic

  7. Hey guys,

    A theme would be great, but…..we’ve created a twitter bootstrap plugin for wordpress! There’s a fair few options already available, include all the javascript pages as well as the CSS itself. Shortly though we’re going to be releasing it to support a range of shortcodes to allow anyone to get all the benefits of the Twitter Bootstrap within their own design (and for it not to look like another bootstrap website).

    The plugin is here:
    http://wordpress.org/extend/plugins/wordpress-bootstrap-css/

    Expect v.0.8 in a few days!

    Enjoy.

  8. Paul G. says:

    Just wanted to add that we have upgraded the WordPress Bootstrap CSS plugin to 0.8 and it now allows you to use simple WordPress Shortcodes to insert all the great Twitter Bootstrap elements.

    There’ll be help article coming, but the first of them is here on our site: http://bit.ly/v02ZhL

    Let me know what you think!
    Cheers!
    Paul.

  9. Brad says:

    What is the status on this wordpress theme using bootstrap? As soon as I read about bootstrap I thought about a WordPress theme using it..

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>