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.


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.