Base

Includes useful default styles and base modules for common HTML elements.

npm version

Source Code

npm install @vrembem/base
@use "@vrembem/base";

Intro

Once loaded, the base component provides default styles for HTML elements and a number of output modules. Base also provides helpful variables and mixins for customizing the output.

<!-- Using base element modules -->
<h1 class="h1">...</h1>
<p>...</p>
<ul class="list">
  <li>...</li>
</ul>

<!-- Using base type module -->
<div class="type">
  <h1>...</h1>
  <p>...</p>
  <ul>
    <li>...</li>
  </ul>
</div>

Alternatively, you can disable CSS output using the $output and $output-[module] variables. All base modules have a corresponding output variable that inherits it’s value from $output.

// Will disable the output of the type module
@use "@vrembem/base" with (
  $output-type: false
);

// Will disable all modules, but enables the base module
@use "@vrembem/base" with (
  $output: false,
  $output-base: true
);

Global Variables

Setting these variables will impact more than one or up to all base modules.

Variable Default Description
$prefix-block null String to prefix blocks with.
$prefix-element "__" String to prefix elements with.
$prefix-modifier "_" String to prefix modifiers with.
$prefix-modifier-value "_" String to prefix modifier values with.
$output true Toggles the default output of all modules.

Modules

The base component consists of a number of modules with their own set of specific customizable variables and output mixins.

Modules are sorted by the order they’re imported; alphabetically except for base having priority as first import.

base

Outputs a number of base and reset element styles to help keep html elements predictable and easier to work with. Some more global options are set via the @vrembem/core component, while others that are specific to the base component are set directly here.

Variable Default Description
$output-base $outputtrue Toggles the output of this module.
$root-height 100% Sets the height property on the root html and body elements.
$color core.$color Sets the base color property.
$color-caption core.$color-subtle Sets the color property for the caption element.
$font-family core.$font-family Sets the base font-family property.
$font-family-mono core.$font-family-mono Sets the font-family property for elements that use a mono-spacing front.
$font-size core.$font-size Sets the base font-size property.
$font-size-sm core.$font-size-sm Sets the font-size property for small element.
$line-height core.$line-height Sets the base line-height property.
$box-sizing border-box Sets the default box-sizing property for all HTML elements.
$body-background null Sets the background color that's applied to the body element.

Here’s an example of the base styles applied by the base module:

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html,
body {
  height: $root-height;
}

html {
  box-sizing: $box-sizing;
  font-size: $font-size;
  line-height: $line-height;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {
  background: $body-background;
  color: $color;
  font-family: $font-family;
}

// Continued ...

For a complete understanding of what this module does, checkout the source: _base.scss

arrow

The arrow (caret) module creates directional triangles drawn with CSS.

<span class="arrow"></span>
<span class="arrow-up"></span>
<span class="arrow-left"></span>
<span class="arrow-right"></span>
Variable Default Description
$output-arrow $outputtrue Toggles the output of this module.
$class-arrow "arrow" String to use for the class name of the arrow module.
$arrow-color currentColor Sets the default border-color property of the arrow.
$arrow-size 8px 6px Sets the size of arrows. Can be a list where first number is the width of the "flat" side of the arrow and second is the width of the "pointer".
$arrow-radius 2px Applies a slightly rounded edge to the none pointer corners.

Example

Arrows are great indicators for buttons and menu items when interacting with them would toggle a popover or other togglable components.

<button class="button">
  <span>Button</span>
  <span class="arrow"></span>
</button>

@mixin arrow($dir, $color, $size, $radius)

Output the styles for an arrow.

Arguments

Variable Type Description
$dir string The direction the arrow should point. Can be 'up', 'down', 'left' or 'right'. Defaults to 'down'.
$color color Sets the border-color property of the arrow.
$size number (with unit) Sets the size of arrows. Can be a list where first number is the width of the "flat" side of the arrow and second is the width of the "pointer".
$radius number (with unit) Applies a slightly rounded edge to the none pointer corners.

Example

.custom-arrow {
  @include arrow("right", currentColor, 10px 15px);
}

// CSS Output
.custom-arrow {
  display: inline-block;
  flex-grow: 0;
  flex-shrink: 0;
  width: 0;
  height: 0;
  transform-origin: center;
  border-top: 15px solid currentColor;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-radius: 2px;
  pointer-events: none;
  transform: rotate(-90deg);
}

blockquote

The HTML blockquote element is used for marking up extended quotations. This module helps style these elements in a distinct and appealing way by providing the .blockquote CSS class.

"All over the place, from the popular culture to the propaganda system, there is constant pressure to make people feel that they are helpless, that the only role they can have is to ratify decisions and to consume."

Noam Chomsky, On Keeping the Population Passive
<blockquote class="blockquote" cite="...">
  <p>...</p>
  <footer>
    ...
    <cite>...</cite>
  </footer>
</blockquote>
Variable Default Description
$output-blockquote $outputtrue Toggles the output of this module.
$class-blockquote "blockquote" String to use for the class name of the blockquote module.
$blockquote-padding 1.5em Sets the padding property.
$blockquote-gap 1em Sets the vertical gap between elements inside a blockquote using the margin property.
$blockquote-color inherit Sets the text color property.
$blockquote-background null Sets the background color property.
$blockquote-border core.$border-light Sets the border property.
$blockquote-border-color-invert core.$border-color-invert Sets the inverted border color. This is used when blockquotes appear on a dark background.
$blockquote-border-radius null Sets the border-radius property.
$blockquote-accent-width 4px Sets the width of the accent CSS pseudo-element which renders on the right side of the blockquote element.
$blockquote-accent-offset -1px Sets the offset of the accent CSS pseudo-element. Recommended to set negative of the border width.
$blockquote-accent-color core.$primary Sets the color of the accent CSS pseudo-element.

@mixin blockquote()

Output the styles for a blockquote element.

Example

blockquote {
  @include blockquote();
}

// CSS Output
blockquote {
  position: relative;
  padding: 1.5em;
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: inherit;
}

blockquote::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 4px;
  background-color: #00bcd4;
}

blockquote > * + * {
  margin-top: 1em;
}

code

The HTML code element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. This module helps style these elements by providing the .code CSS class.

a = 17
<code class="code">a = 17</code>
Variable Default Description
$output-code $outputtrue Toggles the output of this module.
$class-code "code" String to use for the class name of the code module.
$code-padding null Sets the padding property.
$code-background null Sets the background property.
$code-border null Sets the border property.
$code-border-radius core.$border-radius Sets the border-radius property.
$code-color core.$pink Sets the text color property.
$code-color-invert core.$pink-300 Sets the inverted text color. This is used when code elements appear on a dark background.
$code-font-family core.$font-family-mono Sets the font-family property.
$code-font-size 0.9em Sets the font-size property.

@mixin code()

Output the styles for a code element.

Example

code {
  @include code();
}

// CSS Output
.code {
  color: #e91e63;
  font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9em;
  word-break: break-word;
}

Heading

Section headings in HTML are represented by the <h1> through <h6> elements. This module helps style these elements by providing the .h1-.h6 CSS classes.

Heading

Heading

Heading

Heading

Heading
Heading
<h1 class="h1">...</h1>
<h2 class="h2">...</h2>
<h3 class="h3">...</h3>
<h4 class="h4">...</h4>
<h5 class="h5">...</h5>
<h6 class="h6">...</h6>
Variable Default Description
$output-heading $outputtrue Toggles the output of this module.
$heading-font-family inherit Sets the font-family property.
$heading-line-height core.$line-height-sm Sets the line-height property.
$heading-color inherit Sets the text color property.
$heading-color-invert null Sets the inverted text color. This is used when heading elements appear on a dark background.
$heading-font-weight core.font-weight("semi-bold") Sets the font-weight property.
$heading-scale Sass Map Ref ↓ A map containing the font-size and optional line-height scale for HTML headings.

$heading-scale

A map containing the font-size and optional line-height scale for HTML headings. The map should contain a key of the heading level and the value of a font-size and optional line-height space separated.

$heading-scale: (
  "h1": 2.25em,
  "h2": 2em,
  "h3": 1.75em,
  "h4": 1.5em,
  "h5": 1.25em inherit,
  "h6": 1em inherit
) !default;

@mixin heading-base()

Output the shared base styles for heading elements.

Example

h1, h2, h3, h4, h5, h6 {
  @include heading-base();
}

// CSS Output
h1, h2, h3, h4, h5, h6 {
  color: inherit;
  font-weight: 600;
  line-height: 1.3;
}

@mixin heading-levels($map: $heading-scale), $prefix: null)

Output all the heading styles set in the passed map which defaults to the $heading-scale map.

Arguments

Variable Type Description
$map map The map object to search heading level values from. Defaults to $heading-scale.
$prefix string A string to prefix the key from the passed map object. This is used as the selector.

Example

// Using a custom map
$custom-heading-scale: (
  "h1": 3em 1.6,
  "h2": 2em 1.5,
  "h3": 2.5em 1.4,
);

// Pass in our custom map and a prefix
@include heading-levels($custom-heading-scale, $prefix: '.vb-');

// CSS Output
.vb-h1 {
  font-size: 3em;
  line-height: 1.6;
}

.vb-h2 {
  font-size: 2em;
  line-height: 1.5;
}

.vb-h3 {
  font-size: 2.5em;
  line-height: 1.4;
}

@mixin heading($level, $map: $heading-scale)

Output the specific styles for a heading level. Takes the heading level as an argument.

Arguments

Variable Type Description
$level number (1-6) or string (map key) The level of heading styles to output. Can either be a number to search for index or string to search for key.
$map map The map object to search heading level values from. Defaults to $heading-scale.

Example

// Using a custom map
$custom-heading-scale: (
  "h1": 3em 1.6,
  "h2": 2em 1.5,
  "h3": 2.5em 1.4,
);

// Pass in a level key and our custom map
h1 {
  @include mix.heading("h1", $custom-heading-scale);
}

// CSS Output
h1 {
  font-size: 3em;
  line-height: 1.6;
}

A link—usually represented by an anchor (<a>) HTML element with href attribute—creates the styles for a hyperlink to anything a URL can address. This module helps style these elements by providing the .link CSS class as well as a few optional modifiers.

<a href="#" class="link">Link</a>
<a href="#" class="link link_subtle">Link</a>
<a href="#" class="link link_invert">Link</a>
<a href="#" class="link link_invert-subtle">Link</a>
Variable Default Description
$output-link $outputtrue Toggles the output of this module.
$class-link "link" String to use for the class name of the link module.
$link-text-decoration none Sets the text decoration property.
$link-text-decoration-hover null Sets the text decoration property on hover state.
$link-transition null Sets the transition property.
$link-outline-focus currentColor dotted 1px Sets the outline property on :focus state.
$link-outline-focus-offset 0.125rem Sets the outline-offset property on :focus state.
$link-color core.$primary Sets the text color property.
$link-color-hover core.$primary-dark Sets the text color property on hover state.
$link-border 1px solid core.$border-color Sets the border property.
$link-border-hover 1px solid currentColor Sets the border property on hover state.
$link-subtle-color core.$color-subtle Sets the text color property on subtle modifier.
$link-subtle-color-hover $link-color-hover Sets the text color property on subtle modifier hover state.
$link-subtle-border-color core.$border-color Sets the border-color property on subtle modifier.
$link-subtle-border-color-hover currentColor Sets the border-color property on subtle modifier hover state.
$link-invert-color core.$white Sets the text color property on invert modifier.
$link-invert-color-hover core.$white Sets the text color property on invert modifier hover state.
$link-invert-border-color rgba(core.$white, 0.5) Sets the border-color property on invert modifier.
$link-invert-border-color-hover currentColor Sets the border-color property on invert modifier hover state.
$link-invert-subtle-color core.$color-invert-subtle Sets the text color property on invert-subtle modifier.
$link-invert-subtle-color-hover core.$color-invert Sets the text color property on invert-subtle modifier hover state.
$link-invert-subtle-border-color rgba(core.$white, 0.5) Sets the border-color property on invert-subtle modifier.
$link-invert-subtle-border-color-hover currentColor Sets the border-color property on invert-subtle modifier hover state.

Output the styles for a link element.

Example

a {
  @include link();
}

// CSS Output
a {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #00bcd4;
  text-decoration: none;
}

a:hover {
  border-bottom: 1px solid currentColor;
  color: #0097a7;
}

a:focus {
  outline: currentColor dotted 1px;
  outline-offset: 3px;
  border-bottom: 1px solid currentColor;
  color: #0097a7;
}

Output the styes for a specific link modifier. This is meant to be used in addition to a link’s base styles.

Arguments

Variable Type Description
$modifier string A string that matches a pre-defined modifier: "subtle", "invert" or "invert-subtle".

Example

a.subtle {
  @include link-modifier("subtle");
}

// CSS Output
.link_subtle {
  border-color: rgba(0, 0, 0, 0.1);
  color: #9e9e9e;
}

.link_subtle:hover, .link_subtle:focus {
  border-color: currentColor;
  color: #0097a7;
}

List

The list module helps add styles to unordered (<ul>) and ordered (<ol>) lists by providing the .list class.

  • One
  • Two
    • One
    • Two
    • Three
  • Three
  1. One
  2. Two
    1. One
    2. Two
    3. Three
  3. Three
<ul class="list">
  <li>One</li>
  <li>Two
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </li>
  <li>Three</li>
</ul>

<ol class="list">
  ...
</ol>
Variable Default Description
$output-list $outputtrue Toggles the output of this module.
$class-list "list" String to use for the class name of the list module.
$list-indent 1.5em Sets the margin-left property of list elements.
$list-item-gap 0.5em Sets the top margin of list items.

@mixin list()

Output the styles for list elements.

Example

ul, ol {
  @include list();
}

// CSS Output
ul, ol {
  margin-left: 1.5em;
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin-left: 1.5em;
}

ul li li,
ul li + li,
ol li li,
ol li + li {
  margin-top: 0.5em;
}

Pre

This module helps style the HTML <pre> element by providing the .pre CSS class. Whitespace inside this element is displayed as written.

-----------------------------
| I'm an expert in my field |
-----------------------------
     \   ^__^
      \  (oo)\_______
         (__)\       )\/\
             ||----w |
             ||     ||
<pre class="pre">
-----------------------------
| I'm an expert in my field |
-----------------------------
     \   ^__^
      \  (oo)\_______
         (__)\       )\/\
             ||----w |
             ||     ||
</pre>
Variable Default Description
$output-pre $outputtrue Toggles the output of this module.
$class-pre "pre" String to use for the class name of the pre module.
$pre-padding 1em Sets the padding property.
$pre-background core.$shade Sets the background property.
$pre-border null Sets the border property.
$pre-border-radius core.$border-radius Sets the border-radius property.
$pre-color core.$color Sets the text color property.

@mixin pre()

Output the styles for a pre element.

pre {
  @include pre();
}

// CSS Output
pre {
  padding: 1em;
  overflow: auto;
  border-radius: 4px;
  background: #f5f5f5;
  color: #212121;
  font-family: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
}

pre code {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font-size: 1em;
}

scroll-box

This module provides the .scroll-box CSS class to be applied as a wrapper around elements when they need a scrollable container.

This is a big circle...
<div class="scroll-box">
  ...
</div>
Variable Default Description
$output-scroll-box $outputtrue Toggles the output of this module.
$class-scroll-box "scroll-box" String to use for the class name of the scroll-box module.

@mixin scroll-box()

Output the styles for a scroll-box container.

Example

.scrollable {
  @include scroll-box();
}

// CSS Output
.scrollable {
  display: block;
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

Separator

This module adds the .sep and .sep-invert CSS classes which visually renders a horizontal separator. This can be applied to an <hr> HTML element. It can also be applied to a more generic <span> or <div> depending on the semantic context.





<!-- Separator -->
<hr class="sep">
<hr class="sep border-color-darker">

<!-- Invert separator -->
<hr class="sep-invert">
<hr class="sep-invert border-color-invert-darker">
Variable Default Description
$output-separator $outputtrue Toggles the output of this module.
$class-separator "sep" String to use for the class name of the separator module.
$separator-border 1px solid core.$border-color Sets the border property.
$separator-border-invert 1px solid core.$border-color-invert Sets the border property on invert variant.

@mixin separator($border)

Output the separator styles.

Arguments

Variable Type Description
$border border property The border styles to apply on separator output.

Example

.horizontal-line {
  @include separator();
}

// CSS Output
.horizontal-line {
  display: block;
  height: 0;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

type

The type module provides the .type CSS class as a quick way to apply many base modules to HTML elements directly. Base module classes will override a parent .type application when explicitly set. Use .type_invert for when text sits on a dark background.

<div class="type">
  <h1>Heading</h1>
  <p>...</p>
  <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
</div>

Modules that get mapped to HTML elements include:

  • .h1-.h6<h1>-<h6>
  • .link<a>
  • .code<code>
  • .sep<hr>
  • .list<ul> <ol>
  • .blockquote<blockquote>
  • .pre<pre>

The type module only applies styles to children HTML elements. It’s possible to nest other components within type and not have style or specificity conflicts. It’s recommended to wrap nested components with anonymous <div> elements when possible.

Variable Default Description
$output-type $outputtrue Toggles the output of this module.
$class-type "type" String to use for the class name of the type module.
$type-color null Sets the color property.
$type-color-invert core.$color-invert Sets the color property for text on a dark background.
$type-font-family null Sets the font-family property.
$type-font-size null Sets the font-size property.
$type-line-height null Sets the line-height property.
$type-gap null Applies vertical gap between elements via the gap module.

@mixin type()

Output base type module styles.

Example

.element {
  @include type();
}

@mixin type-invert($color)

Output invert modifier styles of the type module. Pass in the background color if you’re not sure it will meet the lightness threshold set in core.$lightness-threshold.

Arguments

Variable Type Description
$color color The background color to check the lightness threshold against.

Example

.element {
  @include type-invert(#303030);
  background: #303030;
}