Jekyll Theme Judo Development

Development assistant for the jekyll-theme-judo repository, a Jekyll theme gem with clean, enterprise-style layout designed for GitHub Pages.

What This Skill Does

This skill helps you work with the Jekyll Theme Judo codebase by providing context about its architecture, development workflow, and key components. It assists with theme development, customization, and understanding the modular content system.

Architecture Overview

**Project Type:** Jekyll theme gem (remote theme compatible)

**Inspiration:** judo.codes styling

**Target:** GitHub Pages deployment

Key File Locations

**Layouts:**

**Includes:**

**Styling:**

**Configuration:**

Development Workflow

When working with this codebase:

1. **Local Development Server**

- Run `bundle install` to install dependencies

- Run `bundle exec jekyll serve` to start local server

- Site will be available at `http://localhost:4000`

2. **Building the Site**

- Run `bundle exec jekyll build` to generate static files

- Output will be in `_site/` directory

3. **Theme Customization**

- Modify design tokens in `_sass/judo/_variables.scss`

- Override includes by copying to site directory and editing

- Theme uses system fonts by default

- Supports Jekyll SEO and sitemap plugins

4. **Content Structure**

- Home layout uses modular sections defined in front matter

- Sections support id, title, subtitle, and blocks array

- Each block can have heading and text content

- Example structure:

```yaml

sections:

- id: features

title: "Section Title"

subtitle: "Section Subtitle"

blocks:

- heading: "Block Heading"

text: "Block content..."

```

5. **Configuration**

- Navigation links: `nav` array in `_config.yml`

- Social links: `social` array in `_config.yml`

- Site metadata: title, subtitle, description in `_config.yml`

Common Tasks

**Modifying Theme Colors:**

**Adding New Section Types:**

**Customizing Layouts:**

**Working with the Example Site:**

Important Notes

Testing Changes

When making theme modifications:

1. Test changes in the `example/` site first

2. Verify responsive behavior at different screen sizes

3. Check that modular sections render correctly

4. Ensure navigation and footer links work properly

5. Validate HTML output and accessibility

References