CodePen

HTML

            
              <!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>«Self-conscious» Modules</title>
</head>
<body>
  <h1>&laquo;Self-conscious&raquo; Modules</h1>
  <p>Thanks to tysonmatanich's elementQuery</p>
  <div class="line">
    <div class="col-main">
      <div class="widget">
        I'm
        <span class="small">Small</span>
        <span class="medium">Medium</span>
        <span class="large">Large</span>
      </div>
    </div>
    <div class="col-sub">
      <div class="widget">
        I'm
        <span class="small">Small</span>
        <span class="medium">Medium</span>
        <span class="large">Large</span>
      </div>
    </div>
  </div>
  <div class="line">
    <div class="col-eq">
      <div class="widget">
          I'm
          <span class="small">Small</span>
          <span class="medium">Medium</span>
          <span class="large">Large</span>
        </div>
    </div>
    <div class="col-eq">
      <div class="widget">
          I'm
          <span class="small">Small</span>
          <span class="medium">Medium</span>
          <span class="large">Large</span>
        </div>
      </div>

    <div class="col-eq">
      <div class="widget">
          I'm
          <span class="small">Small</span>
          <span class="medium">Medium</span>
          <span class="large">Large</span>
        </div>
      </div>

  </div>
  
</body>
</html>
            
          
!
via HTML Inspector

CSS

            
              /* github.com/nobilelucifero/tinyrn.css */ 
*, *:after, *:before {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

body {
  padding: 30px 20px;
}

h1, p {
  margin-bottom: 40px;
  text-align: center;
  color: #555;
}

.line {
  overflow: hidden;
  margin-bottom: 20px;
}
.col-main {
  float: left;
  width: 75%;
  padding: 0 10px;
}
.col-sub {
  float: left;
  width: 25%;
  padding: 0 10px;
}
.col-eq {
  float: left;
  width: 33.3334%;
  padding: 0 10px;
}

.widget {
  width: 100%;
  background-color: #555;
  border-radius: 5px;
  font-size: 13px;
  color: #fff;
  padding: 20px;
}

.widget[min-width~="100px"] { background-color: #9ebf39 }
.widget[min-width~="100px"] .medium,
.widget[min-width~="100px"] .large { display: none }
.widget[min-width~="100px"] .small { display: inline }

.widget[min-width~="200px"] { background-color: #3988bf }
.widget[min-width~="200px"] .small,
.widget[mim-width~="200px"] .large { display: none }
.widget[min-width~="200px"] .medium { display: inline }

.widget[min-width~="300px"] { background-color: #bf3962 }
.widget[min-width~="300px"] .small,
.widget[min-width~="300px"] .medium { display: none }
.widget[min-width~="300px"] .large { display: inline }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................