Outputs some basic typographic styles If $use-base is true, the result of this mixin is included in the default nebula.css output.

Use discretionary(fancier) ligatures for headings, this might be a bit too much for certain fonts, and is therefore off by default.

Prints out multiple CSS classes for each $border-properties and $border-colors. If $use-borders is true, the result of this mixin is included in the default nebula.css output.

.n-border-accent { border: 1px solid #009CDA; }
.n-border-bottom-accent { border-bottom: 1px solid #009CDA; }

// Also works with gradients (where possible)
.n-border-gradient {
  border: 1px solid #F9A03D;
  border-image: linear-gradient(-180deg, #FBDA61 0%, #F76B1C 100%) 1;
 }
.n-border-bottom-gradient { border-bottom: 1px solid #F9A03D; }

an array of color names that should get border classes. Nebula will then look up that color in the $colors map and use that.

Default size in pixels for borders when they are generated.

List of properties that should be generated by @border-rules. For example, assuming the existence of an 'accent' color, the default value ('border', 'border-bottom') will generate .n-border-accent, and .n-border-bottom-accent. If one of the colors is a gradient, it will use the fallback color for every property other than border;

Prints out text-color and background-color classes for every $colors in Nebula's configuration. You probably only need to use this once, and If $use-colors is true, the result of this mixin is included in the default nebula.css output.

// For every $color, e.g. red:
.n-color-red { color: #B5200F; }
.n-background-red { background-color: #B5200F; }

Retrieves the value of a color from your configuration.

Exports some basic helper classes to aid in development. If $use-helper-classes is true, the result of this mixin is included in the default nebula.css output.

.n-text-centered {}  // Centers text
.n-block-centered {} // Centers a block element
.n-inline {}         // Turns a block element into an inline element
.n-clear {}          // Applies a clearfix to the element
.n--small-caps {}    // Uses small-capitals, or synthesises them if not supported by font.
.n-hide-on-mobile {} // Hides element if viewport width < `$breakpoint-hide-on-mobile`
.n-show-on-mobile {} // Shows element only if viewport width < `$breakpoint-hide-on-mobile`

By default, Nebula's reset stylesheet removes any styling of lists. This allows you to use semantic lists for non-text elements.

To use traditional list, you can use the .n-ul and .n-ol classes created by this mixin. If $use-lists is true, the result of this mixin is included in the default nebula.css output.

.n-ul { list-style: disc outside; }
.n-ol { list-style: decimal outside; }

Toggles the creation of reset classes in the output css

Toggles the output of basic styling and typography in the output css

Toggles the output of border classes in the output css

Toggles the output of color classes in the output css

Toggles the output of basic helper classes in the output css

Toggles the output of list-related classes in the output css

Toggles the output of spacing classes in the output css

Toggles the output of typography and font-size classes in the output css

Determines which extra “directions” to generate spacing classes for (besides “all”, vertical, and horizontal)

Generate spacing rules for a specific scale. This will take the value defined for each item in $spacing-values, and multiply it by a number. Useful for adjusting spacing at different breakpoints. If either parameter is left empty, spacing for that direction will not be affected (see rules-for-space-value). If $use-spacing is true, the output this mixin with the parameters scale-spacing(1,1) is included in the default nebula.css output.

  // Assuming, and the example above:
  $spacing-values: ('medium': 20, 'large': 40);

  @include scale-spacing(1.5, 1);
  // results in:
  @include rules-for-space-value('medium', 30, 20);
  @include rules-for-space-value('large', 60, 40);

  @include scale-spacing(.5);
  // results in:
  @include rules-for-space-value('medium', 10, 10);
  @include rules-for-space-value('large', 20, 20);

Mixin that prints out multiple CSS classes for managing spacing between and within elements. Depending on values in the $spacing-directions list, it will generate additional classes for specific directions. By default this adds spacing classes for the top and bottom.

.n-spacing-$name {}  // (margin on all sides)
.n-vspacing-$name {} // (vertical margins only)
.n-hspacing-$name {} // (horizontal margins)
.n-padding-$name {}  // (padding on all sides)
.n-vpadding-$name {} // (vertical padding only)
.n-hpadding-$name {} // (horizontal padding)

// For working with items in a grid:
.n-frame-$name    {} // (negative margins)

// Additionally, based on $spacing-directions:
.n-spacing-top-$name {}
.n-spacing-bottom-$name {}
.n-padding-top-$name {}
.n-padding-bottom-$name {}

// If either `$vvalue` or `$hvalue` parameter is left empty,
// the mixin wil omit output regarding that direction:
 @include rules-for-space-value('medium', null, 40);
 // Outputs:
 .n-spacing-medium  { margin-left: 40px;  margin-right: 40px; }
 .n-hspacing-medium { margin-left: 40px;  margin-right: 40px; }
 .n-padding-medium  { padding-left: 40px; padding-right: 40px; }
 .n-hpadding-medium { margin-left: 40px;  margin-right: 40px; }

Retrieves the value of a spacing value from your configuration. Please note that this value does not scale when @include scale-spacing() is used.

Generates typography classes for a scale parameter. This looks up every font size and multiplies it with the scale value. Useful for adjusting font size at a breakpoint.

  @media screen and (min-width: 1280px) {
    body { font-size: 21.6px; }
    .n-type-normal { font-size: 21.6px; }
    .n-type-small { font-size: 18px; }
    .n-type-smallest { font-size:  12.52px; }
    h1, .n-type-h1 { font-size: 37.2px; }
    h2, .n-type-h2 { font-size: 31.2px; }
    h3, .n-type-h3 { font-size: 25.2px; }
  }

Retrieves the value of a font size from your configuration. Please note that this value does not scale when @include scale-type() is used.

The text prefixed to all of the classes generated by Nebula. In some cases you might change this to something like L or UI.

Used together with the .n-hide-on-mobile and .n-show-on-mobile classes, will either hide or show content depending on the value of this breakpoint.