Bootstrap Stencil

Bootstrap is one of the most popular css frameworks around and Stencil is a compiler for building fast web apps using Web Components.

This project attempts to make use of both in order to make light weight reusable web components for the Bootstrap framework.

Stencil components are just Web Components, so they work in any major framework or with no framework at all.

Project status

Note, this project is still in very early alpha and is not ready for use by anyone yet.

Dependencies

• Bootstrap (v4.x.x)
• Stencil

TODO

While each component has its own checklist, these are some of the bigger items that need to be done.

• Create documentation site (jekyll?)
• Isolate styles per component instead of relying on the full Bootstrap framework
• Implement javascript functionality (native javascript, not jQuery)
• Create a bs-reboot (or maybe normalize) component. This will be useful once each component has isolated styles.
• Add unit tests. Stencil now supports Jest for tests, so this should be implemented.
• Evaluate if a service worker should be used.

The lists below are meant to loosely follow the structure of the Bootstrap site.

Bootstrap layout

• Grid (not sure if implementation needed)
• Media object
• Utilities (not needed)

Bootstrap content

• Reboot (not needed)
• Typography (not needed)
• Code (not needed)
• Images (maybe needed for responsive image, thumbnails, rounded etc)
• Tables (maybe needed)
• Figures

Bootstrap components

• Alerts
  • Basic implementation
  • Add .alert-link class to content links automatically. On by default.
  • Add Dismissing functionality
    • Basic dismiss implementation (WIP)
    • Animate dismissal
  • Add events
    • Add close.bs.alert event
    • Add closed.bs.alert event
  • Isolate styles
• Badge
  • Basic implementation
  • Isolate styles
  • Pill badge
  • Link badge
• Breadcrumb
  • Basic implementation
  • Isolate styles
    • Breadcrumb Item
      • Basic implementation
• Buttons
  • Basic implementation
  • Isolate styles
  • Button types
    • Button
    • Input button
    • Link button
    • Outline button
  • Button sizes
  • Active state
  • Disabled state
  • Button plugin (not sure if this should be implemented, but keeping this here for reference)
    • Toggle states
    • Checkbox and radio buttons
• Button group (Because of the way Bootstrap handles the btn-group styles, this is going to take some creative thinking)
  • Basic implementation
  • Isolate styles
  • Button toolbar
  • Sizing
  • Vertical variation
• Card
  • Basic implementation
  • Isolate styles
  • Title
  • Subtitle
  • Top image cap
  • Bottom image cap
  • Card link
  • Card header
  • Card footer
  • Border cards
  • Card Groups
  • Card Decks
  • Card Columns (Don't think we probably need to implement this)
• Carousel
  • Isolate styles
  • Slides only
  • With controls
  • With indicators
  • With captions
• Collapse
  • Basic implementation
  • Isolate styles
• Dropdowns
  • Basic implementation
  • Isolate styles
• Form
  • Basic implementation
  • Isolate styles
• Input group
  • Basic implementation
  • Isolate styles
• Jumbotron
  • Basic implementation
  • Isolate styles
• List group
  • Basic implementation
  • Isolate styles
• Modal
  • Basic implementation
  • Isolate styles
• Navs
  • Basic implementation
  • Isolate styles
• Navbar
  • Basic implementation
  • Isolate styles
• Pagination
  • Basic implementation
  • Isolate styles
  • Disabled and active states
  • Sizing
  • Alignment
• Popovers
  • Basic implementation
  • Isolate styles
• Progress
  • Basic implementation
  • Isolate styles
  • Labels
  • Backgrounds
  • Multiple bars (not sure about this one)
  • Striped
  • Animated stripes
• Scrollspy
  • Basic implementation
  • Isolate styles
• Tooltips
  • Basic implementation
  • Isolate styles

Bootstrap utilities

I don't think that any of the Bootstrap utilities need to be implemented as components.