UI Libraries

Gramex includes some commonly used UI libraries. These libraries are best-in-class for their purpose. You’re encouraged to use these.

g1: Gramex UI library

<script src="ui/g1/dist/g1.min.js"></script>

bootstrap-select: styled <select> controls

<link
  rel="stylesheet"
  href="ui/bootstrap-select/dist/css/bootstrap-select.min.css"
/>
<script src="ui/bootstrap-select/dist/js/bootstrap-select.min.js"></script>

cookie: cookie parser

<script src="ui/cookie_js/cookie.min.js"></script>

d3: low-level chart library

<script src="ui/d3/build/d3.min.js"></script>
<!-- d3 v4 -->
<script src="ui/d3v5/dist/d3.min.js"></script>
<!-- d3 v5 -->

daterangepicker: date selector

<link rel="stylesheet" href="ui/daterangepicker/daterangepicker.css" />
<script src="ui/daterangepicker/daterangepicker.js"></script>

dayjs: time processing

<script src="ui/dayjs/dayjs.min.js"></script>

Dropzone: Drag and Drop AJAX uploads

<link rel="stylesheet" href="ui/dropzone/dist/min/dropzone.min.css" />
<script src="ui/dropzone/dist/min/dropzone.min.js"></script>

file-saver: download generated images/data as files

<script src="ui/file-saver/dist/FileSaver.min.js"></script>

font-awesome: icons

<link
  rel="stylesheet"
  href="ui/font-awesome/css/font-awesome.min.css"
/><!-- v4 icons -->
<link
  rel="stylesheet"
  href="ui/@fortawesome/fontawesome-free/css/all.min.css"
/><!-- v5 icons -->

html2canvas: screenshots

<script src="ui/html2canvas/dist/html2canvas.min.js"></script>

leaflet: map library

<link rel="stylesheet" href="ui/leaflet/dist/leaflet.css" />
<script src="ui/leaflet/dist/leaflet.js"></script>

lodash: data processing

<script src="ui/lodash/lodash.min.js"></script>

morphdom: virtual DOM library

<script src="ui/morphdom/dist/morphdom-umd.min.js"></script>

numeral: number formatting

<script src="ui/numeral/min/numeral.min.js"></script>

select2: filters as pills

<link rel="stylesheet" href="ui/select2/dist/css/select2.min.css" />
<script src="ui/select2/dist/js/select2.min.js"></script>

shepherd: guided tour

<link
  rel="stylesheet"
  href="ui/tether-shepherd/dist/css/shepherd-theme-arrows.css"
/>
<link
  rel="stylesheet"
  href="ui/tether-shepherd/dist/css/shepherd-theme-dark.css"
/>
<script src="ui/tether-shepherd/dist/js/tether.js"></script>
<script src="ui/tether-shepherd/dist/js/shepherd.min.js"></script>

topojson: map library

<script src="ui/topojson/dist/topojson.min.js"></script>