Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

While creating a Pen, you can link out to external resources like JS and CSS files. For JS, we've long had a "typeahead" feature where you can start typing the name of a common JS resource and it will provide a menu of options for that resource. For instance, you can type "under", referencing the popular library Underscore.js, and you'll be able to select a URL to a CDN where underscore is hosted.

Now, we've added a couple of new typeahead options for the CSS external resources: Bootstrap and Foundation. These are super popular CSS frameworks. People use them in a variety of ways. Some for rapid prototyping. Some for a reliable foundation to build out from. Some just to slap some style on a simple project that could use it.

css-typeahead
Just type "boot" and you'll get an option for a CDN hosted copy of Twitter Bootstrap.

Example of Bootstrap Pen

See the Pen hBzat by Chris Coyier (@chriscoyier) on CodePen

We link it from BootstrapCDN. For now we're linking up 2.3.2, but we see Bootstrap 3 is actively being developed. Once that's a stable release we'll put a typeahead option for that in as well.

Example of Foundation Pen

See the Pen Foundation on CodePen by Chris Coyier (@chriscoyier) on CodePen

We link Foundation from jsDelivr.