This post demonstrates the features of the consolidated xhosi template, built from analyzing and extracting the best practices from three existing websites.
Typography and Content
xhosi uses a modern typography system with proper heading hierarchy, readable line spacing, and responsive font sizing that adapts to different screen sizes.
Code Examples
Here’s how inline code
looks, and below is a syntax-highlighted code block:
// Theme switcher example
class ThemeSwitcher {
constructor() {
this.currentTheme = this.getStoredTheme() || 'system';
this.init();
}
applyTheme(theme) {
document.documentElement.setAttribute('data-force-theme', theme);
}
}
Lists and Structure
xhosi handles various content structures:
- Ordered lists with proper spacing
- Unordered lists with consistent styling
- Blockquotes for emphasis
This is a blockquote showing how quoted content is styled with subtle background treatment and border styling.
Footnote System
xhosi includes both basic and advanced footnote support[1]. The implementation allows for flexible footnote rendering[2].
Theme System
Toggle between light, dark, and system preference themes using the switcher in the header. The system respects user preferences and provides smooth transitions.
Technical Implementation
The modular CSS architecture splits styles into focused files:
variables.css
- Design tokens and CSS custom propertiesbase.css
- Typography and foundational styleslayout.css
- Page structure and navigationcomponents.css
- Reusable UI elementsposts.css
- Blog-specific componentsfootnotes.css
- Footnote implementationsthemes.css
- Light/dark theme systemresponsive.css
- Mobile-first responsive design
This approach reduces complexity while maintaining all essential features from the source websites.