Freeframe
Education10 pages · 0 downloads · Free

Sprout

A field-notebook website for a practical gardening school, with courses, a timetable, enrolment and a bed planner.

Stack: HTML + Tailwindv1.0.0 changelog

DocsLive demo Download .zip179 KB

About this template

Sprout is the website of Loamstead field school, a fictional gardening school in Pershore, Worcestershire. Ten courses with their own pages and drawings, a rolling timetable with places left, a three-step enrolment request and a bed planner that draws your plants to scale, all in a cream, deep green and rust field-notebook design.

Features

  • Ten courses with their own pages, drawings, tutors and learner quotes
  • Course filters by level, topic and season, kept in the URL
  • Timetable of the next twelve weeks with places left
  • Three-step enrolment request with inline validation and a running total
  • Rolling session dates from rules, so the demo never goes stale
  • Bed planner that draws plants to scale and suggests a course
  • Saved shortlist and requests that still work with storage blocked
  • Access statement, booking terms and safeguarding copy
  • Accessible mobile menu, focus styles and reduced-motion support

Pages included

Quick start

unzip sprout.zip && cd sproutopen index.html        # that's it # optional, after adding new Tailwind classes:npm install && npm run build
Read the Sprout documentation →

Changelog

  1. v1.0.0

    Added

    • Ten pages for Loamstead field school, a fictional practical gardening school in Pershore: home, courses, course page, timetable, enrolment, bed planner, shortlist, about, visit and a 404 page.
    • Ten courses across beginner, improver and experienced levels and every season, with three tutors, learner quotes and a drawing for each course.
    • Course list filters by level, topic and season, kept in the URL.
    • Course pages at course.html?course=… with their own title, next four dates, places left, tutor and related courses, and a clear message for unknown links.
    • Upcoming-sessions timetable for the next twelve weeks, filterable by course and level.
    • Three-step enrolment request (date, people, details) with inline validation, a running total and a confirmation with a reference; requests are kept on the device and reduce the places shown.
    • Rolling session dates worked out from each course's rule (weekday, frequency, months, Christmas closure), at least seven days ahead in UK time, with a ?now= preview parameter.
    • Bed planner that counts plants for a bed and crop, draws them to scale, explains when a bed is too small or the drawing shows only a corner, remembers the last plan and suggests a course.
    • Saved shortlist and enrolment requests with an in-memory fallback when browser storage is blocked.
    • Enquiry form with inline validation and a course or topic preselected from the URL.
    • Access statement, booking and cancellation terms, safeguarding note and FAQ.
    • Commissioner and Vollkorn type, field-notebook artwork, an Open Graph image and full documentation.

More templates