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