## 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 */