Custom CSS & JavaScript

Dockit allows you to easily add custom CSS styles and JavaScript functionality to enhance your documentation site’s appearance and behavior. This guide covers various methods for implementing custom code.

Custom CSS

Adding Global Styles

You can add global CSS styles that will apply to all pages of your documentation site.

Method 1: Using the Theme Configuration

Add your custom CSS to the theme configuration file:

Method 2: Direct CSS Injection

Create a CSS file in your src/styles/ directory:

Component-Specific Styles

You can also add styles specific to certain components:

Custom JavaScript

Adding Interactive Functionality

Enhance your documentation with custom JavaScript functionality.

Method 1: Global Scripts

Add JavaScript that runs on all pages:

Method 2: Component-Specific Scripts

Add JavaScript for specific components:

Analytics and Tracking

Add analytics tracking to your documentation:

Advanced Customization

CSS Variables and Theming

Utilize CSS custom properties for dynamic theming:

JavaScript Modules

Organize your JavaScript using ES6 modules:

Best Practices

Performance Optimization

1. Minimize CSS and JavaScript: Use minification tools for production builds

2. Lazy Loading: Load non-critical JavaScript after page load

3. CSS Specificity: Use efficient selectors to avoid performance issues

Maintainability

1. Modular Code: Organize CSS and JavaScript into logical modules

2. Documentation: Comment your custom code thoroughly

3. Version Control: Track changes to custom styles and scripts

Browser Compatibility

1. Progressive Enhancement: Ensure basic functionality works without JavaScript

2. CSS Fallbacks: Provide fallbacks for modern CSS features

3. Feature Detection: Use feature detection instead of browser detection

Troubleshooting

Common Issues

Styles Not Applying

• Check CSS specificity

• Verify file paths in configuration

• Ensure CSS is properly imported

JavaScript Errors

• Check browser console for error messages

• Verify script loading order

• Test in different browsers

Theme Conflicts

• Use CSS custom properties for theme-aware styles

• Test in both light and dark modes

• Avoid hardcoded colors

Debug Mode

Enable debug mode to troubleshoot custom code:

Examples

Custom Alert Component

Interactive Code Examples

This documentation provides a comprehensive guide for adding custom CSS and JavaScript to your Dockit site, including practical examples and best practices for maintainable customization.