Component Structure

by amindunited

HTML

<div class="html-page block">
	<h2>HTML Page</h2>
  <div class="map">
    <div class="map-item">
      <div class="color-block html-page">

      </div>
      The Static HTML Page
    </div>
    <div class="map-item">
      <div class="color-block framework">

      </div>
      Framework - The Javascript Library responsible for build, data, routing...
    </div>
    <div class="map-item">
      <div class="color-block data-component">

      </div>
      Data Component - A child of the framework that communichandles data and events
    </div>
    
    <div class="map-item">
      <div class="color-block component">

      </div>
      Component - A framework agnostic UI element. Does not connect directly to any data source.
    </div>
    
    <div class="map-item">
      <div class="emoji">⬇️</div> Data flow Down. Data that will be passed down (props and attributes)
    </div>
    <div class="map-item">
      <div class="emoji">⬆️</div> Data flow Up. Data that will be passed up (events)
    </div>
  </div>
  <div class="framework block">
    <h2>
      Framework
    </h2>
   <div class="direction">
      ⬇️⬆️
   </div>
    <div class="data-component block">
      <h2>
        Data Component 
      </h2>
      <div class="children-wrap">
        <div class="child">
          <div class="direction">⬇️</div>
           <div class="component block">
             <h3>
               Component
             </h3>
           </div>
        </div>
        <div class="child">
          <div class="direction">⬇️</div>
           <div class="component block">
             <h3>
               Component
             </h3>
           </div>
        </div>

        <div class="child">
          <div class="direction">⬇️</div>
           <div class="component block">
             <h3>
               Component
             </h3>
           </div>
        </div>

      </div><!-- Children wrap-->

    </div><!-- data-component -->
    
    
    <div class="direction">⬇️⬆️</div>
 ...

CSS

* {
  box-sizing: border-box;
}
html, body {
  margin:0;
  padding: 0;
  min-height: 100vh;
  width: 100vw;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  display: flex;
}

.block {
  border: solid 4px grey;
  border-radius: 2px;
  padding: 8px;
  opacity: 0.95;
  margin: 8px;
}

.html-page {
  min-height: 100%;
  width: 100%;
  border-color: #3f51b5;
  background-color: #e8eaf6;
}

.framework {
  border-color: #4caf50;
  background-color: #e8f5e9;
}

.data-component {
  border-color: #ffeb3b;
  background-color: #fffde7;
  width: calc(100% - 16px);
}

.component {
  border-color: #9c27b0;
  background-color: #f3e5f5;
}

.children-wrap {
  display: flex;
  flex-grow: 1;
  flex-basis: calc(33% - 16px);
  align-items: center;
  justify-content: center;
}
.child {
  width: calc(100% - 16px);
}

.direction {
  position: relative;
  font-size: 24px;
  z-index: 9999;
  top: 14px;
  line-height: 0px;
  left: 16px;  
}

.map { background-color: white; border: solid 1px grey; border-radius: 2px; margin: 8px; padding: 8px; }
.map .map-item { vertical-align: text-bottom; }
.map .color-block { width: 16px; height: 16px; display: inline-block; border-style: solid; border-width: 1px; margin: 2px; vertical-align: text-bottom;}
.map .emoji { width: 16px; height: 16px; display: inline-block; margin: 2px 3px; }