Introduction

The Gramex UI component library is a set of UI components that extend Bootstrap 4. These are to be used in all Gramex projects.

{% from guide_ui_app import only_source, view_source, config_file, ui_config_file %} {% import gramex.cache, json %} {% set config = gramex.cache.open(config_file, 'config') %} {% set ui_config = gramex.cache.open(ui_config_file, 'config') %} {% include 'ui-about.html' %} {% include 'ui-custom.html' %} {% include 'ui-fonts.html' %} {% include 'ui-sass.html' %} {% include 'ui-libraries.html' %}

Utilities

{% include 'ui-colors.html' %} {% include 'ui-hover.html' %} {% include 'ui-cursor.html' %} {% include 'ui-round.html' %} {% include 'ui-ripple.html' %} {% include 'ui-border.html' %} {% include 'ui-shadow.html' %} {% include 'ui-text.html' %} {% include 'ui-zindex.html' %} {% include 'ui-tours.html' %} {% include 'ui-underline.html' %}

Backgrounds

{% include 'ui-background.html' %} {% include 'ui-height.html' %} {% include 'ui-gradient.html' %} {% include 'ui-opacity.html' %}

Positioning

{% include 'ui-overlay.html' %} {% include 'ui-position.html' %}

Components

{% include 'ui-arrow.html' %} {% include 'ui-divider.html' %} {% include 'ui-tail.html' %}

Inputs

{% include 'ui-select.html' %} {% include 'ui-slider.html' %} {% include 'ui-switch.html' %} {% include 'ui-upload.html' %}

Bootstrap

{% include 'ui-accordion.html' %} {% include 'ui-alert.html' %} {% include 'ui-button.html' %} {% include 'ui-card.html' %} {% include 'ui-dashboards.html' %} {% include 'ui-date-picker.html' %} {% include 'ui-dropdown.html' %} {% include 'ui-forms.html' %} {% include 'ui-grid.html' %} {% include 'ui-input.html' %} {% include 'ui-loading.html' %} {% include 'ui-login.html' %} {% include 'ui-modal.html' %} {% include 'ui-panel.html' %} {% include 'ui-table.html' %} {% include 'ui-tooltip.html' %}