Skip to content

Commit 2832850

Browse files
GearUnclearGearUnclear
committed
Add Apricot versions: style guide and checklist bulletin
1 parent 9295c73 commit 2832850

File tree

2 files changed

+368
-0
lines changed

2 files changed

+368
-0
lines changed

‎apricot_versions/Apricot_Versions_Styleguide.md‎

Lines changed: 338 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,338 @@
1+
# Apricot Versions Style Guide
2+
3+
## Overview
4+
This guide documents the rules and best practices for creating HTML and CSS elements that work in the Apricot Database software.
5+
6+
---
7+
8+
## Buttons
9+
10+
### CSS Rules for Buttons
11+
**CRITICAL:** CSS MUST be inline ONLY for buttons. No external stylesheets or `<style>` blocks.
12+
13+
### Button Types
14+
15+
#### False Buttons (Non-linking)
16+
Use a `<div>` element styled to look like a button. Contains text or a list.
17+
18+
**Structure:**
19+
```html
20+
<div style="padding: 10px 20px; background-color: #3498db; color: white; text-align: center; border-radius: 5px; cursor: pointer; font-size: 16px; display: inline-block;">
21+
Button Text
22+
</div>
23+
```
24+
25+
**With List:**
26+
```html
27+
<div style="padding: 10px 20px; background-color: #3498db; color: white; border-radius: 5px; font-size: 16px;">
28+
<ul style="margin: 0; padding-left: 20px;">
29+
<li>Item 1</li>
30+
<li>Item 2</li>
31+
<li>Item 3</li>
32+
</ul>
33+
</div>
34+
```
35+
36+
#### True Buttons (Linking)
37+
Use a `<button>` element or `<a>` tag that links to a URL.
38+
39+
**Button Element:**
40+
```html
41+
<button onclick="window.location.href='https://example.com'" style="padding: 10px 20px; background-color: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px;">
42+
Click Here
43+
</button>
44+
```
45+
46+
**Link styled as Button:**
47+
```html
48+
<a href="https://example.com" style="padding: 10px 20px; background-color: #3498db; color: white; text-decoration: none; border-radius: 5px; cursor: pointer; font-size: 16px; display: inline-block;">
49+
Click Here
50+
</a>
51+
```
52+
53+
### Common Inline Styles for Buttons
54+
- `padding: 10px 20px;` - Interior spacing
55+
- `background-color: #3498db;` - Background color
56+
- `color: white;` - Text color
57+
- `border: none;` - Remove default border
58+
- `border-radius: 5px;` - Rounded corners
59+
- `cursor: pointer;` - Hand cursor on hover
60+
- `font-size: 16px;` - Text size
61+
- `display: inline-block;` - Proper spacing behavior
62+
- `text-decoration: none;` - Remove underline (for links)
63+
64+
### Hover Effects (Inline)
65+
For inline hover effects, use `onmouseover` and `onmouseout`:
66+
```html
67+
<div
68+
style="padding: 10px 20px; background-color: #3498db; color: white; text-align: center; border-radius: 5px; cursor: pointer; font-size: 16px; display: inline-block; transition: background-color 0.3s;"
69+
onmouseover="this.style.backgroundColor='#2980b9'"
70+
onmouseout="this.style.backgroundColor='#3498db'">
71+
Hover Me
72+
</div>
73+
```
74+
75+
---
76+
77+
## Bulletins
78+
79+
### CSS Rules for Bulletins
80+
CSS **can** be placed in a `<style>` block at the top of the document for bulletins.
81+
82+
### Half-Height Spacing Element
83+
**ALWAYS use half-height paragraphs for vertical spacing** instead of full spacing:
84+
85+
```css
86+
p.half-height {
87+
margin: 0;
88+
padding: 0.5em 0;
89+
}
90+
```
91+
92+
**Usage:**
93+
```html
94+
<p class="half-height">This paragraph has half spacing</p>
95+
```
96+
97+
### Complete Bulletin Example
98+
99+
```html
100+
<style type="text/css">
101+
.bulletin-buttons-container {
102+
display: flex;
103+
flex-wrap: wrap;
104+
gap: 20px;
105+
justify-content: center;
106+
margin-bottom: 30px;
107+
}
108+
109+
.bulletin-button a::before {
110+
content: replace(attr(data-text), '|', '\A');
111+
color: #ffffff;
112+
white-space: pre-line;
113+
line-height: 1.2;
114+
}
115+
116+
.bulletin-button.new-button a::before {
117+
content: contents;
118+
}
119+
120+
p.half-height {
121+
margin: 0;
122+
padding: 0.5em 0;
123+
}
124+
125+
.bulletin-button {
126+
padding: 10px 20px;
127+
border: none;
128+
border-radius: 5px;
129+
cursor: pointer;
130+
background-color: #EFEFEF;
131+
color: transparent;
132+
text-decoration: none;
133+
font-size: 20px;
134+
transition: background-color 0.3s;
135+
}
136+
137+
.bulletin-button:hover {
138+
background-color: #2980b9;
139+
}
140+
141+
.recent-updates {
142+
max-width: 600px;
143+
margin: 0 auto;
144+
font-size: 16px;
145+
background-color: #2980b9;
146+
}
147+
148+
.recent-updates h2 {
149+
color: transparent;
150+
text-align: center;
151+
margin-bottom: 20px;
152+
}
153+
154+
.recent-updates h2::before {
155+
content: attr(data-text);
156+
color: white;
157+
}
158+
159+
.arecent-updates h2 {
160+
text-align: center;
161+
margin-bottom: 20px;
162+
color: white;
163+
}
164+
165+
@keyframes flashyAnimation {
166+
0% {background-color: #e74c3c;}
167+
50% {background-color: #f39c12;}
168+
100% {background-color: #e74c3c;}
169+
}
170+
171+
.bulletin-button.new-button {
172+
background-color: #e74c3c;
173+
animation: flashyAnimation 1.5s infinite;
174+
}
175+
176+
.bulletin-button.new-button:hover {
177+
animation: none;
178+
background-color: #c0392b;
179+
}
180+
181+
.bulletin-button.new-button span {
182+
display: flex;
183+
justify-content: center;
184+
align-items: center;
185+
height: 100%;
186+
}
187+
</style>
188+
189+
<div class="recent-updates">
190+
<h2 data-text="Recent Updates">Placeholder</h2>
191+
<p class="half-height">Update content goes here</p>
192+
</div>
193+
194+
<div class="bulletin-buttons-container">
195+
<div class="bulletin-button">
196+
<a href="#" data-text="Button Text">Button</a>
197+
</div>
198+
<div class="bulletin-button new-button">
199+
<a href="#"><span>New Feature!</span></a>
200+
</div>
201+
</div>
202+
```
203+
204+
### Key Bulletin Components
205+
206+
#### 1. Button Container
207+
```css
208+
.bulletin-buttons-container {
209+
display: flex;
210+
flex-wrap: wrap;
211+
gap: 20px;
212+
justify-content: center;
213+
margin-bottom: 30px;
214+
}
215+
```
216+
217+
#### 2. Standard Bulletin Button
218+
```css
219+
.bulletin-button {
220+
padding: 10px 20px;
221+
border: none;
222+
border-radius: 5px;
223+
cursor: pointer;
224+
background-color: #EFEFEF;
225+
color: transparent;
226+
text-decoration: none;
227+
font-size: 20px;
228+
transition: background-color 0.3s;
229+
}
230+
231+
.bulletin-button:hover {
232+
background-color: #2980b9;
233+
}
234+
```
235+
236+
#### 3. "New" Button with Animation
237+
```css
238+
@keyframes flashyAnimation {
239+
0% {background-color: #e74c3c;}
240+
50% {background-color: #f39c12;}
241+
100% {background-color: #e74c3c;}
242+
}
243+
244+
.bulletin-button.new-button {
245+
background-color: #e74c3c;
246+
animation: flashyAnimation 1.5s infinite;
247+
}
248+
249+
.bulletin-button.new-button:hover {
250+
animation: none;
251+
background-color: #c0392b;
252+
}
253+
```
254+
255+
#### 4. Content Section
256+
```css
257+
.recent-updates {
258+
max-width: 600px;
259+
margin: 0 auto;
260+
font-size: 16px;
261+
background-color: #2980b9;
262+
}
263+
264+
.recent-updates h2 {
265+
color: transparent;
266+
text-align: center;
267+
margin-bottom: 20px;
268+
}
269+
270+
.recent-updates h2::before {
271+
content: attr(data-text);
272+
color: white;
273+
}
274+
```
275+
276+
---
277+
278+
## Best Practices
279+
280+
### For Buttons
281+
1. **Always ask the user:** "Would you like a true button (linking) or false button (display only)?"
282+
2. **Use inline styles exclusively** for buttons
283+
3. **Provide hover effects** using `onmouseover`/`onmouseout` for interactive feedback
284+
4. **Ensure accessibility** with proper contrast and cursor styles
285+
286+
### For Bulletins
287+
1. **Use `<style>` blocks** at the top of the document
288+
2. **Always use `p.half-height`** for vertical spacing
289+
3. **Follow the proven pattern** from the example above
290+
4. **Use flexbox** for button containers
291+
5. **Implement animations** for "new" or important items
292+
6. **Use `::before` pseudo-elements** for text replacement techniques
293+
294+
### Color Palette
295+
- Primary Blue: `#3498db`
296+
- Hover Blue: `#2980b9`
297+
- Light Gray: `#EFEFEF`
298+
- Alert Red: `#e74c3c`
299+
- Dark Red: `#c0392b`
300+
- Warning Orange: `#f39c12`
301+
- White: `#ffffff`
302+
303+
---
304+
305+
## Quick Reference
306+
307+
| Element Type | CSS Location | Key Requirement |
308+
|-------------|--------------|-----------------|
309+
| Button | Inline only | Use `style=""` attribute |
310+
| Bulletin | `<style>` block | Use `p.half-height` for spacing |
311+
| False Button | Inline | Use `<div>` element |
312+
| True Button | Inline | Use `<button>` or `<a>` element |
313+
| Animations | `<style>` block | Use `@keyframes` |
314+
| Hover Effects (buttons) | Inline | Use `onmouseover`/`onmouseout` |
315+
| Hover Effects (bulletins) | `<style>` block | Use `:hover` pseudo-class |
316+
317+
---
318+
319+
## Workflow
320+
321+
When creating Apricot HTML elements:
322+
323+
1. **Identify the element type** (button vs bulletin)
324+
2. **For buttons:**
325+
- Ask: "True button (linking) or false button (display)?"
326+
- Apply all CSS inline
327+
- Add hover effects with JavaScript events
328+
3. **For bulletins:**
329+
- Create `<style>` block at top
330+
- Use `p.half-height` for spacing
331+
- Follow the proven bulletin pattern
332+
- Use flexbox for layouts
333+
4. **Always reference this style guide** before creating elements
334+
5. **Test in Apricot** to ensure compatibility
335+
336+
---
337+
338+
**Last Updated:** 2025-11-07

‎apricot_versions/checklist_bulletin.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<style type="text/css">
2+
p.half-height{margin:0;padding:0.5em 0;}
3+
.scenario{background:#f5f5f5;border-left:4px solid #3498db;padding:8px 12px;margin:8px 0;}
4+
.scenario h3{margin:0 0 6px 0;font-size:14px;color:#2c3e50;}
5+
.scenario ul{margin:0;padding-left:18px;font-size:13px;line-height:1.4;}
6+
.req{color:#27ae60;}
7+
.cond{color:#f39c12;font-style:italic;}
8+
.rev{color:#9b59b6;font-style:italic;}
9+
body{font-family:Arial,sans-serif;max-width:700px;margin:20px auto;padding:0 15px;}
10+
h1{text-align:center;color:#2c3e50;font-size:20px;margin-bottom:10px;}
11+
h2{font-size:16px;color:#34495e;margin:15px 0 8px 0;}
12+
.legend{background:#ecf0f1;padding:10px;border-radius:4px;font-size:12px;margin-bottom:15px;}
13+
</style>
14+
<h1>Assessment & Paperwork Requirements</h1>
15+
<div class="legend"><strong>Legend:</strong> <span class="req">✓ Required</span> | <span class="cond">* Conditional</span> | <span class="rev">⚠ Review if Out of Date</span></div>
16+
<h2>ENTRY SCENARIOS</h2>
17+
<div class="scenario"><h3>Individual Newborn/Child Entry</h3><ul><li class="req">Child/Adult Assessment</li><li class="req">Occupancy/Departure Form</li><li class="req">HMIS ROI</li><li class="req">Housing Hope ROI</li><li class="req">Contact Data Team</li></ul></div>
18+
<div class="scenario"><h3>Individual Adult Entry</h3><ul><li class="req">Child/Adult Assessment</li><li class="req">Occupancy/Departure Form</li><li class="req">Fenn-Jorstad Self-Sufficiency Matrix</li><li class="req">HMIS ROI</li><li class="req">Housing Hope ROI</li><li class="req">Contact Data Team</li></ul></div>
19+
<div class="scenario"><h3>Family Entry</h3><ul><li class="cond">Child/Adult Assessment *</li><li class="req">Occupancy/Departure Form</li><li class="cond">Fenn-Jorstad Self-Sufficiency Matrix *</li><li class="req">Housing Stability Plan</li><li class="req">HMIS ROI</li><li class="req">Housing Hope ROI</li></ul></div>
20+
<div class="scenario"><h3>Turned 18</h3><ul><li class="req">Child/Adult Assessment</li><li class="req">Fenn-Jorstad Self-Sufficiency Matrix</li><li class="req">HMIS ROI</li><li class="cond">Housing Hope ROI *</li></ul></div>
21+
<p class="half-height"></p>
22+
<h2>UPDATE & CHECK-IN SCENARIOS</h2>
23+
<div class="scenario"><h3>Update (Income/Status)</h3><ul><li class="req">Child/Adult Assessment</li></ul></div>
24+
<div class="scenario"><h3>Quarterly Check-in</h3><ul><li class="req">Housing Stability Plan</li></ul></div>
25+
<div class="scenario"><h3>Enrollment Anniversary</h3><ul><li class="req">Child/Adult Assessment</li><li class="cond">Fenn-Jorstad Self-Sufficiency Matrix *</li><li class="rev">HMIS ROI ⚠</li><li class="rev">Housing Hope ROI ⚠</li></ul></div>
26+
<p class="half-height"></p>
27+
<h2>EXIT SCENARIOS</h2>
28+
<div class="scenario"><h3>Individual Newborn/Child Exit</h3><ul><li class="req">Child/Adult Assessment</li><li class="req">Occupancy/Departure Form</li><li class="req">Exit from Homeless Housing Datasheet</li></ul></div>
29+
<div class="scenario"><h3>Individual Adult Exit</h3><ul><li class="req">Child/Adult Assessment</li><li class="req">Occupancy/Departure Form</li><li class="req">Exit from Homeless Housing Datasheet</li><li class="req">Fenn-Jorstad Self-Sufficiency Matrix</li></ul></div>
30+
<div class="scenario"><h3>Family Exit</h3><ul><li class="req">Child/Adult Assessment</li><li class="req">Occupancy/Departure Form</li><li class="req">Exit from Homeless Housing Datasheet</li><li class="req">Fenn-Jorstad Self-Sufficiency Matrix</li></ul></div>

0 commit comments

Comments
 (0)