1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
---
layout: layout.vto
name: Sidebar
hideFooter: yes
---
<div class="fullscreen sidebar-layout">
<header>
<div class="<h1>">My App</div>
<nav>
<ul role="list">
<li><a href="#" aria-current="page">Home</a></li>
<li><a href="#">Users</a></li>
<li>
<p><b>Tests</b></p>
<ul role="list" class="margin">
<li><a href="#">Test 1</a></li>
<li><a href="#">Lorem ipsum</a></li>
</ul>
</li>
<li><a href="#">Signed in as jdoe@example.com</a></li>
<li><a href="#">Sign out</a></li>
<li><a href="#">DevTools</a></li>
<li><strong><a href="/demos" class="<button>">Back to missing.css website</a></strong></li>
</ul>
</nav>
</header>
<div>
<main class="fullbleed padding-inline">
<h1>Dashboard</h1>
<p>This is a simple dashboard.</p>
<section class="tool-bar margin-block">
<button>Filter</button>
<button>Sort</button>
<label>Search <input type="text"></label>
<fieldset class="contents">
<label>From <input type="date" value="2022-07-11"></label>
<label>To <input type="date" value="2022-07-11"></label>
</fieldset>
</section>
<div id="content" class="f-row flex-wrap:wrap">
<section class="box flex-grow:2">
<h3>Tests</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Natus, alias repellat. Totam debitis ut cupiditate odio mollitia eaque veritatis tempora? Pariatur, ipsam quasi. Quo aliquid deleniti quia rem, magnam voluptatum repudiandae officia ea. A eaque repellendus repudiandae nesciunt quis amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad ullam error, dicta eos laboriosam eaque fugit id at corrupti nam.</p>
</section>
<section class="box flex-grow:1">
<h3>Executions</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta culpa, fugit recusandae cum neque ipsum totam aliquid omnis consequatur magnam. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum, error.</p>
</section>
<section class="box flex-grow:1">
<h3>Stuff</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta culpa, fugit recusandae cum neque ipsum totam aliquid omnis consequatur magnam. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum, error.</p>
</section>
<section class="box flex-grow:1">
<h3>Data</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta culpa, fugit recusandae cum neque ipsum totam aliquid omnis consequatur magnam. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum, error.</p>
</section>
<section class="box flex-grow:1">
<h3>Analytics</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Soluta culpa, fugit recusandae cum neque ipsum totam aliquid omnis consequatur magnam. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum, error.</p>
</section>
<section class="box flex-grow:4">
<h3>Timeseries</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum quibusdam minima excepturi distinctio harum temporibus, rerum facilis, reiciendis odit quo atque nobis quidem! Praesentium est, quam explicabo exercitationem ducimus veniam quisquam dolor omnis alias et ipsa commodi voluptas consectetur sit autem blanditiis magnam animi. Vero porro expedita voluptates doloribus illum cum eius esse beatae. Itaque fuga perferendis magni porro reprehenderit quam debitis quas asperiores praesentium dolor, officia veritatis illum vitae doloribus nobis vero obcaecati suscipit incidunt, soluta nihil. Odit, atque quae? Ratione labore inventore voluptatem minima ab aperiam facilis. Similique architecto minus, soluta animi nisi nulla omnis nam et laboriosam alias obcaecati doloribus quod corporis, repellendus fugiat porro labore distinctio, quis esse. Soluta excepturi suscipit modi nemo quidem nulla rerum.</p>
</section>
</div>
</main>
<footer>
My App<br>
Fictitious CSS Industries
</footer>
</div>
</div>
|
