Fabric Yardage Calculator Specification

Overview

A comprehensive, browser-based utility designed for quilters and sewists to accurately calculate fabric requirements for diverse projects, reducing waste and planning errors.

Design System

• Color Palette: Soft sage (#D0E0C3), crisp off-white (#F7F7F7), slate gray (#4A4A4A), and focus accents in coral (#FF7F50).
• Layout: A single-page, responsive dashboard utilizing a grid system. Inputs are grouped into cards.
• Animations: Smooth transition effects when switching calculator modes (e.g., Backing vs. Binding) using CSS transitions.

Core Features

1. Quilt Backing Calculator

• Inputs: Quilt Width (in/cm), Quilt Length (in/cm), Fabric Width (usable width), Seam Allowance.
• Output: Total yardage required, number of fabric cuts needed, and layout orientation diagram.

2. Binding Length Calculator

• Inputs: Quilt Perimeter (total), Binding Strip Width, Seam Allowance.
• Output: Total linear inches/yards required, number of strips to cut, total width of fabric needed.

3. Custom Yardage/Conversion Tool

• Unit Converter: Seamless toggling between Inches, Centimeters, and Yards.
• Bolt Estimation: Input the number of squares/pieces required and the grid size to determine total yardage from a standard 42-44" bolt.

4. Project Export

• A "Printable Summary" feature that generates a clean, printer-friendly list of cutting instructions and totals.

Technical Requirements

• Frontend: Vanilla JavaScript (ES6+), HTML5, and CSS3.
• Responsiveness: Mobile-first design; inputs must be large enough for touchscreen interaction.
• Storage: Use localStorage to save user preferences (e.g., preferred unit of measurement: inches or centimeters).
• Accessibility: High contrast ratios, screen-reader friendly form labels, and clear input validation error messages.