From clone to first page in under ten minutes. Install the theme, pick a layout, and let the ontological engine handle typography, spacing, color, and responsive behavior.
## Prerequisites
- Jekyll 4.0+
- Ruby 2.7+
- Node.js (for SCSS linting)
## Installation
### 1. Clone the Repository
Clone the theme repository from GitHub to your local machine.
```bash
git clone https://github.com/ASISaga/theme.asisaga.com.git && cd theme.asisaga.com
```
### 2. Install Dependencies
Install Ruby gems required by Jekyll and the theme.
```bash
bundle install
```
### 3. Serve Locally
Start the Jekyll development server to preview the theme.
```bash
bundle exec jekyll serve
```
Open `http://localhost:4000`.
## Create Your First Page
Create a new file with YAML front matter specifying the layout you want to use.
Create a file with front matter: layout: post, title: 'Hello World'. Write your content below the front matter block. The layout handles typography, spacing, and responsive behavior.
## What Makes This Different
Before diving into layouts and categories, understand what sets Genesis apart. These articles explain the philosophy:
| Article | What You'll Learn |
|---------|-------------------|
| [The Death of Utility Classes: Why Ontologi...](/samples/content-driven/article.html) | Manifesto, Utility Classes, Architecture |
| [Property Ownership: The Rule That Makes CS...](/samples/content-driven/property-ownership.html) | Property Ownership, Specificity, Architecture |
| [Web Components Without the Framework Tax](/samples/content-driven/web-components.html) | Web Components, Lit, Progressive Enhancement |
| [Design With Memory: How AI Agents Evolve a...](/samples/content-driven/post.html) | Living Genome, AI Agents, Evolution |
## The Six Ontological Categories
- **Environment** (`genesis-environment`) — Spatial organization and layout. Owns grid, flex, gap, and max-width properti...
- **Entity** (`genesis-entity`) — Visual presence and material properties. Owns padding, border, border-radius,...
- **Cognition** (`genesis-cognition`) — Typography and information intent. Owns font-size, font-weight, font-family, ...
- **Synapse** (`genesis-synapse`) — Interaction and navigation patterns. Owns hover, focus, cursor, and transitio...
- **State** (`genesis-state`) — Temporal conditions and lifecycle. Owns animation, transition, opacity, and f...
- **Atmosphere** (`genesis-atmosphere`) — Sensory texture and emotional tone. Owns background, color, box-shadow, and a...
## Next Steps
- Read [The Death of Utility Classes](/samples/content-driven/article.html) to understand the architectural philosophy
- Explore [OKLCH Color Science](/samples/content-driven/oklch.html) to see how the palette works
- Browse the [Chronicle](/samples/content-driven/archive.html) for all articles and deep dives
- Check the [FAQ](/samples/knowledge/faq.html) for quick answers to common questions
