TLIY-CSS-Skeleton Example

by thelifeisyours

HTML

<div class="card bgLight0_6 bgLight0_7Hover transitionAll0_3sEase column w20em p1em ">
  <div class="row start center ovHidden">
    
    <div class="row start center shrinkNone ovHidden bgLight0_7 bgLight0_9Hover br0_3em min-w3_4em w3_4em h3_4em w20emHover transitionAll0_3sEase pointer">
      <div class="w3em h3em p0_2em br0_3em">
        <img class="br5em wInherit p0em m0em" src="https://www.gravatar.com/avatar/1abe6787b8f2eb747e944e7d8279fc66?s=64" />
      </div>
      <div class="column grow ovHidden p0_3em mr0_3em bgDark0_08">
        <div class="row">
          <div class="shrinkNone">TheLife IsYours</div>
        </div>
        <div class="row">
          <div class="shrinkNone">[email protected]</div>
        </div>
      </div>
    </div>
    
    <div class="row center h3em w16em shrinkNone ml0_5em ovHidden">
      <div class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
    </div>
    
  </div>
  <div class="column between mt0_5em">
    <div class="column br0_3em bgLight0_5 bgLight1Hover transitionAll0_3sEase mt0_5em p0_5em">
      <div class="fs0_9em mb1em">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
      <div class="fs0_8em">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
    
    <div class="column br0_3em bgLight0_5 bgLight1Hover transitionAll0_3sEase mt0_5em p0_5em">
      <div class="fs0_9em mb1em">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
      <div class="fs0_8em">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...

CSS

html, body {
  background: #272727;
  color: #1f1f1f;
  font-family: sans-serif;
  font-size: 20px;
  padding: 0;
  margin: 0;
}

.card {
  background: #f2f2f2;
  border-radius: 0.5em;
}

.cardimage {
  border-radius: 100%;
  overflow: hidden;
  align-items: center;
}

.row {
  display: flex;
  flex-flow: row;
}

.shrinkNone {
  flex-shrink: 0;
}

.inline {
  display: inline-block;
}

.column {
  display: flex;
  flex-flow: column;
}

.grow {
  flex-grow: 1;
}

.start {
  justify-content: start;
}

.center {
  align-items: center;
}

.baseline {
  align-items: baseline;
}

.ovHidden {
  overflow: hidden;
}

.pointer {
  cursor: pointer;
}

/* Background Colors
-------------------------------------------------------------------------*/
.bgLight0{ background: rgba(255, 255, 255, 0); } .bgLight0_03{ background: rgba(255, 255, 255, 0.03); } .bgLight0_05{ background: rgba(255, 255, 255, 0.05); } .bgLight0_08{ background: rgba(255, 255, 255, 0.08); } 
.bgLight0_1{ background: rgba(255, 255, 255, .1); } .bgLight0_2{ background: rgba(255, 255, 255, .2); } .bgLight0_3{ background: rgba(255, 255, 255, .3); } .bgLight0_4{ background: rgba(255, 255, 255, .4); } .bgLight0_5{ background: rgba(255, 255, 255, .5); } .bgLight0_6{ background: rgba(255, 255, 255, .6); } .bgLight0_7{ background: rgba(255, 255, 255, .7); } .bgLight0_8{ background: rgba(255, 255, 255, .8); } .bgLight0_9{ background: rgba(255, 255, 255, .9); } .bgLight1{ background: rgba(255, 255, 255, 1); }

.bgDark0{ background: rgba(0, 0, 0, 0); } .bgDark0_03{ background: rgba(0, 0, 0, 0.03); } .bgDark0_05{ background: rgba(0, 0, 0, 0.05); } .bgDark0_08{ background: rgba(0, 0, 0, 0.08); } 
.bgDark0_1{ background: rgba(0, 0, 0, .1); } .bgDark0_15{ background: rgba(0, 0, 0, .15); } .bgDark0_2{ background: rgba(0, 0, 0, .2); } .bgDark0_3{ background: rgba(0, 0, 0, .3); } .bgDark0_4{ background: rgba(0, 0, 0, .4); } .bgDark0_5{ background: rgba(0, 0, 0, .5); } .bgDark0_6{ background: rgba(0, 0, 0, .6); } .bgDark0_7{...