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.

Modules

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

• base
• arrow
• blockquote
• code
• heading
• link
• list
• pre
• scroll-box
• separator
• type

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.

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>

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

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.

<blockquote class="blockquote" cite="...">
  <p>...</p>
  <footer>
    ...
    <cite>...</cite>
  </footer>
</blockquote>

@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.

<code class="code">a = 17</code>

@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.

<h1 class="h1">...</h1>
<h2 class="h2">...</h2>
<h3 class="h3">...</h3>
<h4 class="h4">...</h4>
<h5 class="h5">...</h5>
<h6 class="h6">...</h6>

$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

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

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

Link

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>

@mixin link()

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

@mixin link-modifier($modifier)

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

Arguments

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.

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

@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>

@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.

<div class="scroll-box">
  ...
</div>

@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">

@mixin separator($border)

Output the separator styles.

Arguments

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.

@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

Example

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