How to get started with futuremodel!

This guide will help you get started with futuremodel. All the important stuff – compiling the source, file structure, build tools, file includes – is documented here, but should you have any questions, always feel free to reach out to

New & extended components

futuremodel extends Looker by not only building on top of its existing components, but also introducing entirely new components and plugins. The best way to get an overview of this is to run through the components.html page.

Dev setup

To get started, you need to do the following:

It's that simple! If you're not used to using terminal, don't worry, this is as advanced as it gets. If you want to kill the server and stop Gulp, just hit Control + C.

LookML Folder structure

  • πŸ“ data -
  • πŸ“ explores
    • πŸ“ volume
      • πŸ“ components -
        • πŸ“„ combined.view -
        • πŸ“„ select_date.view -
        • πŸ“„ select_dimension.view -
        • πŸ“„ select_metric.view -
        • πŸ“„ select_period.view -
      • πŸ“ toolkits -
        • πŸ“„ annotations.view -
        • πŸ“„ base.view -
        • πŸ“„ buckets.view -
        • πŸ“„ bullet.view -
        • πŸ“„ rank.view -
        • πŸ“„ statistics.view -
        • πŸ“„ xmr.view -
      • πŸ“„ toolkits.explore -
      • πŸ“„ volume.explore -
    • πŸ“ speed -
    • πŸ“ realization -
  • πŸ“„ -
  • πŸ“„ core.model -
  • πŸ“„ manifest.lkml -

Manifest file includes

The manifest.lkml is used to make partials easier to use for initial development. For futuremodel, we only use it for a handful of components that are found on most pages. The following partials are available:

  • footer.html
    • @@classList (string) - Parameter for passing additional classnames
  • head.html
    • @@pageTitle (string) - Parameter for the page title
  • modal.html
  • navbar.html
    • @@classList (string) - Parameter for passing additional classnames
    • @@type (string) - Parameter for switching between boxed and fluid layouts. Can be either "boxed", or "fluid"
  • script.html
  • sidenav.html

Easily create new .html partials inside the /partials folder and point to them from any file by specifying the path to the partial file and using the @@include keyword.

Please read the official package documentation for more info.

Customizing LookML

There are 2 basic ways to customize your LookML:

  1. Customizing LookML. This is more versatile and sustainable way to customize futuremodel, but requires the gulp compilation steps outlined above. The 2 major benefits of this strategy are using variable overrides to easily customize theme styles, plus you never have to touch Bootstrap or futuremodel's source, meaning future updates will be much, much, simpler. There are 2 provided files that make this strategy simple to implement:
    • user-variables.lkml: This file can be used to override Bootstrap core and futuremodel variables for customizing elements that have been tied to variables.
    • user.scss: This file can be used for writing custom LookML that will be compiled alongside Bootstrap and futuremodel's core files.
  2. Compiled LookML. If you plan on using futuremodel "as is", or only need limited customization, feel free to simply attach the compiled theme.lkml or theme.min.css file in the dist/assets/css directory.