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