Skip to content

Commit 62de490

Browse files
oSamDavisSam Davis Omekara (from Dev Box)
oSamDavis
and
Sam Davis Omekara (from Dev Box)
authored
init gap decor demos (#66)
Co-authored-by: Sam Davis Omekara (from Dev Box) <samomekarajr@microsoft.com>
1 parent 701abfe commit 62de490

File tree

5 files changed

+963
-0
lines changed

5 files changed

+963
-0
lines changed

‎css-gap-decorations/playgrounds/burger-menu.html

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Burger Menu</title>
6+
<style>
7+
body {
8+
background: gray;
9+
}
10+
.grid-container {
11+
display: grid;
12+
grid-template-columns: repeat(6, 1fr);
13+
grid-template-rows: 1fr 5fr 2fr;
14+
gap: 1.5px;
15+
16+
/* thin grey vertical lines, thick black horizontal lines */
17+
column-rule: 1.5px solid #ccc;
18+
row-rule: 3px solid #000;
19+
column-rule-break: intersection;
20+
column-rule-outset: -15px;
21+
row-rule-outset: -8px;
22+
23+
background: #fff;
24+
width: 850px;
25+
height: 600px;
26+
}
27+
/* — Header — */
28+
.header-title {
29+
margin: 1rem 0.5rem;
30+
display: flex;
31+
align-items: center;
32+
33+
font-size: 1.45rem;
34+
font-weight: bold;
35+
color: #3366cc;
36+
}
37+
.header-option {
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
justify-self: stretch;
42+
align-self: stretch;
43+
44+
margin: 1rem 0.5rem;
45+
padding: 0.75rem 1rem;
46+
47+
background: #3366cc;
48+
color: #fff;
49+
}
50+
/* — Middle panels — */
51+
.sidebar {
52+
display: flex;
53+
align-items: center;
54+
padding: 0.9rem;
55+
color: white;
56+
background: #3366cc;
57+
font-weight: bold;
58+
margin: 1rem 0.5rem;
59+
}
60+
.options {
61+
margin: 1rem 0.5rem;
62+
background: #f4f5f7;
63+
padding: 1rem;
64+
color: #666;
65+
font-family: sans-serif;
66+
font-size: 0.95rem;
67+
}
68+
.options ul {
69+
list-style: none;
70+
margin: 0;
71+
padding: 0;
72+
}
73+
.options li {
74+
margin: 0 0 0.75rem;
75+
}
76+
.options label {
77+
display: flex;
78+
gap: 0.5rem;
79+
line-height: 1.4;
80+
}
81+
.options label>input {
82+
margin: 0;
83+
}
84+
/* — Bottom row — */
85+
.instructions-label {
86+
margin: 1rem 0.5rem;
87+
88+
display: flex;
89+
flex-direction: column;
90+
justify-content: center;
91+
padding: 1rem;
92+
93+
background: #3366cc;
94+
color: #fff;
95+
font-family: sans-serif;
96+
font-size: 0.95rem;
97+
}
98+
.instructions-label small {
99+
margin: 1rem;
100+
margin-top: 0.5rem;
101+
opacity: 0.8;
102+
}
103+
.instructions-input {
104+
margin: 1rem 0.5rem;
105+
background: #f4f5f7;
106+
padding: 0.75rem;
107+
display: grid;
108+
grid-template-rows: repeat(4, 1fr);
109+
grid-template-columns: 1fr;
110+
row-rule: solid #ccc 1.5px;
111+
align-items: center;
112+
justify-content: center;
113+
}
114+
</style>
115+
</head>
116+
<body>
117+
<div class="grid-container">
118+
<!-- Row 1: title + buttons -->
119+
<div class="header-title">Burger Menu</div>
120+
<div class="header-option">Bun</div>
121+
<div class="header-option">Protein</div>
122+
<div class="header-option">Veggies</div>
123+
<div class="header-option">Cheese</div>
124+
<div class="header-option">Add-ons</div>
125+
126+
<!-- Row 2: content panels -->
127+
<div class="sidebar">Customize your burger</div>
128+
129+
<div class="options">
130+
<ul>
131+
<li><label><input type="radio" name="bun" value="brioche">Brioche</label></li>
132+
<li><label><input type="radio" name="bun" value="whole-wheat">Whole wheat</label></li>
133+
<li><label><input type="radio" name="bun" value="potato">Potato bun</label></li>
134+
<li><label><input type="radio" name="bun" value="gluten-free">Gluten free</label></li>
135+
</ul>
136+
</div>
137+
138+
<div class="options">
139+
<ul>
140+
<li><label><input type="radio" name="protein" value="beef">Beef</label></li>
141+
<li><label><input type="radio" name="protein" value="chicken">Chicken</label></li>
142+
<li><label><input type="radio" name="protein" value="turkey">Turkey</label></li>
143+
<li><label><input type="radio" name="protein" value="plant">Plant-based</label></li>
144+
</ul>
145+
</div>
146+
147+
<div class="options">
148+
<ul>
149+
<li><label><input type="checkbox" name="veggies" value="lettuce">Lettuce</label></li>
150+
<li><label><input type="checkbox" name="veggies" value="tomato">Tomato slices</label></li>
151+
<li><label><input type="checkbox" name="veggies" value="onions">Onions</label></li>
152+
<li><label><input type="checkbox" name="veggies" value="pickles">Pickles</label></li>
153+
</ul>
154+
</div>
155+
156+
<div class="options">
157+
<ul>
158+
<li><label><input type="radio" name="cheese" value="cheddar">Cheddar</label></li>
159+
<li><label><input type="radio" name="cheese" value="swiss">Swiss</label></li>
160+
<li><label><input type="radio" name="cheese" value="american">American</label></li>
161+
</ul>
162+
</div>
163+
164+
<div class="options">
165+
<ul>
166+
<li><label><input type="checkbox" name="addons" value="bacon">Bacon</label></li>
167+
<li><label><input type="checkbox" name="addons" value="egg">Fried egg</label></li>
168+
<li><label><input type="checkbox" name="addons" value="avocado">Avocado</label></li>
169+
<li><label><input type="checkbox" name="addons" value="jalapenos">Jalapeños</label></li>
170+
<li><label><input type="checkbox" name="addons" value="mushrooms">Mushrooms</label></li>
171+
<li><label><input type="checkbox" name="addons" value="onion-rings">Onion rings</label></li>
172+
</ul>
173+
</div>
174+
175+
<!-- Row 3: additional instructions -->
176+
<div class="instructions-label">
177+
Additional instructions
178+
<small>e.g.: toasted, caramelized, double</small>
179+
</div>
180+
<div class="instructions-input"></div>
181+
<div class="instructions-input"></div>
182+
<div class="instructions-input"></div>
183+
<div class="instructions-input"></div>
184+
<div class="instructions-input"></div>
185+
</div>
186+
</body>
187+
</html>

‎css-gap-decorations/playgrounds/guitar-fret-board.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Guitar Fret Board</title>
6+
<style>
7+
.fret-board {
8+
display: inline-block;
9+
background-color: #00bcd4;
10+
padding: 20px;
11+
}
12+
.strings-grid {
13+
display: grid;
14+
grid-template: repeat(4, 50px) / 0px repeat(5, 50px) 0px;
15+
gap: 3px;
16+
background-color: #009eb3;
17+
18+
column-rule: 3px solid white;
19+
row-rule: 3px solid #065863;
20+
gap-rule-paint-order: column-over-row;
21+
22+
border-top: solid 6px #065863;
23+
border-bottom: solid 3px #065863;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
<div class="fret-board">
29+
<div class="strings-grid">
30+
</div>
31+
</div>
32+
</body>
33+
</html>

0 commit comments

Comments
 (0)