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.
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.
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
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
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>
Typography in BTSTRP thumbnails is brought to you by the excellent BLOKK font.
BTSTRP is intended for creating 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.
Admitted, this isn't well tested. Please submit issues for any problems you may encounter. If you'd like to contribute, feel free to open a PR. Also, I'd love to hear from you if you use BTSTRP as a part of your process.
Coming soon: it'd be cool to have a way to easily string a series of thumbnails together into an entire UI flow.