Bootstrap

This is a re-design using the Rapid Platform

Learn more

Below is a complete re-design of the Bootstrap GitHub page using nothing but Rapid Platform shortcodes and rich text done entirely in the WordPress Page Editor…this took us about 5 minutes. Our design is fully responsive by default; no external styling (CSS) or markup (HTML) was written to achieve this.

Shortcodes used:

[rp_grid] was used 7 times to build the seven visible columns.
[rp_style_reset] was used 1 time to apply a global override to incorporate the site-within-a-site styling.
[rp_style] was used 2 times, first to change the font-size, second to add a purple background to the first section.

Other facts:

This page uses the default template (index.php) with no sidebars or widgets. The re-design is completely void of markup and styling from the original Bootstrap website; these aspects are handled entirely by the Rapid Platform. Images courtesy Bootstrap.

View markup

The following markup consists of Rapid Platform shortcodes and basic content that was added using the WordPress visual editor. We’ve grayed out everything that’s not related to the Rapid Platform so you can see just how little is required to achieve an accurate re-design.

Note: Since this re-design is essentially a site within a site, we had to override (reset) some styles on this page to match the Bootstrap Github page look and feel. We’ve developed a special shortcode which allows us to reset the page styles on-the-fly for this specific purpose only; we don’t anticipate developers using these resets so we’ve grayed them out.

[rp_style_reset css=".entry {font-family:Arial;} .entry h2,h3,h4,h5 {margin-top:0.2em; margin-bottom:0.2em; color:#5a5a5a; text-shadow:none; font-weight:200; letter-spacing:-1px; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;} .entry h2 {margin-top:1em; font-size:6em;} .entry h3 {font-size:60px;} .entry h5 {font-size:32px;} .entry a, .entry a:visited {color:#08C;} .entry a:hover{color:#08C; text-decoration:underline;}"]

[rp_style style="font-size:1.05em;"]

[rp_style_nest1 style="background:#6D3353;"]

<h2 style=”text-align: center;”><span style=”color: #ffffff;”>Bootstrap</span></h2>
<h5 style=”text-align: center;”><span style=”color: #ffffff;”>Sleek, intuitive, and powerful front-end framework for faster and easier web development.</span></h5>
<p style=”text-align: center;”>[rp_button caption="Download Bootstrap" width="200px;"]</p>

[/rp_style_nest1]

<h3 style=”text-align: center;”>Introducing Bootstrap.</h3>
<p style=”text-align: center;”><span style=”color: #c0c0c0;”><strong>Need reasons to love Bootstrap? Look no further.</strong></span></p>

[rp_grid count="3" span="1" margin:"2.5%"]

<p style=”text-align: center;”><img class=”aligncenter size-full wp-image-717″ title=”bs-docs-twitter-github” src=”http://therapidplatform.com/wp-content/uploads/2012/11/bs-docs-twitter-github.png” alt=”" width=”300″ height=”145″ /></p>

<h5 style=”text-align: center;”>By nerds, for nerds.</h5>
<p style=”text-align: center;”>Built at Twitter by <a href=”http://twitter.com/mdo”>@mdo</a> and <a href=”http://twitter.com/fat”>@fat</a>, Bootstrap utilizes<a href=”http://lesscss.org/”>LESS CSS</a>, is compiled via <a href=”http://nodejs.org/”>Node</a>, and is managed through <a href=”http://github.com/”>GitHub</a> to help nerds do awesome stuff on the web.</p>

[/rp_grid]

[rp_grid count="3" span="1" margin:"2.5%"]

<a href=”http://therapidplatform.com/wp-content/uploads/2012/11/bs-docs-responsive-illustrations.png”><img class=”aligncenter size-full wp-image-718″ title=”bs-docs-responsive-illustrations” src=”http://therapidplatform.com/wp-content/uploads/2012/11/bs-docs-responsive-illustrations.png” alt=”" width=”300″ height=”145″ /></a>
<h5 style=”text-align: center;”>Made for everyone.</h5>
<p style=”text-align: center;”>Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via <a href=”http://twitter.github.com/bootstrap/scaffolding.html#responsive”>responsive CSS</a> as well.</p>

[/rp_grid]

[rp_grid count="3" span="1" margin:"2.5%"]

<a href=”http://therapidplatform.com/wp-content/uploads/2012/11/bs-docs-bootstrap-features.png”><img class=”aligncenter size-full wp-image-716″ title=”bs-docs-bootstrap-features” src=”http://therapidplatform.com/wp-content/uploads/2012/11/bs-docs-bootstrap-features.png” alt=”" width=”300″ height=”145″ /></a>
<h5 style=”text-align: center;”>Packed with features.</h5>
<p style=”text-align: center;”>A 12-column responsive <a href=”http://twitter.github.com/bootstrap/scaffolding.html#grid”>grid</a>, dozens of components,<a href=”http://twitter.github.com/bootstrap/javascript.html”>JavaScript plugins</a>, typography, form controls, and even a <a href=”http://twitter.github.com/bootstrap/customize.html”>web-based Customizer</a> to make Bootstrap your own.</p>

[/rp_grid]

[rp_hbar]

<h3 style=”text-align: center;”>Built with Bootstrap.</h3>
<p style=”text-align: center;”><strong><span style=”color: #c0c0c0;”>For even more sites built with Bootstrap, </span><a href=”http://builtwithbootstrap.tumblr.com/” target=”_blank”>visit the unofficial Tumblr</a> <span style=”color: #c0c0c0;”>or </span><a href=”http://twitter.github.com/bootstrap/getting-started.html#examples”>browse the examples</a>.</strong></p>

[rp_grid count="4" span="1" margin:"2.5%"]

<p style=”text-align: center;”><img class=”aligncenter size-full wp-image-721″ title=”SoundReady.fm” src=”http://therapidplatform.com/wp-content/uploads/2012/11/SoundReady.fm_.png” alt=”" width=”300″ height=”250″ /></p>

[/rp_grid]

[rp_grid count="4" span="1" margin:"2.5%"]

<a href=”http://therapidplatform.com/wp-content/uploads/2012/11/Kippt.png”><img class=”aligncenter size-full wp-image-722″ title=”Kippt” src=”http://therapidplatform.com/wp-content/uploads/2012/11/Kippt.png” alt=”" width=”300″ height=”250″ /></a>

[/rp_grid]

[rp_grid count="4" span="1" margin:"2.5%"]

<a href=”http://therapidplatform.com/wp-content/uploads/2012/11/Gather-Content.png”><img class=”aligncenter size-full wp-image-723″ title=”Gather Content” src=”http://therapidplatform.com/wp-content/uploads/2012/11/Gather-Content.png” alt=”" width=”300″ height=”250″ /></a>

[/rp_grid]

[rp_grid count="4" span="1" margin:"2.5%"]

<a href=”http://therapidplatform.com/wp-content/uploads/2012/11/JS-Hint.png”><img class=”aligncenter size-full wp-image-724″ title=”JS Hint” src=”http://therapidplatform.com/wp-content/uploads/2012/11/JS-Hint.png” alt=”" width=”300″ height=”250″ /></a>

[/rp_grid]

[/rp_style]

Bootstrap

Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Download Bootstrap

Introducing Bootstrap.

Need reasons to love Bootstrap? Look no further.

By nerds, for nerds.

Built at Twitter by @mdo and @fat, Bootstrap utilizesLESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.

Made for everyone.

Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.

Packed with features.

A 12-column responsive grid, dozens of components,JavaScript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.

Built with Bootstrap.

For even more sites built with Bootstrap, visit the unofficial Tumblr or browse the examples.