Base sizing units

/../hex-core/src/variables/_base.scss

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;

Breakpoints

/../hex-core/src/variables/_base.scss

For managing breakpoints, we're going to use https://github.com/zellwk/mappy-breakpoints. 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)
);

Colors

/../hex-core/src/variables/_colors.scss

Base colors of the Bitnami styleguide.

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

Accent
Accent
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%)

Action
Action
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
Base
Hex #ffffff
RGB rgb(255, 255, 255)
HSL hsl(0, 0%, 100%)
White
Hex #ffffff
RGB rgb(255, 255, 255)
HSL hsl(0, 0%, 100%)
Text
Hex #1C2B39
RGB rgb(28, 43, 57)
HSL hsl(209, 34%, 17%)
Light
Hex #f1f1f1
RGB rgb(241, 241, 241)
HSL hsl(0, 0%, 95%)
Dark
Hex #1C2B39
RGB rgb(28, 43, 57)
HSL hsl(209, 34%, 17%)
Gray
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
Danger
Hex #de0606
RGB rgb(222, 6, 6)
HSL hsl(0, 95%, 45%)
Highlight
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%;

Gradients

/../hex-core/src/variables/_colors.scss

Base gradients of the Bitnami styleguide.

Base
Brand
Hex (from) #00437B (Brand)
Hex (to) #1598CB (Secondary)
Accent
Hex (from) #008145 (Accent)
Hex (to) #82C341 (Light accent)
Action
Hex (from) #F58220 (Action)
Hex (to) #FDBA12 (Light action)
Light
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)`
);

Grid

/../hex-core/src/variables/_grid.scss

Defines the basic values for our Grid system

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

Names

/../hex-core/src/variables/_names.scss

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'
);

Spacing

/../hex-core/src/variables/_spacing.scss

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
);

Typography

/../hex-core/src/variables/_typography.scss

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="https://fonts.googleapis.com/css?family=Fira+Sans:300,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,
);

Z-index

/../hex-core/src/variables/_z-index.scss

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
);