Decorator Kit Developer Guide

Start from the Decorator [two-column.html] template and save it as [page-name.html] at the project root.
Site title: [Department name]. Navigation items: [Home, About, Services, Contact] — update the drawer, the navbar, and the side nav.
In the canvas, build:
1. [module or component name] — [what it says / does]
2. [module or component name] — [what it says / does]
3. [module or component name] — [what it says / does]
Images: [real paths + alt text, or "use placeholders at the module's documented size"].
Custom behavior goes in js/[name].js. Styles go in css/[name].css, scoped to main#main-content.
Don't use Bootstrap -success/-info/-warning/-danger classes. Keep every chrome region as shipped.

Use one h1 per page and h2 for each section. If a section needs h3 headings, put them inside a Decorator module wrapper or a div.styled box. Don't restyle the headings. Fonts are Roboto and Teko only.

Add a primary action button "[Apply now]" (btn btn-primary) and a secondary "[Learn more]" (btn btn-default), using the markup in kitchen-sink/buttons.html. Use a <button> for actions and an <a> for navigation. No btn-success/-info/-warning/-danger.

Show a deadline warning using the Decorator .msg.alert box (from kitchen-sink/alerts.html, "Legacy Alert Styles"), with heading "[Alert]" and text "[..]". Use .msg.info for neutral notes. Don't use Bootstrap alert-info/-success/-warning/-danger.

Set the breadcrumb to Home › [Section] › [This page]. Resolve each href relative to this page's own folder.

Build a [contact] form using the Bootstrap 3 markup in kitchen-sink/forms.html (basic example). Fields: [name, email, topic select, message textarea]. Bind each label with for/id, use standard autocomplete values, no autofocus. Show validation errors above the form in a .msg.alert box. Put the submit logic in js/[form-name].js.

Add a filter box above the [course list] using the "Button addons" input group from kitchen-sink/input_groups.html, with an .sr-only label. Scope any CSS to main#main-content so it can't reach the site search. Filtering logic goes in js/[filter].js.

Render [data] as a table.styled-dark inside .table-responsive, with a <caption>, th scope="col", and tr.even on alternate rows. Show status as text, not color alone. If it needs sorting or paging, use the DataTables widget instead (see Widgets).

Add an FAQ using the drawer module (.drawer-wrapper > .drawer, from the Text and Headline module in templates/modules.html). Questions: [..]. Keep the h2 > a / div pairs exactly as shipped, and don't add accordion JavaScript — base.min.js already handles it.

Lay out [three feature blurbs] in a Bootstrap 3 .row with .col-sm-4 columns. Use Glyphicons with aria-hidden="true" next to visible text. No Font Awesome.

Add the full-width text and CTA module (jumbotron jumbotron-full-width side-image-white bubbles) from templates/two-column.html. Headline: "[..]". Blurb: "[..]". Button: "[..]" linking to [url].

Add a "Text and CTA w/Full Height Image Right" module from templates/modules.html. Headline "[..]" (about 25 characters per line, 2 lines max), blurb of about 100 words, button "[..]". Image: [path], 550 × 370, alt "[..]". No text in the image.

Add the "Dark Background Text and CTA" module (jumbotron jumbotron-sand) from templates/modules.html, with the image on the left. Headline "[..]", blurb "[..]", button "[..]". Image: [path] at 550 × 370 with alt text.

Add Callout Content One (jumbotron side-image-white jumbotron-callout-content-one navy-yellow) from templates/two-column.html. Use the class background (don't supply an image). Panel heading "[..]", text "[..]", button .styled-yellow "[..]".

Add "Callout Content with [2|3|4] boxes" from templates/modules.html with the jumbotron-orbs-1 preset background. Don't carry over the inline style="" background or min-height from the demo. Section headline "[..]". Boxes: [title / one-sentence blurb / text-link] × [n].

Add a tiles-with-links module. Take the flex/wrapper markup from the "Callout Content Blocks" block in templates/modules.html, but change the wrapper class from jumbotron-cta-blocks to jumbotron-tile-links, since the demo class isn't styled. Give every img.background-image an alt attribute (alt="" if the link text says it all). Tiles: [label → url] × [n]. Images at 550 × 370.

Add the "News with Images" module from templates/modules.html. Three items: [date / headline / url / image path + alt]. All images 388 × 246. Keep the a.panel.panel-default card structure, and remove the invalid alt attribute the demo puts on the <a> tags.

Add the "Multiple Listings" event module from templates/modules.html (section.jumbotron > .container > .event-listing, one per event). Events: [title / url / date-time text / blurb / image + alt]. For a calendar view instead, use the FullCalendar widget.

Build the landing page for [Department of X] from homepage.html, saved as index.html (overwrite is OK). Rewrite the asset paths to cdn.ucsd.edu.
Navigation (drawer + navbar): Home, About, Academics, Research, News, Contact.
Canvas, top to bottom:
1. Hero with 3 slides (1440 × 530): [headline + link] each.
2. Callout content with 3 boxes on the jumbotron-orbs-1 preset: Students, Research, Give — one sentence and a text-link each.
3. Tiles with links (jumbotron-tile-links, not jumbotron-cta-blocks): Faculty, Staff, Visit — 550 × 370 images with alt text.
4. News with images: 3 items at 388 × 246.
5. Event listing: next 3 events.
Use placeholder images at the right sizes where I haven't given one.

Create request.html from two-column.html for a [Facilities service request] app. Add "Request service" to the drawer, the navbar, and the side nav.
Canvas:
1. h1 "Request Service" and a one-paragraph intro.
2. A .msg.info box: "Most requests are reviewed within 3 business days."
3. An error summary container above the form that shows a .msg.alert listing each invalid field (with a link to it) after a failed submit.
4. A Bootstrap 3 form (kitchen-sink/forms.html): full name (autocomplete=name), email (autocomplete=email), department select, request type radio group in a fieldset with a legend, and a details textarea with a 1000-character MaxChar counter. Submit is btn btn-primary.
5. A drawer FAQ with 3 questions.
Validation and submit logic go in js/request-form.js. POST to [endpoint] with a CSRF token. Don't log form contents.

Create directory.html from blank-slate.html. Add "Directory" to the drawer and the navbar.
Canvas:
1. h1 "Staff Directory" and a one-line intro.
2. The DataTables widget (widgets/datatables.html) loading data/staff.json with the columns Name, Title, Unit, Email (mailto link), Phone. Bring the widget's CSS/JS across. Setup code goes in js/directory.js.
3. A sand CTA module (jumbotron-sand): "Can't find someone?" with a btn btn-default linking to [campus directory].
Escape every value from staff.json before rendering it.

Create status.html from blank-slate.html for a [service status] dashboard.
Canvas:
1. h1 "Service Status" and a "Last updated [time]" paragraph.
2. When there's an active incident, a .msg.alert with its summary.
3. Callout content with 4 boxes (jumbotron-callout-content-two, jumbotron-orbs-1): one per service — [Email, Wi-Fi, Canvas, VPN]. Show status as words ("Operational", "Degraded") plus a Glyphicon, never color alone.
4. A table.styled-dark of the last 10 incidents inside .table-responsive, with a caption and th scope.
Load the data from [status.json] in js/status.js and escape every value. Don't use label-success/-warning/-danger or progress bars.

Create kb/[article-slug].html from three-column.html. Resolve every nav href relative to kb/.
Left menu: [categories]. Middle column: h1 "[title]", an intro, an ordered list of steps, then a drawer FAQ with [3] questions. Right column: a div.styled box with h3 "On this page" and anchor links to each h2, then a .msg.info box with the help desk contact.

Review [page.html] against the Decorator rules:
- Is every change inside main#main-content?
- Do all Decorator CSS/JS tags point at cdn.ucsd.edu?
- Does any class end in -success/-info/-warning/-danger, or come only from bootstrap.min.css while painting a color?
- One h1, headings in order, alt text on every image, labels on every input, 44px touch targets?
- Does the new page appear in the drawer, the navbar, and the side nav?
Then run `npx ucsd-decorator-kit verify` and report the findings. Don't run it with --accept.