julien/tps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create a feature flow page

Browse Source
This commit is contained in:
Julien Calixte
2023-07-11 21:11:43 +02:00
parent 71cc5dee85
commit 98637bb117
2 changed files with 162 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
feature-flow.css Normal file
View File

@@ -0,0 +1,63 @@
main {
height: 100vh;
}
ul {
list-style: none;
padding: 0;
}
main > ul {
display: flex;
flex: 1;
gap: 1rem;
flex-wrap: wrap;
align-items: flex-start;
margin: 0 1rem;
border: 3px solid var(--background-color);
}
li {
flex: 1;
height: 100%;
margin: 0;
color: var(--background-color);
}
main > ul > li:first-child {
margin-left: 1rem;
}
main > ul > li:last-child {
margin-right: 1rem;
}
main > ul > li:not(:last-child) {
padding-right: 1rem;
border-right: 3px solid var(--background-color);
border-radius: 0;
}
header {
padding: 0.5rem;
border: solid 2px var(--background-color);
margin-top: 1rem;
}
section {
margin: 1rem 0;
}
section ul {
padding: 1rem;
}
h5 {
margin-bottom: 0;
}
.blue-bucket {
margin-top: 1rem;
border: 3px solid var(--background-color);
height: 60px;
}

99
feature-flow.html Normal file
View File

@@ -0,0 +1,99 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interactive Feature flow</title>
<meta
name="description"
content="Author: Julien Calixte,
My understanding of how a feature flow
can help team prioritize."
/>
<link rel="stylesheet" href="core.css" />
<link rel="stylesheet" href="feature-flow.css" />
</head>
<body>
<main>
<ul>
<li>
<header>Pitch</header>
<section class="doing">
<h5>doing</h5>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
</ul>
</section>
<section class="done">
<h5>done</h5>
<ul>
<li>Feature 3</li>
<li>Feature 4</li>
</ul>
</section>
</li>
<li>
<header>Design</header>
<section class="doing">
<h5>doing</h5>
</section>
<section class="done">
<h5>done</h5>
</section>
</li>
<li>
<header>Investigation</header>
<section class="doing">
<h5>doing</h5>
</section>
<section class="done">
<h5>done</h5>
</section>
</li>
<li>
<header>Product design</header>
<section class="doing">
<h5>doing</h5>
<ul>
<li></li>
<li></li>
</ul>
</section>
<section class="done">
<h5>done</h5>
<div class="blue-bucket"></div>
<div class="blue-bucket"></div>
</section>
</li>
<li>
<header>Development</header>
<section class="doing">
<h5>doing</h5>
</section>
<section class="done">
<h5>done</h5>
</section>
</li>
<li>
<header>UAT</header>
<section class="doing">
<h5>doing</h5>
</section>
<section class="done">
<h5>done</h5>
</section>
</li>
<li>
<header>Release</header>
<section class="doing">
<h5>doing</h5>
</section>
<section class="done">
<h5>done</h5>
</section>
</li>
</ul>
</main>
</body>
</html>