Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including btstrp with all npm packages installed. Try it out:

btstrp lists no main file and has no index.js, so it can't be directly required. If this is a mistake, please let us know. It may however contain internal files that you can require manually:

// require("btstrp/[??]")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

btstrp v0.0.1

BTSTRP is the smallest UI framework. Literally.

What is BTSTRP?

BTSTRP is the smallest UI framework out there...Literally the smallest. BTSTRP has all the same basic components as Bootstrap, but they're just tiny. Best of all, it uses the same markup structure as Bootstrap.

Getting started

Download or clone this repo. If your project uses Sass, you can import btstrp.scss into your project or just include btstrp.css in your site's <head>. If you're using vanilla CSS, just include btstrp.css in your site's <head>.

You can also install BTSTRP in your project with npm or Bower. Instructions.

Working on BTSTRP locally

If you want to contribute to BTSTRP, or just work on it for yourself, you should fork and clone this repo. From your local BTSTRP directory run:

$ npm install

Grunt is set up to compile the SCSS into CSS, watch for changes, and spin up a development server.

$ grunt

Using BTSTRP in your project

Most Bootstrap features and components are available in BTSTRP. A few features are excluded because they're not necessary at BTSTRP's small scale. For example, there is only one button size, and no responsive elements. For reference, you should refer to the excellent Bootstrap documentation.

Here's a list of excluded elements:

  • Grid system Media queries
  • Code Inline code, user input, blocks of code, variables, and sample output
  • Tables Responsive tables
  • Forms Control sizing
  • Buttons Sizes and link button
  • Images Responsive images
  • Helper classes Screen reader content, and image replacement
  • Responsive utilities Classes, print classes, and test cases
  • Glyphicons
  • Button groups Sizing and vertical variation
  • Button dropdowns Sizing
  • Input groups Sizing
  • Navbar Responsive elements
  • Alerts Dismissible alerts
  • Responsive embed
  • Carousels

The BTSTRP container

Wrap your BTSTRP thumbnails in the .btstrp-container element like so:

<div class="btstrp-container">
  <!-- thumnbail markup -->
</div>

If you'd like your container to have browser style, add .btstrp-browser.

<div class="btstrp-container btstrp-browser">
  <!-- thumbnail markup -->
</div>

Font

Typography in BTSTRP thumbnails is brought to you by the excellent BLOKK font.

Why is this useful?

BTSTRP is intended for creating series thumbnails of UIs and user flows for websites and applications. You can create a series of zoomed-out, "20,000 foot" interactive view of your site, which at a glance tell a whole story, like the page from a comic book.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free