bulma

by Nicholas Berlette

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma-helpers/0.4.0/css/bulma-helpers.min.css">
<div id="docs" class="bd-docs bd-is-contained">
  <div id="docsNavOverlay" class="bd-docs-overlay"></div>

  <main class="bd-docs-main">
    <div class="container">
      <div class="bd-vars">
        <h3 id="variables" class="title is-4 is-spaced bd-anchor-title">
          <span class="bd-anchor-name"> Variables </span>
          <a class="bd-anchor-link" href="#variables"> # </a>
        </h3>

        <div class="bd-var bd-is-head">
          <div class="bd-var-name">Name</div>
          <div class="bd-var-type">Type</div>
          <div class="bd-var-value">Value</div>
          <div class="bd-var-computed-value">Computed Value</div>
          <div class="bd-var-computed-type">Computed Type</div>
        </div>

        <div class="bd-var bd-is-body">
          <div class="bd-var-name">
            <figure class="highlight">
              <pre><code class="language-css" data-lang="css"><span class="err">$</span><span class="nt">panel-margin</span></code></pre>
              <button class="button bd-copy">Copy</button>
            </figure>
          </div>
          <div class="bd-var-type bd-is-variable">variable</div>
          <div class="bd-var-value">
            <figure class="highlight">
              <pre><code class="language-css" data-lang="css"><span class="err">$</span><span class="nt">block-spacing</span></code></pre>
              <button class="button bd-copy">Copy</button>
            </figure>
          </div>
          <div class="bd-var-computed-value">
            <figure class="highlight">
              <pre><code class="language-css" data-lang="css"><span class="err">1</span><span class="o">.</span><span class="err">5</span><span class="nt">rem</span></code></pre>
              <button class="button bd-copy">Copy</button>
  ...

CSS

:root {
  --white: white;
  --white-invert: #0a0a0a;
  --black: #0a0a0a;
  --black-invert: white;
  --light: whitesmoke;
  --light-invert: rgba(0, 0, 0, 0.7);
  --dark: #363636;
  --dark-invert: #fff;
  --primary: #00d1b2;
  --primary-invert: #fff;
  --primary-light: #ebfffc;
  --primary-dark: #00947e;
  --link: #485fc7;
  --link-invert: #fff;
  --link-light: #eff1fa;
  --link-dark: #3850b7;
  --info: #3e8ed0;
  --info-invert: #fff;
  --info-light: #eff5fb;
  --info-dark: #296fa8;
  --success: #48c78e;
  --success-invert: #fff;
  --success-light: #effaf5;
  --success-dark: #257953;
  --warning: #ffe08a;
  --warning-invert: rgba(0, 0, 0, 0.7);
  --warning-light: #fffaeb;
  --warning-dark: #946c00;
  --danger: #f14668;
  --danger-invert: #fff;
  --danger-light: #feecf0;
  --danger-dark: #cc0f35;
  --expo: #ffd257;
  --expo-invert: white;
  --expo-light: #fffaeb;
  --expo-dark: #946c00;
  --love: #f14668;
  --love-invert: white;
  --love-light: #feecf0;
  --love-dark: #cc0f35;
  --patreon: #f96854;
  --patreon-invert: white;
  --patreon-light: #feeeeb;
  --patreon-dark: #c01d07;
  --rss: #f26522;
  --rss-invert: white;
  --rss-light: #fef2ec;
  --rss-dark: #c1460b;
  --bleeding: #abf47c;
  --bleeding-invert: rgba(0, 0, 0, 0.7);
  --bleeding-light: #f3fdec;
  --bleeding-dark: #3c880b;
  --sass: #bf4080;
  --sass-invert: white;
  --sass-light: #faf0f5;
  --sass-dark: #b03b76;
  --amazon: #ffd863;
  --amazon-invert: rgba(0, 0, 0, 0.7);
  --amazon-light: #fffaeb;
  --amazon-dark: #946f00;
  --sponsor: #ea4aaa;
  --sponsor-invert: white;
  --sponsor-light: #fdedf6;
  --sponsor-dark: #c0167c;
  --twitter: #55acee;
  --twitter-invert: white;
  --twitter-light: #ecf6fd;
  --twitter-dark: #10609e;
  --videos: #48c78e;
  --videos-invert: white;
  --videos-light: #effaf5;
  --videos-dark: #257953;
  --extensions: #3e8ed0;
  --extensions-invert: white;
  --extensions-light: #eff5fb;
  --extensions-dark: #296fa8;
  --bootstrap: #6f5499;
  --bootstrap-invert: white;
 ...