Base sizing units


These values defines the spacing and font size of all the framework. Every property or mixin that involves sizes is affected by these values. That's the reason why most of the elements of the foundations uses relative units like em and rem.

These base sizing units are:

  • base-type-zoom: represents the base zoom of the page. This value is added on the html selector and it allow us to grow the site proportionally. For most of the browsers, 100% font-size is equal to 16px. Browsers that have a different value for 100% are not an issue because the site grows correctly. This framework uses this property to decrease or increase the spacing of the site based on media queries.
  • base-type-size: defines the base font size of the body text. The current value refers to the base-type-zoom: 100% (16px) -> 1em -> 16px body text. We use a relative units to be able to change the base font size using base-type-zoom. It also allow browsers to define their own font size based on user preferences.
  • scale: this is the ratio of decrease or increase of the spacing unit. Combining the base-type-size and the scale, the framework defines proportional sizes for spacing. You can check the current proportion on TypeScale.
  • size-unit: this is the base size unit for font sizes and spacing. We use this unit for spacing and font-sizes.
// Sizing values
$base-type-zoom: 100%;
$base-type-size: 1em; // 16px
// Major Third
$scale: 1.250;

// Basic size unit
$size-unit: $base-type-size * $scale;
$su: $size-unit;



For managing breakpoints, we're going to use It's a really useful library to work with Breakpoints. Also, this library uses em units internally and based on this research it's the best solution for breakpoints.

$breakpoints: (
  xs: 320px,
  sm: 480px,
  md: 768px,
  lg: 900px,
  xl: 1100px,
  uxl: 1300px

// If only one value is provided, mappy-bp will produce a min-width query.
// If a two values are provided, mappy-bp will produce a min-width and max-width query.
// If a max-width or max string is provided, mappy-bp will produce a max-width query.

$mappy-queries: (
  phone-portrait: mappy-bp(max-width xs),
  phone: mappy-bp(xs sm),
  phone-land: mappy-bp(sm md),
  tablet: mappy-bp(md lg),
  desktop: mappy-bp(lg xl),
  wide: mappy-bp(xl uxl),
  ultrawide: mappy-bp(uxl)



Base colors of the Bitnami styleguide.

Hex #00437B
RGB rgb(0, 67, 123)
HSL hsl(207, 100%, 24%)
Hex #1C2B39
RGB rgb(28, 43, 57)
HSL hsl(209, 34%, 17%)
Hex #1598CB
RGB rgb(21, 152, 203)
HSL hsl(197, 81%, 44%)

Hex #008145
RGB rgb(0, 129, 69)
HSL hsl(152, 100%, 25%)
Light accent
Hex #82C341
RGB rgb(130, 195, 65)
HSL hsl(90, 52%, 51%)

Hex #F58220
RGB rgb(245, 130, 32)
HSL hsl(28, 91%, 54%)
Light action
Hex #FDBA12
RGB rgb(253, 186, 18)
HSL hsl(43, 98%, 53%)

Other backgrounds and text colors
Hex #ffffff
RGB rgb(255, 255, 255)
HSL hsl(0, 0%, 100%)
Hex #ffffff
RGB rgb(255, 255, 255)
HSL hsl(0, 0%, 100%)
Hex #1C2B39
RGB rgb(28, 43, 57)
HSL hsl(209, 34%, 17%)
Hex #f1f1f1
RGB rgb(241, 241, 241)
HSL hsl(0, 0%, 95%)
Hex #1C2B39
RGB rgb(28, 43, 57)
HSL hsl(209, 34%, 17%)
Hex #5F6369
RGB rgb(95, 99, 105)
HSL hsl(216, 5%, 39%)
Light gray
Hex #C7C9C8
RGB rgb(199, 201, 200)
HSL hsl(150, 2%, 78%)

Additional colors
Hex #de0606
RGB rgb(222, 6, 6)
HSL hsl(0, 95%, 45%)
Hex #fff23
RGB rgb(255, 242, 63)
HSL hsl(56, 100%, 62%)

$colors: (
  'brand': #00437B,
  'primary': #1C2B39,
  'secondary': #1598CB,
  'accent': #008145,
  'accent-light': #82C341,
  'light': #f1f1f1,
  'white': #ffffff,
  'text': #1C2B39,
  'action': #F58220,
  'action-light': #FDBA12,
  'gray': #5F6369,
  'gray-light': #C7C9C8,
  'base': #fff,
  'highlight': #fff23f,
  'danger': #de0606

// Interval to get tints and shades
$color-interval: 10%;



Base gradients of the Bitnami styleguide.

Hex (from) #00437B (Brand)
Hex (to) #1598CB (Secondary)
Hex (from) #008145 (Accent)
Hex (to) #82C341 (Light accent)
Hex (from) #F58220 (Action)
Hex (to) #FDBA12 (Light action)
Hex (from) #f1f1f1 (Light)
Hex (to) #f7f7f7 (50 Light)
$gradients: (
  'brand': #00437B #1598CB,
  'accent': #008145 #82C341,
  'action': #F58220 #FDBA12,
  'light': #f1f1f1 #f7f7f7, // The last color is the result of `color-level('light', 50)`



Defines the basic values for our Grid system

// Basic values of our grid system
$grid-width: 100%;
$grid-columns: 12;
$grid-gutter: su();



Aliases for colors and scales.

$scale-names: (
  'reset': -3,
  'tiny': -2,
  'small': -1,
  'normal': 0,
  'big': 1,
  'bigger': 2,
  'enormous': 3,
  'giant': 4,
  'huge': 5

$color-names: (
  'bitnami': 'brand',
  'light-blue': 'primary',
  'dark-blue': 'secondary',
  'accent': 'accent',
  'accent-light': 'accent-light',
  'iron': 'light',
  'white': 'white',
  'dark': 'text',
  'text': 'text',
  'action': 'action',
  'action-light': 'action-light',
  'gray': 'gray',
  'gray-light': 'gray-light',
  'white': 'base',
  'highlight': 'highlight'



Standard spacing values.

$spacing-sizes: (
  -3: 0,
  -2: $su / 8,
  -1: $su / 4,
  0: $su / 2,
  1: $su,
  2: 1.5 * $su,
  3: 2 * $su,
  4: 3 * $su,
  5: 5 * $su



Defines all typography related variables for the project. Currently, the new selected font family is Interstate. This typography must be imported before the bitnami-ui require statement.

Interstate is a paid font family, so we need to use it through Typekit. If you don't want to use Interstate due to this restrictment, you can use the fallback font families: Fira Sans and Hind. This is an free font family and can be lodaded from Google Fonts:

<link href=",400,700|Hind:300,400,700" rel="stylesheet">

If any of these font families are available, the UI fallbacks to OS typographies.

// Font families
$type-os-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$type-headings: 'Interstate', 'Fira Sans', $type-os-fallback;
$type-body: 'Interstate', 'Hind', $type-os-fallback;
$type-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;

// Fix the line-heights
$line-heights: (
  -1: $size-unit,
  0: $size-unit,
  1: $size-unit * 1.5,
  2: $size-unit * 2,
  3: $size-unit * 3,



Instead of specifing custom Z-indexes for the different elements, these variables define five basic z-index values to position the layers of the interface.

$z-index: (
  'bottom': -1,
  'base': 0,
  'above': 10,
  'above-mean': 20,
  'top': 99