Measured Style Guide

Become familiar with Measured’s style guide. Measured uses Bootstrap, a framework for building responsive sites.

On this page

Quick start

Looking to quickly add Measured’s styling to your project? Grab the latest copy of bootstrap as well as the _measured-style-guide.scss file located in the sites/assets/scss/ directory.

In detail, the process is as follows:

Install the Bootstrap npm module into your project:

npm install bootstrap@5.3.0-alpha1

grab the _measured-style-guide.scss file and reference it before Bootstrap in your main style.scss file, at the very top.

@import '/src/assets/measured-style-guide';
@import '../node_modules/bootstrap/scss/bootstrap';

Brand

Logotype

For the top navigation of a Measured Product, use this logotype. Do not modify the logos in any way. Do not use Measured’s branding for your own open or closed source projects.

The logo mark is also available in inverse with white text. All rules for our primary logotype apply to this as well.

Logo

When referencing Measured, use this logo mark. Do not modify the logos in any way. Do not use Measured’s branding for your own open or closed source projects.

Our logo mark is also available in black and white. All rules for our primary logo apply to these as well.

Name

Measured should always be referred to as just Measured. Nothing before or after it and no lowercase m.

Measured

Correct

measured

Incorrect

Measured Inc.

Incorrect

Color

Theme colors

We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in Bootstrap’s scss/_variables.scss file.

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

All these colors are available as a Sass map, $theme-colors.

scss/_variables.scss

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Check out our Sass maps and loops docs for how to modify these colors.

Check out All our colors for ranges that can be used for graphing.

Typography

Global settings

Measured sets basic global display, typography, and link styles. When more control is needed, check out the textual utility classes.

Use the font stack that is defined below.
For a more inclusive and accessible type scale, we use the browser’s default root font-size (typically 16px) so visitors can customize their browser defaults as needed.
Use the $font-family-base, $font-size-base, and $line-height-base attributes as our typographic base applied to the <body>.
Set the global link color via $link-color.
Use $body-bg to set a background-color on the <body> (#fff by default).
Set $font-size-base in rem.

These styles can be found within _reboot.scss, and the global variables are defined in _custom_variables.scss, and are defaulted in _variables.scss.

Font & Font Stack

Measured uses Inter for in-house products.

Measured uses a sans-serif font stack for most use-cases:

$font-family-sans-serif: Inter, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

For Monospace fonts (such as formatted code), use the following font stack:

$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

JS

A few components require the use of JavaScript to function. These can be loaded by using the ng-bootstrap package.

Modules

If you use <script type="module">, please refer to our using Bootstrap as a module section.

Components

Curious which components explicitly require our JavaScript and Popper? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.

Show components requiring JavaScript

Alerts for dismissing
Buttons for toggling states and checkbox/radio functionality
Carousel for all slide behaviors, controls, and indicators
Collapse for toggling visibility of content
Dropdowns for displaying and positioning (also requires Popper)
Modals for displaying, positioning, and scroll behavior
Navbar for extending our Collapse plugin to implement responsive behavior
Toasts for displaying and dismissing
Tooltips and popovers for displaying and positioning (also requires Popper)
Scrollspy for scroll behavior and navigation updates

Important globals

Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.

HTML5 doctype

Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.

<!doctype html>
<html lang="en">
  ...
</html>

Responsive meta tag

Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

You can see an example of this in action in the starter template.

Box-sizing

For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

.selector-for-some-widget {
  box-sizing: content-box;
}

With the above snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget.

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.