CSS Guide
chevron down
 

CSS Guide

Overview

Stylesheets written in CSS (.css) files, can be used to control the appearance (color, size, font and position) of the elements within the Fitbit application user interface.

.label {
  fill: black;
  x: 0;
  y: 45%;
  width: 100%;
}

Adding a Stylesheet

In order to use a stylesheet, it must included within a .gui file.

<svg>
  <defs>
    <link rel="stylesheet" href="styles.css" />
  </defs>
</svg>

Selectors

The Fitbit rendering engine supports basic selectors in order to apply styling to an element.

The following simple selectors can be used:

Type selector:

text { font-family: System-Regular; fill: black; }

Applies to all elements of the specified type. e.g. <text>

Note: Using this selector may affect system components which use these elements.

Class selector:

.labels { font-family: System-Regular; fill: red }

Applies to all elements with the specified class name. e.g. class="labels"

ID selector:

#textbox { font-family: System-Regular; fill: blue }

Applies to the element with corresponding ID. e.g. id="textbox"

<text>I am black text!</text>
<text class="labels">I am red text!</text>
<text id="textbox">I am blue text!</text>

You can also use combinations of these selectors, and override previous values:

text.labels { font-family: System-Regular; fill: blue }

text#textbox { font-family: System-Regular; fill: black }

Fonts

Text elements can be styled to use any of the system fonts, at any size or color. Custom fonts are not supported at this time.

font-family: "Font name";

.fancy { font-family: "System-Light"; }

System Font

"System" is a special dynamic font which changes automatically based upon the currently selected locale. For example: When we select English then System-Light maps to Seville-Book, and System-Bold maps to Seville-Bold. When we select Japanese then System-Light maps to NotoSansJP-Light and System-Bold also maps to NotoSansJP-Light.

System-Regular, System-Light, System-Bold

Colfax Font

Colfax-Thin, Colfax-Regular, Colfax-Medium, Colfax-Light, Colfax-Bold, Colfax-Black

Fabrikat Font

Fabrikat-Bold, Fabrikat-Black

Seville Font

Seville-Regular, Seville-Italic, Seville-Condensed, Seville-Book, Seville-Book-Italic, Seville-Book-Condensed, Seville-Bold, Seville-Bold-Italic, Seville-Bold-Condensed

SevilleSharp Font

SevilleSharp-Regular, SevilleSharp-Book, SevilleSharp-Bold

Tungsten Font

Tungsten-Medium

Dimensions and Positioning

All sizes (width, height) and coordinates (x, y) can be specified in either pixels or percentages (%).

Size

  • width: 60 or width: 100%
  • height: 60 or height: 100%

Coordinates

  • x: 5 or x: 10%
  • y: 5 or y: 10%

You can also subtract pixels from percentages, such as 50%-10.

Coordinates are always relative to the parent svg element. In the following example, the inner rectangle element will be positioned 20% from the top and left of the screen, even though its x and y coordinates are 0.

<svg class="screen">
  <svg class="container">
    <rect class="inner" />
  </svg>
</svg>
.screen { width: 100%; height: 100%; viewport-fill: lightblue; }
.container { width: 60%; height: 60%; x: 20%; y: 20%; }
.inner { width: 100%; height: 100%; x: 0; y: 0; fill: red; }

Parent ($)

There is an additional special value $ which is always equal to the current values of the parent element. In a slight variant of the previous example, the inner text element will effectively be positioned at 20%-20.

.inner { width: 100%; height: 100%; x: $-20; y: $-20; fill: red; }

Colors

Colors can be specified in hexadecimal, or using named colors.

Hexadecimal

A 6-digit (or 3-digit shorthand), hexadecimal number that represents Red, Green, and Blue.

#RRGGBB or #RGB

text { fill: #FF9900 }
.labels { fill: #FFF }

Web Color Names

You can use any of the web standard color names within your applications.

text { fill: black; }
Name Hex Color
aliceblue #F0F8FF
antiquewhite #FAEBD7
aqua #00FFFF
aquamarine #7FFFD4
azure #F0FFFF
beige #F5F5DC
bisque #FFE4C4
black #000000
blanchedalmond #FFEBCD
blue #0000FF
blueviolet #8A2BE2
brown #A52A2A
burlywood #DEB887
cadetblue #5F9EA0
chartreuse #7FFF00
chocolate #D2691E
coral #FF7F50
cornflowerblue #6495ED
cornsilk #FFF8DC
crimson #DC143C
cyan #00FFFF
darkblue #00008B
darkcyan #008B8B
darkgoldenrod #B8860B
darkgray #A9A9A9
darkgreen #006400
darkgrey #A9A9A9
darkkhaki #BDB76B
darkmagenta #8B008B
darkolivegreen #556B2F
darkorange #FF8C00
darkorchid #9932CC
darkred #8B0000
darksalmon #E9967A
darkseagreen #8FBC8F
darkslateblue #483D8B
darkslategray #2F4F4F
darkslategrey #2F4F4F
darkturquoise #00CED1
darkviolet #9400D3
deeppink #FF1493
deepskyblue #00BFFF
dimgray #696969
dimgrey #696969
dodgerblue #1E90FF
firebrick #B22222
floralwhite #FFFAF0
forestgreen #228B22
fuchsia #FF00FF
gainsboro #DCDCDC
ghostwhite #F8F8FF
gold #FFD700
goldenrod #DAA520
gray #808080
green #008000
greenyellow #ADFF2F
grey #808080
honeydew #F0FFF0
hotpink #FF69B4
indianred #CD5C5C
indigo #4B0082
ivory #FFFFF0
khaki #F0E68C
lavender #E6E6FA
lavenderblush #FFF0F5
lawngreen #7CFC00
lemonchiffon #FFFACD
lightblue #ADD8E6
lightcoral #F08080
lightcyan #E0FFFF
lightgoldenrodyellow #FAFAD2
lightgray #D3D3D3
lightgreen #90EE90
lightgrey #D3D3D3
lightpink #FFB6C1
lightsalmon #FFA07A
lightseagreen #20B2AA
lightskyblue #87CEFA
lightslategray #778899
lightslategrey #778899
lightsteelblue #B0C4DE
lightyellow #FFFFE0
lime #00FF00
limegreen #32CD32
linen #FAF0E6
magenta #FF00FF
maroon #800000
mediumaquamarine #66CDAA
mediumblue #0000CD
mediumorchid #BA55D3
mediumpurple #9370DB
mediumseagreen #3CB371
mediumslateblue #7B68EE
mediumspringgreen #00FA9A
mediumturquoise #48D1CC
mediumvioletred #C71585
midnightblue #191970
mintcream #F5FFFA
mistyrose #FFE4E1
moccasin #FFE4B5
navajowhite #FFDEAD
navy #000080
oldlace #FDF5E6
olive #808000
olivedrab #6B8E23
orange #FFA500
orangered #FF4500
orchid #DA70D6
palegoldenrod #EEE8AA
palegreen #98FB98
paleturquoise #AFEEEE
palevioletred #DB7093
papayawhip #FFEFD5
peachpuff #FFDAB9
peru #CD853F
pink #FFC0CB
plum #DDA0DD
powderblue #B0E0E6
purple #800080
red #FF0000
rosybrown #BC8F8F
royalblue #4169E1
saddlebrown #8B4513
salmon #FA8072
sandybrown #F4A460
seagreen #2E8B57
seashell #FFF5EE
sienna #A0522D
silver #C0C0C0
skyblue #87CEEB
slateblue #6A5ACD
slategray #708090
slategrey #708090
snow #FFFAFA
springgreen #00FF7F
steelblue #4682B4
tan #D2B48C
teal #008080
thistle #D8BFD8
tomato #FF6347
turquoise #40E0D0
violet #EE82EE
wheat #F5DEB3
white #FFFFFF
whitesmoke #F5F5F5
yellow #FFFF00
yellowgreen #9ACD32

Fitbit Named Colors

You can use any of these Fitbit named colors to easily match your application with the colors used by system applications. Be aware that the specific color values may change in future system updates.

text { fill: fb-indigo; }
Name Hex Color
fb-aqua #3BF7DE
fb-black #000000
fb-blue #3182DE
fb-cerulean #8080FF
fb-cyan #14D3F5
fb-dark-gray #505050
fb-extra-dark-gray #303030
fb-green #00A629
fb-green-press #134022
fb-indigo #5B4CFF
fb-lavender #BCD8F8
fb-light-gray #A0A0A0
fb-lime #B8FC68
fb-magenta #F80070
fb-mint #5BE37D
fb-orange #FC6B3A
fb-peach #FFCC33
fb-pink #F83478
fb-plum #A51E7C
fb-purple #BD4EFC
fb-red #F83C40
fb-slate #7090B5
fb-slate-press #1B2C40
fb-violet #D828B8
fb-white #FFFFFF
fb-yellow #E4FA3C
fb-yellow-press #394003

Opacity

You can specify opacity to control the transparency of an element. Specify a value between 1.0 and 0.0. The lower value, the more transparent it is.

text { opacity: 0.3 }

Borders

The Fitbit rendering engine does not support the CSS stroke or border properties. To achieve a similar effect you need to draw two overlapping shapes.

The larger background shape should be filled with the desired border color, and the smaller foreground shape should be filled with the desired foreground color.

For example, here is a gray circle with a black border. Notice that the background circle has a larger radius r.

<svg width="100%" height="100%">
  <circle cx="50%" cy="50%" r="80" fill="black"/>
  <circle cx="50%" cy="50%" r="79" fill="gray"/>
</svg>

Image Grayscale Magic!

Grayscale images can be colored dynamically with the fill property. The black area of an image will be fully transparent (0) and the white will be fully opaque (255). All the mid-gray areas will inherit opacity according to their depth of color (0 - 255).

Note: The image must be 8-bit PNG format.

In the example below, the second hand on the clock has been filled with a color, but is actually just a grayscale image of a white hand on a black background.

Let's take a look how it's made.

Here's the black and white clock hand image:

The svg contains an image tag, which uses the black and white clock hand image.

<svg>
  <image width="100%" height="100%" href="hand.png" class="seconds" load="sync" />
</svg>

Then we apply the chosen fill color, and opacity within our CSS stylesheet.

.seconds { fill: #3fc0fc; opacity: 1; }

Aside from making UI more adjustable to color changes, the use of grayscale images reduces the size memory usage by a factor of 4.

You can generate images in the correct format by using the following ImageMagick command:

convert original.png -colorspace gray final.png

Or, in Adobe Photoshop set Image Mode > Grayscale, 8 Bits/Channel.

Horizontal Text Alignment

text-anchor: start | middle | end

text { x: 50%; text-anchor: middle; }

Used to align a string of text horizontally relative to the x-coordinate specified by the x attribute.

  • start: the start of the text is at the x-coordinate.
  • middle: the middle of the text is at the x-coordinate.
  • end: the end of the text is at the x-coordinate.

For vertical text alignment, see the Mixed Text Component.

Monospace Numbers

The firmware doesn't include any monospace fonts (fixed width), but we have included monospace numbers within some of the existing fonts. These can be accessed using the character codes 0x10-0x19 (where 0x10 is zero).

The following example takes a string of numbers, and converts them to their monospace equivalent.

//app/index.js

function updateClock() {
  var today = new Date();
  var hours = util.monoDigits(today.getHours());
  var mins = util.monoDigits(util.zeroPad(today.getMinutes()));

  myLabel.text = hours + ":" + mins;
}

//common/util.js

// Convert a number to a special monospace number
export function monoDigits(num, pad = true) {
  let monoNum = '';
  if (typeof num === 'number') {
    num |= 0;
    if (pad && num < 10) {
      monoNum = c0 + monoDigit(num);
    } else {
      while (num > 0) {
        monoNum = monoDigit(num % 10) + monoNum;
        num = (num / 10) | 0;
      }
    }
  } else {
    let text = num.toString();
    let textLen = text.length;
    for (let i = 0; i < textLen; i++) {
      monoNum += monoDigit(text.charAt(i));
    }
  }
  return monoNum;
}

const c0 = String.fromCharCode(0x10);
const c1 = String.fromCharCode(0x11);
const c2 = String.fromCharCode(0x12);
const c3 = String.fromCharCode(0x13);
const c4 = String.fromCharCode(0x14);
const c5 = String.fromCharCode(0x15);
const c6 = String.fromCharCode(0x16);
const c7 = String.fromCharCode(0x17);
const c8 = String.fromCharCode(0x18);
const c9 = String.fromCharCode(0x19);

function monoDigit(digit) {
  switch (digit) {
    case 0: return c0;
    case 1: return c1;
    case 2: return c2;
    case 3: return c3;
    case 4: return c4;
    case 5: return c5;
    case 6: return c6;
    case 7: return c7;
    case 8: return c8;
    case 9: return c9;
    case '0': return c0;
    case '1': return c1;
    case '2': return c2;
    case '3': return c3;
    case '4': return c4;
    case '5': return c5;
    case '6': return c6;
    case '7': return c7;
    case '8': return c8;
    case '9': return c9;
    default: return digit;
  }
}

Note: This is not supported by Colfax, Tungsten or Fabrikat fonts.

Web CSS Differences

There are a number of differences between Fitbit CSS and traditional web CSS:

  • Don't specify units for: font-size, letter-spacing. e.g. font-size: 120 not font-size: 120px.
  • Advanced selectors such as child, descendant or attribute selectors are not currently supported.