Template Builder

by skibulk

HTML

<div id="template-builder">
  <table>
    <tr class="devices">
      <td class="left"><b>Small</b><br>≥ 360</td>
      <td class="center"><b>Medium</b><br>≥ 720</td>
      <td class="right"><b>Large</b><br>≥ 960</td>
    </tr>
    <tr class="search">
      <td class="left"></td>
      <td class="center"><input type="text" value="Filter"></td>
      <td class="right modified"></td>
    </tr>
    <tr class="properties-group">
      <td class="hidden"></td>
      <td>
        Dimensional Properties
        <span class="right">
          <a href="#" class="btn-round">+</a>
          <a href="#" class="btn-round">−</a>
        </span>
      </td>
      <td class="hidden"></td>
    </tr>
    <tr class="properties">
      <td class="hidden">padding-top</td>
      <td><label for="medium-padding-top">padding-top</label><div class="tooltip">The padding-top property sets the top padding (space) of an element. Note: Negative values are not allowed.</div></td>
      <td class="hidden">padding-top</td>
    </tr>
    <tr class="values">
      <td>
        <input type="text" value="15px" tabindex="-1" />
      </td>
      <td>
        <input type="text" value="20px" tabindex="1" class="modified" id="medium-padding-top" name="medium-padding-top"/>
      </td>
      <td>
        <input type="text" value="25px" tabindex="-1" />
      </td>
    </tr>
    <tr class="properties">
      <td class="hidden">padding-right</td>
      <td>Padding, Right</td>
      <td class="hidden">padding-right</td>
    </tr>
    <tr class="values">
      <td>
        <input type="text" value="15px" tabindex="-1" />
      </td>
      <td>
        <input type="text" value="20px" tabindex="2" />
      </td>
      <td>
        <input type="text" value="25px" tabindex="-1" />
      </td>
    </tr>
    <tr class="properties">
      <td class="hidden">padding-bottom</td>
      <td>Padding, Bottom</td>
      <td class="hidden">padding-bottom</td>
    </tr>
    <tr class="values">
      <td>
        <input...

CSS

* {
  box-sizing: border-box;
  border-collapse: collapse;
  margin: 0;
  border: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.6em;
}

#template-builder {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}

table {
  width: 100%;
  min-width: 320px;
  max-width: 600px;
  margin: 40px auto;
  background: white;
}

td {
  padding: 10px 10px 0 10px;
}

.properties-group {
  font-weight: bold;
}

.right {
  float: right;
  font-weight: normal;
}

.values td {
  padding: 10px 0 10px 0;
}

td:nth-child(1),
td:nth-child(3) {
  width: 80px;
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
}

td:nth-child(2) {
  min-width: 160px;
}

input {
  width: 100%;
  border-bottom: 1px solid lightgray;
  padding: 5px 10px;
  font-size: inherit;
  background: inherit;
  outline: none !important;
  color: lightgray;
}

table tr .modified {
  color: black;
}

.hidden {
  opacity: 0;
}

a:link,
a:hover,
a:active,
a:visited {
  text-decoration: none;
  color: black;
}

.btn-round {
  border: 1px solid black;
  border-radius: 20px;
  padding: 2px 8px;
}

.btn-round:hover {
  background: black;
  color: white !important;
}

.search, .devices {
  color: white;
  background: black;
}

.search input {
  border: 0;
  padding: 0;
  color: darkgray;
}

.tooltip {
  font-style: italic;
  display: none;
}

tr:hover .tooltip {
  display: block;
}

JavaScript

/*
To Do:
Show all Media Queries on Desktop
Show all Media Queries at all times?
Breadcrumb
Jump to Category Icons
Show: All, Minimal, Declared, None
Expand / Collapse (Dimensional Properties / All Properties)
Reset (Dimensional Properties on Medium Devices / All Properties on Medium Devices / All Properties on All Devices)
Options
Apply / Export / Import
Find or Create...

Tab & Shift-Tab loop over current row
Enter & Shift-Enter loop over current column
*/

var user_data = {
  'padding-top': [
    'SM': '15px',
    'MD': '20px',
    'LG': '25px'
  ],
  'padding-right': [
    'LG': '25px'
  ],
  'padding-bottom': [
    'SM': '15px',
  ]
};

/*
'property-name': {
  'category': 'Category',
  'featured': 'true',
  'title': 'Title',
  'descr': 'w3schools description',
  'link': 'w3schools link',
  'options': [
    'length',
    'percent',
    'initial',
    'inherit'
  ],
  'prefixes': [
    '-webkit-property',
    '-moz-property'
    '-ms-property',
    '-o-property',
  ]
}
*/