weather app

//No JS. Pure CSS

by Sparrow Squire

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<table class="weatherAverages">
  <caption>
      <span class="temp">Temperature (oC)</span>
      <span class="rain">Rainfall (mm)</span>
  </caption>
  <thead>
    <tr>
      <th>Temperature (oC)</th>
    </tr>
    <tr>
      <td>100</td>
      <td>90</td>
      <td>80</td>
      <td>70</td>
      <td>60</td>
      <td>50</td>
      <td>40</td>
      <td>30</td>
      <td>20</td>
      <td>10</td>
      <td>0</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="temp bar" style="height: 28px;">
        <span>J</span>
      </td>
      <td class="rain bar" style="height: 100px;"></td>
    </tr>
    
    <tr>
      <td class="temp bar" style="height: 30px;">
        <span>F</span>
      </td>
      <td class="rain bar" style="height: 160px;"></td>
    </tr>
    
    <tr>
      <td class="temp bar" style="height: 30px;">
        <span>M</span>
      </td>
      <td class="rain bar" style="height: 170px;"></td>
    </tr>
    
    <tr>
      <td class="temp bar" style="height: 30px;">
        <span>A</span>
      </td>
      <td class="rain bar" style="height: 130px;"></td>
    </tr>
    
    <tr>
      <td class="temp bar" style="height: 35px;">
        <span>M</span>
      </td>
      <td class="rain bar" style="height: 100px;"></td>
    </tr>
    
    <tr>
      <td class="temp bar" style="height: 80px;">
        <span>J</span>
      </td>
      <td class="rain bar" style="height: 30px;"></td>
    </tr>
    
    <tr>
      <td class="temp bar" style="height: 100px;">
        <span>J</span>
      </td>
      <td class="rain bar" style="height: 5px;"></td>
    </tr>
    
    <tr>
      <td class="temp bar" style="height: 150px;">
        <span>A</span>
      </td>
      <td class="rain bar" style="height:...

CSS

.weatherAverages {
  position: relative; 
  width: 100%;
  max-width: 768px;
  height: 300px;
  color: #5c5e60;
  font-family: sans-serif;
  font-size: 16px;
  margin: 0 auto; 
  padding: 0;
}

.weatherAverages th,
.weatherAverages tr,
.weatherAverages td { 
  position: relative;
  display: table-column;
  text-align: center;
  margin: 0; 
  padding: 0;
  z-index: 2;
 }

.weatherAverages td { 
  display: table-cell;
  width: 100%
}

.weatherAverages .bar {
  position: absolute;
  bottom: 0;
  float: left;
  width: 50%;
}
  .weatherAverages .temp {
    background: #F38630
   }

  .weatherAverages .rain {
    background: #69D2E7;
    left: 50%
  }

  .weatherAverages .bar span {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
  }


/* key */    
.weatherAverages caption {
  position: absolute;
  left: 100%; 
  top: 50%;
  margin-top: -22.5px
 }
 
.weatherAverages caption span {
  display: block;
  width: 150px;
  height: 20px;
  color: #000;
  padding: 5px;
  margin-bottom: 5px
}

.weatherAverages tr {
  float: left;
  height: 300px;
  width: 8.333%
}
.weatherAverages tbody {
  float: left;
  width: 80%
}
.weatherAverages thead,
.weatherAverages tfoot {
  position: relative;
  float: left;
  width: 10%;
  height: 300px;
}

.weatherAverages thead tr,
.weatherAverages thead td,
.weatherAverages tfoot tr,
.weatherAverages tfoot td {
  display: block;
  width: 100%
}

.weatherAverages thead th,
.weatherAverages tfoot th {
  display: block;
  width: 100%;
}


.weatherAverages thead tr,
.weatherAverages tfoot tr {
  position: absolute;
  bottom: 0;
  height: auto
}

  .weatherAverages thead tr:first-of-type,
  .weatherAverages tfoot tr:first-of-type {
    top: 0;
    bottom: auto
  }

.weatherAverages thead tr {
  padding-right: 15px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.weatherAverages thead td {
  text-align: right;
}

.weatherAverages tfoot tr {
  padding-left: 15px;
 ...