Research Guide HTML Template

Demo Data Dictionary

VarName_01_X

Ipsum is simply dummy text of the printing and typesetting industry.

DATA TYPE:	numeric
SCOPE:	PZ
LENGTH:	6

DEFINITION: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

VarName_02_L2

Ipsum is simply dummy text of the printing and typesetting industry.

DATA TYPE:	factor
SCOPE:	PC
LENGTH:	24

LEVELS:

A	goat
B	monkey
C	turtle
D	horse

VarName_03_with_length_up_to_32

Ipsum is simply dummy text of the printing and typesetting industry.

DATA TYPE:	numeric
SCOPE:	EZ
LENGTH:	13

		STEP	COLUMNS	VALUES	EVAL	UNITS	PASS	FAIL	W	S	N	EXT
Pointblank Validation
VALID-I Example No. 1 tibble small_table
	1	`col_is_posix()`	`▮date_time`	—	✓	`1`	`1` `1.00`	`0` `0.00`	—	—	—	—
	2	`col_vals_in_set()`	`▮f`	`low, mid, high`	✓	`13`	`13` `1.00`	`0` `0.00`	—	—	—	—
	3	`col_vals_lt()`	`▮a`	`10`	✓	`13`	`13` `1.00`	`0` `0.00`	—	—	—	—
	4	`col_vals_regex()`	`▮b`	`^[0-9]-[a-z]{3}-[0-9]{3}$`	✓	`13`	`13` `1.00`	`0` `0.00`	—	—	—	—
	5	`col_vals_between()`	`▮d`	`[0, 5,000]`	✓	`13`	`12` `0.92`	`1` `0.08`	—	—	—
2023-05-04 09:45:10 MST < 1 s 2023-05-04 09:45:10 MST

HTML

Code

<div class="div1"><h4>VarName_01_X</h4></div>
<div class="div2">
  Ipsum is simply dummy text of the printing and typesetting industry. 
</div>
<div class="div3">
  <table>
  <tr>
    <td>DATA TYPE</td>
    <td>numeric</td>
  </tr>
  <tr>
    <td>SCOPE</td>
    <td>PZ</td>
  </tr>
  <tr>
    <td>LENGTH</td>
    <td>6</td>
  </tr>
</table>
</div>
<div class="div4">
  DEFINITION: Lorem Ipsum is simply dummy text of the printing and typesetting 
  industry. Lorem Ipsum has been the industry's standard dummy text ever since 
  the 1500s, when an unknown printer took a galley of type and scrambled it to 
  make a type specimen book.
</div>

CSS

<style>

@import url('https://fonts.cdnfonts.com/css/aharoni');

.parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;  
    grid-column-gap: 20px;
    grid-row-gap: 10px;
    grid-template-areas:
      "a a a"
      "b b b"
      "c d d"
      "e e e" ;
}

/* grid-row-start / grid-column-start / grid-row-end / grid-column-end */
/* .div1 { grid-area: 1 / 1 / 2 / 4; } */
/* .div2 { grid-area: 2 / 1 / 3 / 4; } */
/* .div3 { grid-area: 3 / 1 / 4 / 2; } */
/* .div4 { grid-area: 3 / 2 / 4 / 4; } */


.div1 { grid-area: a; }

.div2 { 
    grid-area: b;
    padding-left: 50px;
}

.div3 { 
    grid-area: c;
    padding-left: 50px;
}

.div4 { 
    grid-area: d;
    padding-left: 20px;
}

.div5 { 
    grid-area: e;
    padding-left: 50px;
}

h1.title { color: lightgray; }
h2.anchored { color: lightgray; }
h3.anchored { color: gray; }

h4 {
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 2px;
    font-family: Georgia, Times, "Times New Roman", serif; 
    font-size: 2.5em;
}

h5 { font-size: 0.9em; }

.div2 p { 
    font-family: Verdana;
    font-size: 1.1em;
}

.div3 td { 
    font-family: 'Aharoni', sans-serif;
    font-size: 0.9em;
}

.div4 p { 
    font-family:"Calibri", sans-serif;
    font-size: 0.8em;
}

.div4 td { 
    font-family: "Anonymous Pro";
    font-size: 0.9em;
}

.div4 table {
    margin-left: 20px;
}

.div5 td { 
    font-family: "Anonymous Pro";
    font-size: 0.9em;
}

.div5 table {
    margin-left: 20px;
}

.table>tbody {
    border-top: none;
}

.table>:not(caption)>*>* {
    padding: 0rem 0rem;
}

tbody, tfoot, tr, td, th {
    border-color: inherit;
    border-style: none; 
    border-width: 0;
}

</style>