-
Notifications
You must be signed in to change notification settings - Fork 14
/
grid-components.html
executable file
·84 lines (73 loc) · 3.02 KB
/
grid-components.html
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
83
84
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Grid components</title>
<link rel="stylesheet" type="text/css" href="c/grid-baseline.css">
<style type="text/css">
body {width: 574px;}
section {position: relative; width: 500px;}
.grid {display: grid; width: 500px;
grid-template-rows: repeat(3,100px); grid-template-columns: repeat(5,100px);}
#labels {display: grid; width: 500px;
grid-template-rows: repeat(3,100px); grid-template-columns: repeat(5,100px);}
#labels {position: absolute; top: 0; left: 0; margin: 0; padding: 1px;}
#labels li {background: rgba(0,0,0,0.0);
display: flex; justify-content: center; align-items: center; position: relative;
background-image:
url(i/arrow-up.png),
url(i/arrow-right.png),
url(i/arrow-down.png),
url(i/arrow-left.png),
linear-gradient(to bottom,rebeccapurple,rebeccapurple),
linear-gradient(to bottom,rebeccapurple,rebeccapurple);
background-position: top center, center right, bottom center, center left, center, center;
background-repeat: no-repeat;
}
#labels li.line {background-image: none;}
#labels li i {background: radial-gradient(closest-side, white 85%, transparent); color: rebeccapurple;
padding: 0.3em 0.5em; font: italic bold 1em Gentium Basic, serif;}
#labels .row {grid-area: 1/1 / 2/6; background-size: 0 0, 12px 12px, 0 0, 12px 12px, 0 0, 96% 5px;}
#labels .col {grid-area: 1/1 / 6/2; background-size: 12px 12px, 0 0, 12px 12px, 0 0, 0 0, 5px 95%; flex-flow: column;}
#labels .cell {grid-area: 3/3 / 4/4; background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 90% 5px, 5px 90%;}
#labels .area {grid-area: 2/4 / 4/6; background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 92% 5px, 5px 92%;
background-position: 66.67% 0, 100% 32.75%, 66.67% 100%, 0% 32.75%, 50% 33.33%, 66% 50%;}
#labels .row.line { grid-area: 1/1 / 3/6;}
#labels .col.line { grid-area: 1/1 / 6/5;}
#labels .col.line i, #labels .col.track i {transform: rotate(-90deg);}
#labels .area i {margin: -32.5% 0 0 33%;}
#labels li.cell {border: 2px solid rebeccapurple;}
#labels li.area {border: 3px solid rebeccapurple;}
</style>
</head>
<body>
<section>
<div class="grid boxed lines">
<span class="gridlines"></span>
<span class="gridlines"></span>
<span class="gridlines"></span>
<span class="gridlines"></span>
<span class="gridlines"></span>
<span class="gridlines"></span>
<span class="gridlines"></span>
<span class="gridlines"></span>
<span class="gridlines"></span>
<span class="gridlines"></span>
<span class="gridlines"></span>
<span class="gridlines"></span>
<span class="gridlines"></span>
<span class="gridlines"></span>
<span class="gridlines"></span>
</div>
<ul id="labels">
<li class="row track"><i>Grid row track</i></li>
<li class="col track"><i>Grid column track</i></li>
<li class="row line"><i>Grid line</i></li>
<li class="col line"><i>Grid line</i></li>
<li class="area"><i>Grid area</i></li>
<li class="cell"><i>Grid cell</i></li>
</ul>
</section>
</body>
</html>