Quick start

To use it, add this to your gramex.yaml:

import:
  ui:
    path: $GRAMEXAPPS/ui/gramex.yaml    # Import the UI components
    YAMLURL: $YAMLURL/ui/               # ... at this URL

Then include this in your HTML:

<link rel="stylesheet" href="ui/bootstraptheme.css">

<script src="ui/jquery/dist/jquery.min.js"></script>
<script src="ui/popper.js/dist/umd/popper.min.js"></script>
<script src="ui/bootstrap/dist/js/bootstrap.min.js"></script>

Custom Bootstrap

ui/bootstraptheme.css is a customized version of Bootstrap with additional features.

Select the Change Theme button on at the top of this page to colors, fonts and style. Then link to the new URL. For example, ?primary=maroon changes the primary color to maroon. (Reset colors.)

There are also additional components and utilities in the library. See the sidebar for a full list.