How to edit
Edit this template in eight steps.
Ostrid is a demo company: every name, number and quote on this site is invented. Replace them with your own.
01 · STYLES
Colours and type live in five colour styles (Paper, Ink, Graphite, Rule, Spot) and a small set of text styles (Figure, H1, H2, Body, Meta and the rest). Change a style once and every page follows. Spot is the only accent; keep it for the live marker, notches and the numbers band.
02 · TOP BAR AND FOOTER
Both sit in the layout template named Site. The top bar is a component with Desktop, Tablet, Phone and Phone open variants. The footer’s day ruler places the deploy notch with two widths: minutes before (842) and after (598) the deploy time.
03 · CONTENT
Changelog, Blog, Careers and FAQ are CMS collections. Add an item and it appears on its list and gets its own page. The home page shows the three latest changelog entries. The Questions section on the home page reads FAQ. Blog posts take an optional cover image; the box hides while it is empty. Each changelog entry draws its timeline from the Timeline field, written as plain text like “Receive 0-150 / Plan 150-230 / Call tools 230-420 / Respond 420-460”. Prices live in the Plans component: change them in all four variants (Monthly, Yearly, Phone monthly, Phone yearly).
04 · SPINE
Deep pages (an entry, a post, a job, plan details) start with the Spine component. Pick the variant of the page you came from; on phone pick its phone variant.
05 · THE RUNTIMELINE COMPONENT
RunTimeline is the template’s only code component. It draws a run as steps on one time axis and replays it in slow motion. It appears in three places: the first screen of the home page, Response time in the Numbers section, and every changelog entry, where it reads the entry’s Timeline field. Select an instance and edit it in the right panel; the settings are listed below.
06 · CONTACT FORM
The form on the Contact page has no destination yet. Select the form and, in the right panel, set where submissions go: your email address or a webhook. Until then, test submissions go nowhere.
07 · IMAGES AND FONTS
The demo pictures are AI-generated sample images made for this template; the company, people and product in them are invented. Replace them with your own before you publish. Type is Sofia Sans Condensed and Martian Mono, both from Framer’s font library under the SIL Open Font License 1.1.
08 · PAGE AXES
The ruled line at the top of Changelog, Blog, Careers, Company, Privacy and Terms is the Axis component. Each page picks its own variant: Changelog, Blog, Careers and Company on desktop and tablet, and “Changelog phone”, “Blog phone” and “Careers phone” on phones (on phones the Company timeline turns into a dated list); Privacy and Terms use Legal at every size. The Spot notch marks “now”. The dates, version numbers and the big figures (2.14 Latest, 05 Notes, 04 Open roles, 2023 Founded) are typed by hand, not read from the CMS: when you add a changelog entry, a post or a job, update the labels in that page’s Axis variant and its phone variant, then the big figure at the top of the page.
RunTimeline settings
Steps
Plain text: a name, then start-end, steps split by “/”. Example: “Receive 0-120 / Plan 120-190 / Call tools 190-310 / Respond 310-340”.
Axis end
Where the axis stops. 0 ends it at the last step.
Unit
Shown after every number; “ms” by default.
Slow motion
How many times slower the replay runs, from 1× to 20×.
Intro
Slow, Real then slow or Static. Real then slow plays the run at real speed, prints the total, then replays it slowly; Static shows the finished chart, and the Replay buttons still work.
Readout
Clock shows a small running timer above the bars; Big prints the run’s total as one large number.
Readout size
Size of the big total in px; shown only when Readout is Big. On phones it scales down to fit.
Axis
Shows or hides the number ruler under the bars.
Replay
Shows or hides the two replay buttons.
Side inset
Space inside the component on the left and right. Keep it at 0 when the frame around it already has the page margin.
Label column
Width of the column with the step names.
Label gap
Space between the step names and the bars.
Colours
Ink, Track, Accent and Background. Link them to the colour styles so they follow the site.
Alt text
One sentence screen readers read in place of the chart.
VERSION AND SUPPORT
This is Split Time 1.0.0. Support: support@alderthemes.com. Support covers setting up the template and fixing its faults; custom design and development are not included.