Table Of Contents

  1. Docs
  2. Styling & Formatting
  3. App theme.yaml file

App theme.yaml file

Note

This help should be accurate and comprehensive. If you see anything missing or that needs to be fixed, see How to Contribute or let us know in the Juice Slack #documentation channel.

Theme.yaml defines the visual look and feel of the application.

app.yaml
theme.yaml   <--- You are here
help/
public/
stacks/
      stackname/
            dataservice.py
            stack.yaml
            templates.html
            fixtures/
            help/

Theme.yaml Options

Note

theme.yaml changed significantly from juicebox 2 to juicebox 3. For more on the differences see converting_theme_yaml

favicon

A app-specific favicon can be defined by referencing a url. Here’s an example favicon that uses the Juice Analytics website favicon.

favicon: https://images.squarespace-cdn.com/content/v1/52f42657e4b0b3416ff6b831/1438717085445-QGCHHL4DQ4NAB4P7XJTE/ke17ZwdGBToddI8pDm48kBsHB0yfx-7z5ZSu5LL33v9Zw-zPPgdn4jUwVcJE1ZvWEtT5uBSRWt4vQZAgTJucoTqqXjS3CfNDSuuf31e0tVHixfACwYNJVM6dBR4JlzM0x_MQLOHRzw7ZyPy40T64SqQvevUbj177dmcMs1F0H-0/favicon.ico?format=100w

logo (theme)

Logos are defined the same way as Image Background. The image can be a url link or an image in the public/img/ directory.

You must set the logo height using the h property in config. You can use any of the Imgix API options to modify the image. Logos automatically use a retina resolution logo (the same as if you had set dpr: 2 in the Imgix API for DPR). It’s best if you use an image that is twice the height that you want to show on screen.

logo:
  image: 'http://logok.org/wp-content/uploads/2014/06/IBM-logo-blue.png'
  config:
    h: 120

This is what the logo looks like.

../../_images/logo_ibm_1.jpg

You can do much fancier things with the Imgix API. This example puts a red background behind the logo, then masks it with a circle.

logo:
  image: 'http://logok.org/wp-content/uploads/2014/06/IBM-logo-blue.png'
  config:
    h: 120
    w: 120
    fit: 'crop'
    mask: 'ellipse'
    bg: 'ff0000'

This is what the “enhanced” logo looks like.

../../_images/logo_ibm_2.jpg

Variables

Theme variables can be modified to change the style and layout of the entire applications. The following are the default settings for each variable. Any can be placed in the variables sections of the theme.yaml file to edit the theme.

Here’s an example with variables that have been customized:

variables: |-
  $theme-primary-color: #59adbf;
  $theme-accent-color: #eea83c;
  $theme-header-image: 'https://fruition-snapshots.s3.amazonaws.com/patterns/Research2-cropped.jpg';
  $theme-page-header-background-color: rgba(238, 168, 60, 0.6);
  $theme-page-header-height: 130px;
  $theme-header-app-title: true;
  $theme-slice-margin-left: 40px;
  $theme-page-header-image-ypos: -100px;

Color variables

// COLORS
// ----------------------------
$theme-primary-color: #1ba0e2;
$theme-accent-color: #fc932a;
$theme-benchmark-color: #C10AD8;
$theme-target-color: #FB9E1E;
$theme-dark-color: #000;
$theme-light-color: #fff;
$theme-good-color: #B1E07E;
$theme-bad-color: #ED9998;
$theme-alert-color: #CB001A;
$theme-comparison1-color: #1F77B4;
$theme-comparison2-color: #FF7F0E;
$theme-comparison3-color: #2CA02C;
$theme-comparison4-color: #D62728;
$theme-comparison5-color: #9467BD;

Layout variables

// LAYOUT
// ----------------------------
$theme-slice-sequence-style: 'non-linear'; // non-linear, linear

Shape variables

// SHAPE
// ----------------------------
$theme-base-radius: 6px;
$theme-shadows: true; // so far only controls table selection rows

Spacing variables

// SPACING
// ----------------------------
$theme-base-margin: 8px;

Font variables

// FONTS
// ----------------------------
$theme-base-font: 'Open Sans' !default;
$theme-display-font: $theme-base-font !default;
$theme-headline-font: $theme-base-font !default;
$theme-caption-font: $theme-base-font !default;
$theme-controls-font: $theme-base-font !default;
$theme-discussions-font: 'Merriweather' !default;

$theme-base-font-stack: #{$theme-base-font}, 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$theme-display-font-stack: #{$theme-display-font}, 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$theme-headline-font-stack: #{$theme-headline-font}, 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$theme-caption-font-stack: #{$theme-caption-font}, 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$theme-controls-font-stack: #{$theme-controls-font}, 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$theme-discussions-font-stack: #{$theme-discussions-font}, Georgia, serif !default;

Animation variables

// ANIMATION
// -------------------------
$theme-transition-length: 0.8s;

App background variables

// APP
// ---------------------
$theme-background-isImage: false;
$theme-header-app-title: false;
$theme-login-background-isPhoto: false;
$theme-login-background-image: '';

Stack background variables

// STACK
// ---------------------
$theme-body-background-color: transparentize($primary-color-light, .85);
$theme-stack-background-color: transparent;
$theme-stack-border: false;
$theme-stack-border-color: $dark-color-faintest;

Page header variables

// Page Header
// ---------------------
$theme-header-image: '';
$theme-page-header-image-xpos: 0px;
$theme-page-header-image-ypos: 0px;
$theme-page-header-background-color: transparent;
$theme-page-header-navitems-background-color: $theme-primary-color;
$theme-page-header-actions-background-color: $theme-primary-color;
$theme-page-header-height: 0px;
$theme-page-header-style-dark-stacks: ();
$theme-page-header-hide-nav: false;

Slice variables

// General Slice variables
// --------------------------
$theme-slice-background-color: $theme-light-color;
$theme-slice-margin-left: 10px;
$theme-slice-style: 'column'; // column, card
Styling & Formatting
Applying Backgrounds to Stacks and Slices
© Copyright 2017, Juice Analytics. Created using Sphinx.