Skip to content

Commit f3280eb

Browse files
BPMSoftwareSolutionsBPMSoftwareSolutions
committed
More changes
1 parent 9cb65e2 commit f3280eb

12 files changed

Lines changed: 5271 additions & 0 deletions

‎ACCEPTANCE_CRITERIA_STYLING.md‎

Lines changed: 298 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,298 @@
1+
# Acceptance Criteria - GitHub-Style Update 🎨
2+
3+
## Overview
4+
5+
The acceptance criteria sections have been completely redesigned to match GitHub's modern card/table style for a cleaner, more professional developer experience.
6+
7+
## What Changed
8+
9+
### Before (Original Design)
10+
```
11+
┌─────────────────────────────────────────┐
12+
│ Green translucent background │
13+
│ • Left border accent (4px green) │
14+
│ • Round corners (12px) │
15+
│ • Checkmarks floating in padding │
16+
│ • Loose spacing │
17+
│ • Text fades to dimmed color │
18+
└─────────────────────────────────────────┘
19+
```
20+
21+
### After (GitHub Card Style)
22+
```
23+
┌──────────────────────────────────────────┐
24+
│ GIVEN │ Dark header │
25+
├──────────────────────────────────────────┤
26+
│ ✓ Condition 1 │ List items │
27+
│ ✓ Condition 2 │ with borders │
28+
├──────────────────────────────────────────┤
29+
│ WHEN │ Section header │
30+
├──────────────────────────────────────────┤
31+
│ ✓ Action taken │ │
32+
├──────────────────────────────────────────┤
33+
│ THEN │ Section header │
34+
├──────────────────────────────────────────┤
35+
│ ✓ Expected outcome 1 │ │
36+
│ ✓ Expected outcome 2 │ │
37+
└──────────────────────────────────────────┘
38+
```
39+
40+
## Design Improvements
41+
42+
### 1. **Card Container**
43+
- Clean bordered card with rounded corners (6px)
44+
- Single border (`1px solid #30363d`)
45+
- No padding on container (content fills to edges)
46+
- Overflow hidden for clean borders
47+
48+
### 2. **Section Headers (Given/When/Then/And)**
49+
- Dark background (`#010409`) like GitHub code blocks
50+
- Uppercase labels with letter-spacing (1.5px)
51+
- Green color (`#3fb950`) for visibility
52+
- Top border separator for sections
53+
- Compact padding (0.75rem vertical)
54+
55+
### 3. **List Items**
56+
- Individual borders between items (`#21262d`)
57+
- Full-width clickable feel
58+
- Left-aligned checkmarks (1.25rem from edge)
59+
- Proper line-height (1.6) for readability
60+
- Last item has no bottom border
61+
62+
### 4. **Checkmarks**
63+
- Larger size (1.3em)
64+
- Green color (`#3fb950`)
65+
- Fixed position from left
66+
- Bold weight
67+
68+
### 5. **Scenario Headers** (for multiple scenarios)
69+
- Dark background like section headers
70+
- Thicker top border (2px) for separation
71+
- Medium font weight (600)
72+
- Clear visual break between scenarios
73+
74+
## Visual Hierarchy
75+
76+
```
77+
Slide Title (h2)
78+
↓
79+
Beat Name (h3, dimmed)
80+
↓
81+
┌─ Criteria Card ────────────┐
82+
│ GIVEN (header) │
83+
│ ├─ Item 1 │
84+
│ ├─ Item 2 │
85+
│ └─ Item 3 │
86+
│ WHEN (header) │
87+
│ ├─ Item 1 │
88+
│ THEN (header) │
89+
│ ├─ Item 1 │
90+
│ ├─ Item 2 │
91+
│ └─ Item 3 │
92+
└────────────────────────────┘
93+
```
94+
95+
## CSS Breakdown
96+
97+
### Container
98+
```css
99+
.criteria-section {
100+
background: #161b22; /* GitHub subtle canvas */
101+
border: 1px solid #30363d; /* GitHub default border */
102+
border-radius: 6px; /* GitHub standard radius */
103+
padding: 0; /* No padding, full bleed */
104+
overflow: hidden; /* Clean corners */
105+
}
106+
```
107+
108+
### Section Labels
109+
```css
110+
.criteria-label {
111+
background: #010409; /* Darker inset background */
112+
padding: 0.75rem 1.25rem; /* Compact but breathable */
113+
font-weight: 600; /* Semi-bold */
114+
color: #3fb950; /* GitHub success green */
115+
font-size: 0.75em; /* Smaller, uppercase */
116+
text-transform: uppercase;
117+
letter-spacing: 1.5px; /* Spaced for readability */
118+
border-bottom: 1px solid #30363d;
119+
}
120+
```
121+
122+
### List Items
123+
```css
124+
.criteria-list li {
125+
padding: 0.75rem 1.25rem 0.75rem 3rem; /* Room for checkmark */
126+
font-size: 0.75em; /* Readable size */
127+
color: #e6edf3; /* Full brightness */
128+
border-bottom: 1px solid #21262d; /* Muted separator */
129+
line-height: 1.6; /* Comfortable reading */
130+
}
131+
132+
.criteria-list li::before {
133+
content: "✓";
134+
left: 1.25rem; /* Fixed from edge */
135+
color: #3fb950; /* Green checkmark */
136+
font-size: 1.3em; /* Prominent */
137+
}
138+
```
139+
140+
## Comparison Examples
141+
142+
### Example: Beat 1 Acceptance Criteria
143+
144+
**Before:**
145+
- Floating green box
146+
- Dimmed text
147+
- Loose checkmarks
148+
- Less structured
149+
150+
**After:**
151+
- Clean card with borders
152+
- Bright text on dark background
153+
- Organized sections with headers
154+
- Table-like structure
155+
- Professional GitHub feel
156+
157+
### Multiple Scenarios
158+
159+
When there are multiple scenarios, the new design adds scenario headers:
160+
161+
```
162+
┌───────────────────────────────────────────┐
163+
│ Scenario 1 │ Header │
164+
├───────────────────────────────────────────┤
165+
│ GIVEN │ │
166+
├───────────────────────────────────────────┤
167+
│ ✓ Precondition │ │
168+
├───────────────────────────────────────────┤
169+
│ THEN │ │
170+
├───────────────────────────────────────────┤
171+
│ ✓ Expected outcome │ │
172+
├───────────────────────────────────────────┤
173+
│ Scenario 2 │ New header │
174+
├───────────────────────────────────────────┤
175+
│ ... │ │
176+
└───────────────────────────────────────────┘
177+
```
178+
179+
## Benefits
180+
181+
### For Developers
182+
1. **Familiar**: Looks like GitHub tables/cards
183+
2. **Scannable**: Clear sections with headers
184+
3. **Organized**: Bordered items, easy to track
185+
4. **Professional**: Clean, modern design
186+
187+
### For Presentations
188+
1. **Readable**: High contrast, clear structure
189+
2. **Focused**: Each section stands out
190+
3. **Clean**: No visual clutter
191+
4. **Consistent**: Matches other GitHub-styled elements
192+
193+
## Typography
194+
195+
- **Section headers**: 0.75em, uppercase, 600 weight, green
196+
- **List items**: 0.75em, normal weight, full brightness
197+
- **Checkmarks**: 1.3em, bold, green
198+
- **Line height**: 1.6 for comfortable reading
199+
200+
## Colors Used
201+
202+
| Element | Color | Usage |
203+
|---------|-------|-------|
204+
| **Container background** | `#161b22` | GitHub subtle canvas |
205+
| **Container border** | `#30363d` | GitHub default border |
206+
| **Section header bg** | `#010409` | GitHub inset (darkest) |
207+
| **Section header text** | `#3fb950` | GitHub success green |
208+
| **List item text** | `#e6edf3` | GitHub default foreground |
209+
| **List item border** | `#21262d` | GitHub muted border |
210+
| **Checkmarks** | `#3fb950` | GitHub success green |
211+
212+
## Technical Implementation
213+
214+
### HTML Structure
215+
```html
216+
<div class="criteria-section">
217+
<!-- Optional scenario header for multiple scenarios -->
218+
<div class="criteria-scenario">Scenario 1</div>
219+
220+
<!-- Given section -->
221+
<div class="criteria-label">GIVEN</div>
222+
<ul class="criteria-list">
223+
<li>Resume JSON file exists at specified path</li>
224+
<li>File contains valid JSON structure</li>
225+
</ul>
226+
227+
<!-- When section -->
228+
<div class="criteria-label">WHEN</div>
229+
<ul class="criteria-list">
230+
<li>The system reads the JSON file</li>
231+
</ul>
232+
233+
<!-- Then section -->
234+
<div class="criteria-label">THEN</div>
235+
<ul class="criteria-list">
236+
<li>Resume data is successfully parsed</li>
237+
<li>All required fields are present</li>
238+
<li>Data structure is valid</li>
239+
</ul>
240+
</div>
241+
```
242+
243+
### Border Strategy
244+
- Container: 1px solid border
245+
- Headers: Bottom border (1px)
246+
- List items: Bottom border (1px), except last
247+
- Scenario headers: Top border (2px, thicker) for emphasis
248+
249+
## Before/After Metrics
250+
251+
| Metric | Before | After |
252+
|--------|--------|-------|
253+
| **Visual weight** | Light | Strong |
254+
| **Structure** | Loose | Tight |
255+
| **Scannability** | Medium | High |
256+
| **GitHub similarity** | Low | High |
257+
| **Professional feel** | Good | Excellent |
258+
| **Border usage** | Minimal | Structured |
259+
| **Spacing** | Loose | Compact |
260+
| **Readability** | Good | Better |
261+
262+
## Responsive Design
263+
264+
The card design scales well:
265+
- Headers remain readable
266+
- Items maintain structure
267+
- Checkmarks stay aligned
268+
- Borders provide clear boundaries
269+
270+
## Accessibility
271+
272+
Improvements:
273+
- ✅ Higher contrast (full brightness text)
274+
- ✅ Clear section headers
275+
- ✅ Structured list format
276+
- ✅ Consistent spacing
277+
- ✅ Semantic HTML structure
278+
279+
## Usage in Slideshows
280+
281+
Every beat with acceptance criteria now displays:
282+
1. **Slide header**: "Beat X: [Name]"
283+
2. **Subheader**: "Acceptance Criteria"
284+
3. **One or more criteria cards**: Each with Given/When/Then/And sections
285+
4. **Scenario headers**: If multiple scenarios exist
286+
287+
## Summary
288+
289+
The new acceptance criteria design:
290+
- ✅ Matches GitHub's card/table aesthetic
291+
- ✅ Provides better visual hierarchy
292+
- ✅ Improves scannability during presentations
293+
- ✅ Looks professional and modern
294+
- ✅ Maintains consistency with other GitHub-styled elements
295+
- ✅ Uses proper GitHub color palette
296+
- ✅ Creates a familiar developer experience
297+
298+
Perfect for presenting technical workflows to developer audiences! 🎉

0 commit comments

Comments
 (0)