OOOOPS. Your browser seems to be too old for this. Please update your browser.
Teutonic CSS
Use it

Comparsion list

←

Here are a few helpers and utility classes combined to achieve a comparion definition list.

SCSS: _grid.scss _position-defaults.scss _position-helpers.scss _margin.scss _definition-list.scss
VS

Commodore 64

Processor
1.023 MHz
Memory
64 KB
Display
320 x 200 px
Colors
16
Weight
1.8 kg
Released
1982

Samsung Galaxy S3

Processor
1.4 GHz
Memory
1 GB
Display
1280 x 720 px
Colors
16m
Weight
133 g
Released
2012

Moore's law → 

<div class="grid gap_s collapse-t pos-rel">
  <div class="pos-abs pos-c text_xxl text-thin ra-circle inverted pa_m docs-vs">VS</div>
  <div class="span-6">
    <div class="bg-1 pa_l">
      <h3 class="pa-b_s bo-b_xs text-center text-clip">Commodore 64</h3>
      <dl class="flex">
        <dt class="span-half bo-t_px pa-v_s text-clip">Processor</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">1.023 MHz</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Memory</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">64 KB</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Display</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">320 x 200 px</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Colors</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">16</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Weight</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">1.8 kg</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Released</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">1982</dd>
      </dl>
    </div>
  </div>
  <div class="span-6">
    <div class="bg-1 pa_l">
      <h3 class="pa-b_s bo-b_xs text-center text-clip">Samsung Galaxy S3</h3>
      <dl class="flex">
        <dt class="span-half bo-t_px pa-v_s text-clip">Processor</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">1.4 GHz</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Memory</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">1 GB</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Display</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">1280 x 720 px</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Colors</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">16m</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Weight</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">133 g</dd>
        <dt class="span-half bo-t_px pa-v_s text-clip">Released</dt>
        <dd class="span-half bo-t_px pa-v_s text-right text-clip">2012</dd>
      </dl>
    </div>
  </div>
</div>
<p class="text-serif text_s text-center ma-t_l">
  <a href="https://en.wikipedia.org/wiki/Moore%27s_law">Moore's law &rarr;</a>
</p>