Blank Slate CSS Reset Demo Page

by mindplay

HTML

<h1 class="title">Demo page for <a href="https://gist.github.com/mindplay-dk/62243f634cdcce4f43d943c36378137d">Blank Slate CSS Reset</a></h1>

<!-- =============================================
      box-sizing: border-box
      ============================================= -->
<section>
  <h2 class="section-title">box-sizing: border-box</h2>
  <div style="width: 200px; padding: 20px; border: 10px solid steelblue; background: #e8f4f8;">
    Width declared as 200px
  </div>
  <p class="expected">Expected: box is exactly 200px wide (padding and border included, not added)</p>
</section>

<!-- =============================================
      margin: 0 / padding: 0
      ============================================= -->
<section>
  <h2 class="section-title">margin: 0 / padding: 0</h2>
  <p style="background: #fef9c3;">Paragraph with background — no default top/bottom margin</p>
  <ul style="background: #fef9c3;">
    <li>List item — no default padding-left</li>
  </ul>
  <blockquote style="background: #fef9c3;">Blockquote — no default margin or padding</blockquote>
  <p class="expected">Expected: no gaps between elements, no indentation, all flush to the left</p>
</section>

<!-- =============================================
      min-width: 0
      ============================================= -->
<section>
  <h2 class="section-title">min-width: 0 (flex overflow)</h2>
  <div style="display: flex; width: 300px; border: 1px solid #ccc;">
    <div style="background: #fde8e8; padding: 0.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
      This is a very long string of text that should be truncated rather than overflowing its flex container
    </div>
  </div>
  <p class="expected">Expected: text truncates with ellipsis, does not overflow the 300px container</p>
</section>

<!-- =============================================
      [hidden]
      =============================================...

CSS

/* https://gist.github.com/mindplay-dk/62243f634cdcce4f43d943c36378137d */

@import url('https://gist.githack.com/mindplay-dk/62243f634cdcce4f43d943c36378137d/raw/61de7d6a8f7ca7c3770f866bf7f64a63a052fdac/reset.css');

/* =============================================
    MINIMAL TEST STYLES (not part of the reset)
    These exist only to make sections readable.
    ============================================= */
body {
  font-family: sans-serif;
  font-size: 16px;
  padding: 2rem;
  max-width: 860px;
}

section {
  border: 1px solid #ccc;
  margin-bottom: 2rem;
  padding: 1.5rem;
}

h1.title {
  font-size: 24px;
  color: #555;
  margin-bottom: 2rem;
}

h1.sample-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

h2.section-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 1rem;
}

.expected {
  font-size: 0.75rem;
  color: #666;
  margin-top: 0.5rem;
  font-style: italic;
}

hr.divider {
  border-top: 1px solid #eee;
  margin: 1rem 0;
}