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/bootstrap/dist/js/bootstrap.bundle.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.

Custom SASS

You can extend and modify the Gramex UI component library using SASS. This lets you add components, change defaults, and modify the behavior of Bootstrap.

The source for Gramex UI components is at bootstrap-theme.scss.

To serve your own SASS file (e.g. called style.scss) as CSS, use:

url:
  my-css-handler:
    pattern: ...
    handler: FunctionHandler
    kwargs:
      function: gramex.apps.ui.sass(handler, r"$YAMLPATH/style.scss")

This serves style.scss as a CSS file. Here's an example:

/* Define custom variables */
$color: black !default;
/* You can use Tornado templates. URL query parameters are available in `variables` */
$color: {{! variables.get('color', 'black') }};
/* Import UI components from the variable uicomponents_path */
@import "{{! uicomponents_path }}";
/* Or import Bootstrap directly from bootstrap_path */
@import "{{! bootstrap_path }}";
/* Add your custom components here */