Skip to content

Commit 81218e8

Browse files
ThomasJButlerThomasJButler
committed
Add complete CSS Showcase website
- Interactive homepage with navigation - Basic CSS fundamentals page - Layout demonstrations (Flexbox, Grid) - Advanced features (animations, custom properties) - Responsive design examples - Transitions and animations showcase - Supporting scripts and styles
1 parent adcfa29 commit 81218e8

29 files changed

Lines changed: 13246 additions & 334 deletions

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
CLAUDE.md

‎CONTRIBUTING.md‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
# Contributing to CSS Showcase
2+
3+
First off, thank you for considering contributing to CSS Showcase! It's people like you that make CSS Showcase such a great learning resource.
4+
5+
## 🤝 Code of Conduct
6+
7+
This project and everyone participating in it is governed by the principle of being kind and respectful. By participating, you are expected to uphold this principle.
8+
9+
## 🎯 How Can I Contribute?
10+
11+
### Reporting Bugs
12+
13+
Before creating bug reports, please check existing issues as you might find that you don't need to create one. When you are creating a bug report, please include as many details as possible:
14+
15+
- **Use a clear and descriptive title** for the issue
16+
- **Describe the exact steps to reproduce the problem**
17+
- **Provide specific examples** to demonstrate the steps
18+
- **Describe the behaviour you observed** and what behaviour you expected to see
19+
- **Include screenshots** if possible
20+
- **Include browser information** (Chrome, Firefox, Safari, version numbers)
21+
22+
### Suggesting Enhancements
23+
24+
Enhancement suggestions are tracked as GitHub issues. When creating an enhancement suggestion, please include:
25+
26+
- **Use a clear and descriptive title** for the issue
27+
- **Provide a detailed description** of the suggested enhancement
28+
- **Provide specific examples** to demonstrate how it would work
29+
- **Explain why this enhancement would be useful** to most CSS Showcase users
30+
31+
### Pull Requests
32+
33+
1. Fork the repo and create your branch from `main`
34+
2. Make your changes following the style guides below
35+
3. Test your changes in multiple browsers if possible
36+
4. Update the README.md with details of changes if applicable
37+
5. Make sure your code follows the existing code style
38+
6. Issue that pull request!
39+
40+
## 💻 Style Guides
41+
42+
### Git Commit Messages
43+
44+
- Use UK English
45+
- Use the present tense ("Add feature" not "Added feature")
46+
- Use the imperative mood ("Move cursor to..." not "Moves cursor to...")
47+
- Keep the first line under 72 characters
48+
- Reference issues and pull requests after the first line
49+
50+
Example:
51+
```
52+
Add pure CSS tooltip component
53+
54+
- Create tooltip.html demo page
55+
- Add hover and focus states
56+
- Include accessibility attributes
57+
- Support multiple positions (top, bottom, left, right)
58+
```
59+
60+
### HTML Style Guide
61+
62+
- Use semantic HTML5 elements
63+
- Maintain consistent 2-space indentation
64+
- Use descriptive class names with kebab-case
65+
- Include proper ARIA labels for accessibility
66+
- Add comments for complex structures
67+
68+
Example:
69+
```html
70+
<section class="demo-section" aria-labelledby="section-title">
71+
<div class="container">
72+
<h2 id="section-title" class="section-title">Demo Title</h2>
73+
<p class="section-intro">
74+
Introduction text here...
75+
</p>
76+
</div>
77+
</section>
78+
```
79+
80+
### CSS Style Guide
81+
82+
- Use CSS custom properties for theming
83+
- Follow mobile-first approach
84+
- Group related properties together
85+
- Use meaningful class names (BEM-inspired)
86+
- Add comments for complex selectors or calculations
87+
- Use UK English in comments (colour not color)
88+
89+
Example:
90+
```css
91+
/* Button component with hover state */
92+
.btn-primary {
93+
/* Positioning */
94+
display: inline-block;
95+
96+
/* Box model */
97+
padding: var(--space-3) var(--space-6);
98+
margin: 0;
99+
100+
/* Typography */
101+
font-weight: var(--font-medium);
102+
text-decoration: none;
103+
104+
/* Visual */
105+
background: var(--colour-primary);
106+
color: white;
107+
border-radius: var(--radius-md);
108+
109+
/* Behaviour */
110+
cursor: pointer;
111+
transition: all var(--transition-base);
112+
}
113+
114+
.btn-primary:hover {
115+
background: var(--colour-primary-dark);
116+
transform: translateY(-2px);
117+
}
118+
```
119+
120+
### JavaScript Style Guide
121+
122+
- Use ES6+ syntax
123+
- Prefer const over let, avoid var
124+
- Use meaningful variable names
125+
- Add JSDoc comments for functions
126+
- Handle errors gracefully
127+
- Keep it minimal - this is a CSS showcase!
128+
129+
Example:
130+
```javascript
131+
/**
132+
* Copies code snippet to clipboard
133+
* @param {string} code - The code to copy
134+
* @returns {Promise<void>}
135+
*/
136+
const copyToClipboard = async (code) => {
137+
try {
138+
await navigator.clipboard.writeText(code);
139+
showNotification('Copied to clipboard!');
140+
} catch (err) {
141+
console.error('Failed to copy:', err);
142+
showNotification('Failed to copy code');
143+
}
144+
};
145+
```
146+
147+
## 🎨 Design Principles
148+
149+
1. **Pure CSS First** - Prioritise CSS solutions over JavaScript
150+
2. **Progressive Enhancement** - Ensure basic functionality works everywhere
151+
3. **Accessibility** - Make it usable for everyone
152+
4. **Performance** - Keep it fast and lightweight
153+
5. **Educational** - Code should be clear and learnable
154+
155+
## 📝 Adding a New Demo Page
156+
157+
When adding a new CSS demo page:
158+
159+
1. Create the HTML file following the existing structure
160+
2. Create a corresponding CSS file in `styles/`
161+
3. Add navigation links to all existing pages
162+
4. Include proper meta tags and descriptions
163+
5. Add browser support information where relevant
164+
6. Update the README.md if it's a significant addition
165+
166+
## 🐛 Testing
167+
168+
Before submitting a pull request:
169+
170+
1. Test in multiple browsers (Chrome, Firefox, Safari minimum)
171+
2. Check responsive behaviour on mobile and desktop
172+
3. Verify dark/light mode works correctly
173+
4. Test keyboard navigation
174+
5. Run through with a screen reader if possible
175+
176+
## 📚 Resources
177+
178+
- [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS)
179+
- [Can I Use](https://caniuse.com/) - Browser support tables
180+
- [CSS Tricks](https://css-tricks.com/) - CSS techniques and guides
181+
- [A11y Project](https://www.a11yproject.com/) - Accessibility resources
182+
183+
## 🎉 Recognition
184+
185+
Contributors will be acknowledged in the project! We value every contribution, no matter how small.
186+
187+
## ❓ Questions?
188+
189+
Feel free to open an issue with your question or reach out to the maintainer.
190+
191+
---
192+
193+
Thank you again for your interest in contributing to CSS Showcase! 🙌

‎CSS Showcase2/.DS_Store‎

0 Bytes
Binary file not shown.

‎LICENSE copy‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 Thomas Butler
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

0 commit comments

Comments
 (0)