BUILD

DOCUMENTATION FOR BRUTAL TOOLS

Everything you need to build interfaces that refuse to be ignored. From installation to deployment, this documentation covers the complete FYT workflow.

🔥 DOGFOODING ALERT: This documentation is built with the FYT system it describes!⚡

⊕

QUICK START

Get building in 60 seconds

01. INSTALL

Set up Node.js, npm, and Go for the complete FYT experience

TERMINAL

$# Check your system

$make info

$# Install everything

$make setup

02. DEVELOP

Launch the development server with hot reload

TERMINAL

$# Start dev server

$make dev

$# or

$./fyt serve

03. DEPLOY

Create optimized static site ready for deployment

TERMINAL

$# Build and validate

$make build

$# Deploy

$make deploy

INSTALLATION

PREREQUISITES

Before you start building with FYT, ensure you have the following installed:

Node.js 18+

BASH$

# Check Node.js version
node --version

# Install Node.js (if needed)
# Visit https://nodejs.org or use a version manager

Go 1.21+

BASH$

# Check Go version  
go version

# Install Go (if needed)
# Visit https://golang.org/dl/

Git

BASH$

# Check Git version
git --version

SYSTEM CHECK

Verify your system meets all requirements:

BASH$

# Run system information check
make info

# Expected output:
# Node.js: v18.x.x
# npm: 9.x.x  
# Go: go1.21.x
# Git: git version 2.x.x
# OS: Darwin (or Linux)
# Architecture: arm64 (or x86_64)

CLI REFERENCE

The FYT CLI is your primary tool for content management and build operations.⚡

⊕

PROJECT MANAGEMENT

BASH$

# Initialize new project
./fyt init my-project

# Initialize in current directory  
./fyt init .

# Show help
./fyt --help

CONTENT MANAGEMENT

BASH$

# Add new page
./fyt content add page about

# Add new component docs
./fyt content add component brutal-button

# List all content
./fyt content list

# Validate content
./fyt validate --strict

CONTENT MANAGEMENT

YAML-DRIVEN CONTENT

FYT uses a YAML-based content system that separates content from presentation. This enables the same content to be rendered to multiple formats: web, print, API responses.

Content Structure:

YAML

# content/pages/example.yaml
meta:
  title: "Page Title"
  description: "Page description"
  slug: "/example"

hero:
  title: "HERO TITLE"
  subtitle: "Hero subtitle"
  lead_text: "Lead paragraph text"

sections:
  - id: "section-1"
    type: "content"
    title: "Section Title"
    content: "Section content in markdown"
    variant: "brutal"

ADDING CONTENT

Create new content with the CLI:

BASH$

# Add new page
./fyt content add page pricing

# Add component documentation
./fyt content add component brutal-modal

# Add blog post
./fyt content add blog my-post

CONTENT VALIDATION

Validate content against schemas:

BASH$

# Basic validation
./fyt validate

# Strict validation with quality checks
./fyt validate --strict

# Auto-fix common issues
./fyt validate --fix

STYLING & CUSTOMIZATION

Customize the system while maintaining the brutal aesthetic. Don't compromise the message.⚡

⊕

DESIGN TOKENS

Customize the design system by modifying design tokens in content/design-tokens/tokens.yaml

YAML

# content/design-tokens/tokens.yaml
colors:
  brutal:
    red: "#ff0000"      # Primary brutal red
    white: "#ffffff"    # Pure white
    black: "#000000"    # Pure black
    yellow: "#ffff00"   # Brutal yellow
    fuschia: "#ff00ff"  # Electric fuschia

typography:
  font_families:
    brutal: ["Arial Black", "Arial Bold", "sans-serif"]
    mono: ["Courier New", "Courier", "monospace"]

  font_sizes:
    xs: "0.75rem"
    sm: "0.875rem"
    base: "1rem"
    lg: "1.125rem"
    xl: "1.25rem"

CUSTOM COMPONENTS

Build components that follow FYT principles:

TYPESCRIPT

// src/components/ui/MyComponent.tsx
import { cn } from '../../lib/utils';

interface MyComponentProps {
  variant?: 'brutal' | 'electric';
  children: React.ReactNode;
}

export const MyComponent: React.FC<MyComponentProps> = ({
  variant = 'brutal',
  children
}) => {
  const classes = cn(
    'font-brutal uppercase tracking-tight',
    'border-4 border-brutal-white',
    'shadow-[4px_4px_0px_#000000]',
    variant === 'brutal' && 'bg-brutal-red text-brutal-white',
    variant === 'electric' && 'bg-brutal-black text-brutal-yellow'
  );

  return (
    <div className={classes}>
      {children}
    </div>
  );
};

BRUTAL PRINCIPLES

Follow these principles when customizing:

• High contrast - Ensure readability

• Bold borders - 4px minimum

• Color separation - White then black borders

• Brutal shadows - Hard drop shadows

• Uppercase text - Commands demand attention

TROUBLESHOOTING

COMMON ISSUES

Build fails with YAML errors:

BASH

# Validate and fix YAML content
./fyt validate --strict
# Fix reported issues in YAML files

CLI not found:

BASH

# Build the CLI tool
make build-cli
# Ensure ./fyt exists and is executable

Dependencies missing:

BASH

# Clean and reinstall
make clean-all
make install

Port already in use:

BASH

# Use different port
./fyt serve --port 3001

CONTRIBUTING

Help build tools for the resistance! Every contribution matters.⚡

⊕

CONTRIBUTION GUIDELINES

We welcome contributions that align with the FYT philosophy: brutal tools for clear communication.

Getting Started:

BASH$

# Fork and clone the repository
git clone https://github.com/b7r-dev/fyt.git
cd fyt

# Install dependencies
make setup

# Create feature branch
git checkout -b feature/brutal-new-component

# Make your changes
# Test thoroughly
make test

# Submit pull request

Contribution Types:

• New components - Following brutal design principles

• Documentation - Clear, uncompromising docs

• Bug fixes - Keep the system robust

• Accessibility - Ensure everyone can use the tools

• Performance - Fast tools for urgent messages

READY TO BUILD?

Start building interfaces that refuse to be ignored. The tools are ready. The documentation is complete. Your message is waiting.