Demo Pages Overview
Basic Structure
Demo pages are configured through individual markdown files in the root directory (e.g., demo1.md
, demo2.md
). Each demo uses specific includes from _includes/components/sections/
directories.
Include Structure
Each demo has its own includes folder at _includes/components/sections/demo{number}/
containing section-specific templates.
Common Section Types
Hero Sections
Hero sections are typically the first visual element and can be configured with various styles and content.
Project Showcases
Project sections can be displayed in various formats including grids, carousels, and masonry layouts.
Layout Customization
Color Schemes
Each demo can use custom color schemes defined in the frontmatter or section configurations.
Common Components
Navigation
Configure navigation styles and menu items for each demo layout.
Footer Styles
Different footer layouts and content configurations available for each demo.
Demo Categories
Corporate Demos (Demo1-Demo8)
Corporate demos feature business-focused layouts with sections for services, team members, and company information.
Creative Agency Demos (Demo9-Demo15)
Agency demos emphasize portfolio work, creative services, and dynamic visual elements.
Product/App Demos (Demo16-Demo23)
Product-focused demos showcase features, pricing plans, and app screenshots.
Landing Pages (Demo24-Demo34)
Conversion-focused landing pages with clear CTAs and marketing elements.
Advanced Customization
Custom Section Creation
Create new sections by adding HTML templates to your demo's section folder.
Component Variations
Customize existing components with different styles and layouts.
Best Practices
Performance Optimization
- Use appropriate image sizes and formats
- Minimize custom JavaScript
- Leverage built-in lazy loading
- Utilize CSS utility classes
Responsive Design Guidelines
- Use Bootstrap grid system consistently
- Test on multiple device sizes
- Implement mobile-first approach
- Consider touch interfaces