Menu
541-602-0978

Lab

What can a Steelbridge interface include?

These are working patterns for custom websites and web applications: the controls, panels, and layout techniques a business site actually uses. Each one is a demo, not a client result. Motion follows the system setting for reduced motion.

Start a project

Sliders

A visitor should be able to move through a set of offers, compare two states, or set a number without a new page.

Before and after

A comparison slider lets someone drag between two versions of a layout. Shops use it for a renovation, a product, or a homepage rewrite. Drag the handle, click anywhere on the picture, or use the arrow keys when the control is focused.

After

Steelbridge

A clear offer, and a way to call.

One proof point you actually have. Then the number.

541-602-0978
Before

HomeAboutAbout usGalleryClick here

Welcome to our website

We have served this town for years, and this paragraph is the history, the parking notes, and the mission, all before a visitor can tell what to do next. The links above look the same. The phone number is not on this screen.

Please scroll to keep reading. The next paragraph says the same thing in different words so the page looks full.

The range sits on the picture, so a drag, a click, and the arrow keys move one clip. JavaScript writes that value to a CSS variable and keeps the pointer for the whole drag, including past the edges. The divider uses the same variable, so it stays on the clip when the page is resized. The handle stays inside the picture at 0% and 100%, so it can be dragged back. A vertical swipe still scrolls the page.

View code

Price range

A budget control on a quote form, so the first conversation starts closer to the real scope. The amounts here are positions on a sample control. They are not Steelbridge prices.

$8,000

$2,000$20,000
View code

Collapsing containers

Long pages get easier to scan when the detail is one click away and the summary stays visible.

Accordion

Native disclosure widgets for FAQs, service details, and shipping rules. They work without a script, and the headings stay in the page outline.

What is included in a build?

Structure, templates, and a handover that says where the content lives. The exact list is the written scope, not a package on this page.

Can an existing site be repaired?

Often, yes. Rescue is the right first question when the site already has pages people use. A rebuild is the recommendation when it cannot carry the next version.

Where does hosting sit?

Hosting, the website builder, and migrations are ParsonsHosting. Steelbridge builds the site or the application.

The name attribute keeps one item open where the browser supports exclusive accordions. Elsewhere, several can stay open.

View code

Animated height

The same disclosure, with the panel height easing open where the browser can interpolate it. Helpful when a sudden jump makes a long FAQ feel brittle. Reduced motion gets the instant native open.

Delivery notes

Say how the work arrives: a staging link first, then the production upload. The timing belongs in the scope for that project.

Editing after launch

The person who updates the site needs a clear place to do it. That might be a familiar editor, or a smaller set of fields for a managed page.

Height animation uses ::details-content and interpolate-size. Browsers without them still open and close the panel.

View code

Expandable cards

A grid of summaries that open in place. Useful for a services overview, a team list, or a set of locations when each one needs a paragraph but not its own scroll.

Sisters

The studio is here. A meeting in town is a normal way to start, and so is a call.

Bend

Projects for Bend businesses are built from Sisters. There is no second office.

Redmond, Oregon

Written out in full so it is not confused with Redmond, Washington.

View code

Read more

A clamped paragraph for a bio, a product description, or a case note that should preview before it expands. The full text is available immediately if JavaScript does not run.

A business page earns the click when the first lines answer the question and the rest is there for someone who wants it. Truncation is a reading aid, not a place to hide the price, the phone number, or the thing you need a person to agree to. Use it for a longer story: how a process works, what a service does and does not include, or a note that would push the next heading off a phone screen. The control is a button, so it is in the tab order and it says whether the text is open.

View code

Flyouts

Panels that open over the page: filters, menus, help, search, notices, and a focused dialog. Escape closes the modal ones and returns focus to the button that opened them.

Off-canvas drawer

Filters, account links, or a mobile menu can slide in from the edge instead of sending the visitor to another page. Check a category and the sample list beside the button updates.

  • Marketing site with a service area
  • Catalog with accounts
  • Repair of a site that already ranks

Filter the sample list

Category

The drawer is a dialog. Without JavaScript the sample list still shows every row.

View code

Popover and tooltip

A short explanation next to a label, a delivery note, or a definition. The button is in the tab order, so the note is not hover-only.

Staging first, then the production upload. The date belongs in the scope for that project.
Delivery notes

Staging first, then the production upload. The date belongs in the scope for that project.

The Popover API hides the fallback disclosure. Anchor positioning, where supported, places the note under the button. Other browsers still open the note, usually centered on the page.

View code

Command palette

A keyboard search for sites with a lot of pages, or for an application with many actions. On this page it jumps to a demo. Press Ctrl+K or Command+K, or use the button.

Jump to a demo

The same destinations are in the command palette when JavaScript is available. Until then, use the section links at the top of the page.

Search the lab
View code

Toasts

A quiet confirmation after a copy, a save, or a filter change. It should not be the only place important information appears. This button shows a sample notice and does not send anything.

The notice appears when JavaScript is available.

View code

Modal dialog

A focused question, a short form, or a confirm step. The page behind it is inert until the dialog closes. This sample does not submit a message. The contact form does.

Read the dialog sample

A dialog asks for one decision and then gets out of the way. To talk about a project, use the contact form.

A dialog is for one decision. It should close when that decision is made. To talk about a project, use the contact form. This dialog does not send a message.

Go to contact
View code

Motion

Motion should explain a change, not decorate every scroll. These run when the browser allows motion and the feature exists. Otherwise the content just sits there, readable.

Scroll-driven reveal

Cards fade and rise as they enter the screen, one after another, so a process or a feature list does not arrive as a single block. Scroll this list and each step comes in on its own.

Listen

What the site has to do, and what already exists.

Scope

A written scope for that project, with its own timeline.

Build

The site or the software, then a handover.

Stage

A staging link comes first, so the pages can be read before they are the live site.

Handover

The person who updates the site gets a clear place to do it.

Keep

The next change has a page to land on, and the phone number stays easy to find.

Scroll down and a card fades in. Scroll back up and it fades out. Scroll down again and it plays again. Where scroll-driven animation exists, that follows the scroll position in both directions. Otherwise the visible state is added as a card enters and removed as it leaves. Reduced motion leaves every card in place.

View code

View transition

A grid that opens into a single detail without a full reload. Product catalogs and project indexes use this so the thing you clicked is still the thing on screen.

Catalog

Filters and a grid on the same page.

Schedule

A week view that opens into one day.

Project

A tile that becomes the case note.

Where document.startViewTransition exists, the tile morphs. Elsewhere the layout swaps immediately. The sentences stay visible either way.

View code

Magnetic button

A primary action can lean toward the pointer on a desktop, which makes a sparse hero feel responsive. Keyboard and touch users get an ordinary button. This one goes to the contact form.

Start a project

The pull only runs for a fine pointer when reduced motion is off. It uses the Web Animations API so it does not need inline styles.

View code

SVG line draw

A mark, a route, or a process line can draw as it enters the screen. It is a signature moment, and one is enough.

Scroll down and the line draws. Scroll up and it undraws. Scroll down again and it draws again. Where scroll-driven animation exists, that follows the scroll position in both directions, with no fill mode. Otherwise a class is added as the line enters and removed as it leaves. Reduced motion shows the finished line.

View code

Gradient field

A small canvas behind a hero or an empty state, drawn without WebGL. It pauses when the demo is off screen, and it paints a still frame when reduced motion is on.

View code

Text split and morph

A headline can arrive letter by letter, or swap one word for the next, when the words are real. The readable sentence is in the page for assistive technology. The split line is decorative.

Patterns you can try.

We build websites.

The word change is a button, so it does not depend on a timer. Letters rise as the line enters and settle back as it leaves. Scrolling back runs that again.

View code

Rendering

The same component has to read clearly on a phone and on a wide monitor, and a long page has to stay light.

Container query and device frame

This card follows the frame it sits in, not the window. Switch between phone and desktop. On a desktop you can also drag the frame’s corner. A sidebar, a card grid, or an embedded preview can reflow this way.

A card that follows its frame

Narrow, the text stacks under the block. Wide, they sit side by side.

Container queries are widely supported. The desktop switch uses :has(). The resize handle is plain CSS.

View code

Fluid type

Headlines scale with the window and stop at a minimum and a maximum, so a phone does not get a desktop-sized title and a monitor does not get a billboard.

Type that fits the window, then stops.

The size is measured when the page loads.

View code

Responsive image

Drag the grip, or use the slider. That changes the frame, and the browser downloads a width that fits it, from sizes and srcset. The format is chosen once, by what the browser supports: AVIF first, then WebP, with JPEG as the fallback. Dragging does not switch the format. The control below can leave a single format in the picture, so WebP or JPEG can be the one that loads. Under about 520 pixels the frame uses a tighter crop of the same photograph.

Smith Rock rising over the Crooked River in Central Oregon, with juniper and sage in the foreground.

Container width and the chosen file appear here.

Photo: Mick Haupt on Pexels

View code

Lazy list

A catalog of 1,000 rows. Scroll the box. A sentinel at the end of the loaded range asks for the next rows, which show up as skeletons and then fill in. Rows that leave the box are removed, so the document never holds the whole list. The counter is how many row elements are actually in the document. Rows mounted just outside the box use content-visibility: auto, which lets the browser skip painting them until they get close.

Eight sample rows are in the page until the list loads.

  • Home

    The offer and a way to call.

  • Services

    What the studio builds, each with its own page.

  • Work

    Named projects, with pictures that can wait.

  • Journal

    A note with an author and a date.

  • Locations

    Sisters, Bend, and Redmond, written as different places.

  • Contact

    A form, a phone number, and an email address.

  • FAQ

    The same answers a person and a crawler can read.

  • Lab

    This page: patterns, not case studies.

View code

Skeleton

While a card is loading, a placeholder holds the space so the page does not jump. Play it to see the pattern. Nothing is fetched from a server.

A finished card: a title, one sentence, and the next step.

View code

Windowed list

An application list with hundreds of rows should keep only a slice in the document. This demo windows 500 sample rows. The buttons and the range move the window. The rows are placeholders, not a catalog.

Eight sample rows are in the page until the windowed list loads.

  1. Sample row 1. A line in a catalog long enough to window.
  2. Sample row 2. A line in a catalog long enough to window.
  3. Sample row 3. A line in a catalog long enough to window.
  4. Sample row 4. A line in a catalog long enough to window.
  5. Sample row 5. A line in a catalog long enough to window.
  6. Sample row 6. A line in a catalog long enough to window.
  7. Sample row 7. A line in a catalog long enough to window.
  8. Sample row 8. A line in a catalog long enough to window.
View code

Sticky table

Schedules, comparisons, and rate cards need a header that stays put while the body scrolls. On a phone the table scrolls sideways, and the first column stays pinned so the row still has a name.

Sample pages in a small site, with what each one holds.
Page What it holds Notes
HomeThe offer and a way to callOne clear next step above the fold.
ServicesEach practice on its own URLSo a search for that service can land somewhere specific.
WorkProjects that can be namedPictures and a short account of the job.
LabInterface patternsDemos, not claims about past results.
ContactPhone, email, and a formThe form posts to the studio inbox.
JournalNotes with datesAuthor and updated date on each one.
View code

Theme

A light and dark pair for readers who want it, stored for the next visit to this page. The rest of the site stays on the paper palette. Contrast stays with the same copper and ink relationship, flipped.

View code

Reduced motion

If the system asks for less motion, transitions, the line draw, the scroll reveals, the magnetic pull, and the canvas animation stay still. A card like this can be a call to action: it comes in to reveal an offer. With reduced motion on, the offer is still there, without the movement. The dot travels the track as this demo moves through the screen, and it comes back when you scroll up.

A site that is hard to change

The work is a clearer structure and a handover, so the next edit is ordinary.

Start a project

Animation on this page is turned off when the browser asks for reduced motion.

View code

Use one of these on a real project

Tell us what the interface has to do. The scope says which of these patterns belong in it.

Contact Steelbridge