Components

Utility

is-screen-xs

TODO:

is-screen-sm
is-screen-md
is-screen-lg
is-screen-xl
How to?
  1. Calculate Viewport Size in CSS
  2. CSS Type Casting to Numeric: tan(atan2()) Scalars by Jane Ori

Atoms

Molecules

Header 1Header 2Header 3
Row 1, Cell 1Row 1, Cell 2Row 1, Cell 3
Row 2, Cell 1Row 2, Cell 2Row 2, Cell 3
How to?
  1. `table-layout: fixed` on the table
    border-collapse: collapse;

    This prevent extra space between table cells and ensures that if a border is applied, it will be shown.

                        
.m-table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
    HTML Table Element Guide (Chris Coyier on Aug 12, 2024)

How to?
  1. Styling with the CSS :empty pseudo-class
    <div class="parallax height-quarter">
  <div class="parallax-back height-screen">
    <div class="dice" style="--top: 95%; --left: 50%"></div>
    <div class="dice" style="--top: 30%; --left: 1%"></div>
    <div class="dice" style="--top: 60%; --left: 29%"></div>
    <div class="dice" style="--top: 30%; --left: 80%"></div>
    <div class="dice" style="--top: 35%; --left: 35%"></div>
    <div class="dice" style="--top: 12%; --left: 90%"></div>
    <div class="dice" style="--top: 145%; --left: 90%"></div>
    <div class="dice" style="--top: 120%; --left: 90%"></div>
    <div class="dice" style="--top: 102%; --left: 90%"></div>
  </div>
  <div class="parallax-content">
    <p class="lorem">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </p>
  </div>
</div>