Visible Class Hierarchy

During the life of html structure and the classing of that structure you realize it's a bum. This was designed to take advantage of a list based HTML structure to create a natural hierarchy of elements to make it easy to visualize the relationship of elements and update the classes accordingly.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Visible Class Hierarchy</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>

<meta name="viewport" content="initial-scale=1.0, width=device-width" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <link href='//fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>

<h1>Visible Hierarchy</h1>

<ul class="item-field">
  <li>
    <input type="text" placeholder="section class" class="item-root">
    <ul class="item-field">
      <li>
        <input type="text" placeholder="header class">
        <ul>
          <li>
            <input type="text" placeholder="h2 class">
          </li>
        </ul> <!-- h2 -->
      </li>
    </ul> <!-- header -->

    <ul class="item-field">
      <li>
        <input type="text" placeholder="article class" class="item-root">
          <ul class="item-field">
            <li>
              <input type="text" placeholder="header class">
                <ul>
                  <li>
                    <input type="text" placeholder="title class">
                  </li>
                </ul> <!--title -->
                <ul>
                  <li>
                    <input type="text" placeholder="author class">
                  </li>
                </ul> <!-- author -->
                <ul>
                  <li>
                    <input type="text" placeholder="date-compartment class">
                    <ul>
                      <li>
                        <input type="text" placeholder="time class">
                      </li>
                    </ul> <!-- time -->
                    <ul>
                      <li>
                        <input type="text" placeholder="time class">
                      </li>
                    </ul> <!-- time -->
                  </li>
                </ul> <!-- date-compartment class -->
            </li>
          </ul> <!-- header -->

          <ul class="item-field">
            <li>
              <input type="text" placeholder="article-main class">
              <ul>
                <li>
                  <input type="text" placeholder="figure class">
                  <ul>
                    <li>
                      <input type="text" placeholder="img class">
                    </li>
                  </ul> <!-- img -->
                </li>
              </ul> <!-- figure -->
              <ul>
                <li>
                  <input type="text" placeholder="description class">
                </li>
              </ul>
              <ul>
                <li>
                  <input type="text" placeholder="article-body class">
                </li>
              </ul>
           </li>
        </ul> <!-- article-main -->

          <ul class="item-field">
            <li>
              <input type="text" placeholder="footer class">
              <ul>
                <li>
                  <input type="text" placeholder="detail-link class">
                </li>
              </ul> <!-- detail link -->
            </li>
        </ul> <!-- footer -->
      </li>
    </ul> <!-- article -->
  </li>
</ul> <!-- section -->
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
h1, h2 {
  margin: 0 0 1%;
  color: #fff;
}

ul {
  padding-left: 4.5%;
  list-style: none;
}

.item-root {
  margin-bottom: 2%;
}

.item-field {
  margin-bottom: 2%;
  padding: 2%;
  background: rgba(0, 0, 0, 0.1);
  border-top: 0.5em solid rgba(0, 0, 0, 0.075);
  border-radius: .2em;
}

::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

:-moz-placeholder {
  /* Firefox 18- */
  color: rgba(255, 255, 255, 0.5);
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: rgba(255, 255, 255, 0.5);
}

:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

input {
  display: block;
  margin: 0 0 1%;
  padding: 2%;
  width: 100%;
  font-size: 120%;
  font-weight: 300;
  background: rgba(255, 255, 255, 0.15);
  border: 0;
  border-radius: .2em;
  color: #fff;
  outline: 0;
  -webkit-transition: background .3s;
  transition: background .3s;
}
input:hover {
  background: rgba(255, 255, 255, 0.25);
}
input:focus {
  background: rgba(255, 255, 255, 0.35);
}

*,
*:before,
*:after {
  box-sizing: border-box;
  position: relative;
}

*:before,
*:after {
  pointer-events: none;
}

html {
  font-family: 'Oswald';
  background: #075d58;
}

body {
  margin: 0;
  padding: 3%;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Visible Class Hierarchy ) is write by Bryan Stoner, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Bryan Stoner