Hextra Theme Outline

Theme Structure and Files

The Hextra theme is structured to provide a modular and scalable approach to website customization. Key files and their roles:

• _config.yml: The theme configuration file defines global settings like site title, author, and social links.

# Site settings
          title: "HeliXML Documentation"
          author: "HeliXML Team"
          description: "Welcome to the official documentation for HeliXML."
          
          # Social media links
          social:
            - type: twitter
              url: "https://twitter.com/helixml"
            - type: github
              url: "https://github.com/helixml/docs"
          

• assets/: Contains all static assets like CSS, Javascript, and images.

• layouts/: Houses layout templates for different page types (e.g., default.html, post.html).

• _includes/: Includes reusable components and snippets.

• _sass/: Contains Sass files for styling.

• _data/: Contains data files used to generate content dynamically.

CSS Framework: Tailwind CSS

The Hextra theme leverages Tailwind CSS, a utility-first CSS framework, for efficient styling.

• tailwind.config.js: Configures Tailwind CSS settings like colors, fonts, and breakpoints.

/** @type {import('tailwindcss').Config} */
          module.exports = {
            content: [
              './_includes/**/*.html',
              './_layouts/**/*.html',
              './_plugins/**/*.rb',
              './_sass/**/*.scss',
              './assets/js/**/*.js',
            ],
            theme: {
              extend: {},
            },
            plugins: [],
          }
          

• _sass/tailwind.scss: Includes Tailwind CSS components and utilities.

Javascript Functionality and Interactions

Javascript is used to enhance user interactions and dynamic elements within the theme.

• assets/js/: Contains Javascript files for various functionalities.

• assets/js/script.js: This file manages the overall Javascript behavior of the theme.

// Smooth scrolling to anchors
          document.addEventListener('DOMContentLoaded', function () {
            var anchors = document.querySelectorAll('a[href^="#"]');
            for (var i = 0; i < anchors.length; i++) {
              anchors[i].addEventListener('click', function (e) {
                e.preventDefault();
                var targetId = this.getAttribute('href');
                var targetElement = document.querySelector(targetId);
                if (targetElement) {
                  targetElement.scrollIntoView({
                    behavior: 'smooth'
                  });
                }
              });
            }
          });
          

Customization

The Hextra theme offers various customization options:

• _config.yml: Modify site settings like title, author, description, and social links.
• _sass/: Override Tailwind CSS styles or create custom styles for unique elements.
• assets/js/: Add custom Javascript functionality to enhance user interactions.
• _includes/: Create reusable components to structure and style content.

Example: Adding a Custom CSS Class

// _sass/custom.scss
          .my-custom-class {
            @apply bg-blue-500 text-white rounded-md p-4;
          }
          

This code snippet defines a custom CSS class my-custom-class with Tailwind CSS utilities for blue background, white text, rounded corners, and padding. You can use this class in your HTML to apply the specific styling.