Visible Class Hierarchy

In this example below you will see how to do a Visible Class Hierarchy with some HTML / CSS and Javascript

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.

Thumbnail
This awesome code was written by mimoduo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright mimoduo ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Visible Class Hierarchy</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.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/mimoduo/visible-class-hierarchy-aALrg */
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;
  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%;
}

Comments