Build responsive grids, readable pages, and application shells. Layout Style CSS handles structure and spacing independently of your visual theme.
Version 3.2.3
Installation and imports
npm install layout-style-css@3.2.3
import "layout-style-css";
Essential API
.ly-wrapper
Constrain page width and add responsive gutters. Choose prose for reading or workspace for application screens.
.ly-grid · .ly-stack
Arrange content in a responsive grid or vertical stack. Items reflow according to their size and the available space.
.ly-sidebar
Pair regions using data-ly-sidebar="side" and data-ly-sidebar="content". The regions wrap when space runs out.
data-ly-recipe · data-ly-area
Choose a shell such as docs or app-shell, then assign named header, nav, main, aside, and footer areas.
data-ly-density
Set compact, normal, or spacious on a container to adjust spacing within that region.
data-ly-layout
Select a layout personality on .ly-root. Structure stays independent of component colors and interaction states.
Examples
A responsive project grid
Cards share the available width and wrap as space changes. UI classes style the cards; ly-grid arranges them.
<div class="ly-grid ly-gap-4" style="--ly-grid-min: 12rem">
<article class="usk-card ly-stack ly-gap-3 ly-pad-4">
<span class="usk-badge">In review</span>
<h4>Customer portal</h4>
<p>A welcoming home for project updates and shared files.</p>
<small>Design team · 3 tasks remaining</small>
</article>
<article class="usk-card ly-stack ly-gap-3 ly-pad-4">
<span class="usk-badge" data-ui-variant="success">Ready</span>
<h4>Team directory</h4>
<p>Help everyone find the right person for their next idea.</p>
<small>People team · Ready for handoff</small>
</article>
</div>
A workspace with context
Named side and content regions share a row when space permits, then reflow for smaller screens.
Style components and native HTML with a consistent theme. Presets define typography, colors, and surface treatments; palettes and display modes let you adjust them.
Version 2.7.1
Installation and imports
npm install ui-style-kit-css@2.7.1
import "ui-style-kit-css/visual.css";
Essential API
data-ui
Choose a preset such as minimal-saas on the containing element. Semantic usk-* classes work across presets.
data-theme · data-mode
Use a shared theme with light, dark, or contrast mode. Omit data-theme to use the preset’s native palette.
.usk-card · .usk-badge
Build surfaces and status labels with semantic component classes; keep layout composition in Layout Style CSS.
.usk-field · .usk-input
Pair visible labels and helper text with native controls. The library styles them; your app owns values and validation.
.usk-alert
Compose an alert title and body, then select its visual variant with data-ui-variant.
Native HTML
Headings, lists, tables, and form elements inherit the active visual scope. Keep their native semantics and accessible labels.
Examples
One visual language, different roles
A card, native field, badge, and alert share a fixed theme. Edit the sample field to try its native behavior.
<div data-ui="minimal-saas" data-theme="midnight-gold" data-mode="dark" class="ly-stack ly-gap-4">
<article class="usk-card ly-stack ly-gap-4 ly-pad-6">
<span class="usk-badge" data-ui-variant="success">Ready for review</span>
<h4>Customer portal</h4>
<p>Keep your projects, people, and progress together.</p>
<label class="usk-field">
<span class="usk-label">Workspace name</span>
<input class="usk-input" value="Northstar Studio" aria-describedby="guide-workspace-help">
<span class="usk-help-text" id="guide-workspace-help">Visible to your project team.</span>
</label>
</article>
<aside class="usk-alert" data-ui-variant="success">
<strong class="usk-alert-title">All set for Thursday</strong>
<p class="usk-alert-body">The team can review the latest design updates.</p>
</aside>
</div>
Interactive Surface CSS
Make controls respond consistently to mouse, keyboard, and persistent application state, while keeping their native behavior.
Motion Style CSS is the newest addition to STE's web development system. Use ten paired entrance/exit presets and coordinated movement while leaving layout, paint, and control feedback with their existing owners.
Bring the foundational CSS libraries together through accessible React components and opt into lifecycle motion through the separate /motion entry. Use typed props, events, and local state while the CSS libraries handle structure, appearance, and interaction styling.
STE USK React supplies the guide tabs and Lab configuration button used on this website. It sits alongside the private STE-Core application foundation and STE-SDK developer tools. The CSS libraries retain ownership of structure, appearance, and interaction styling.
Examples
"use client";
import { useState } from "react";
import {
Alert,
Button,
Card,
Form,
InterfaceRoot,
Layout,
} from "@sanderson-technology-enterprises/ste-usk-react";
/**
* Composes the three CSS libraries through React APIs with preview-only state.
* Import ste-usk-react/styles.css once at your application entry point.
* This module is also displayed verbatim as the guide's copyable JSX example.
*/
export function ReactProjectExample() {
const [name, setName] = useState("Customer portal");
const [savedName, setSavedName] = useState("");
return (
<InterfaceRoot preset="minimal-saas" theme="midnight-gold" mode="dark">
<Layout.Stack gap={4}>
<Card>
<Card.Header>
<h4>Project settings</h4>
<p>A shared home for your team’s latest work.</p>
</Card.Header>
<Card.Body>
<Form
onSubmit={(event) => {
event.preventDefault();
if (name.trim()) setSavedName(name.trim());
}}
>
<Layout.Stack gap={4}>
<Form.Input
label="Project name"
name="projectName"
value={name}
required
onChange={(event) => {
setName(event.target.value);
setSavedName("");
}}
helpText="Changes stay in this preview."
/>
<Button type="submit" disabled={!name.trim()}>
Save preview
</Button>
</Layout.Stack>
</Form>
</Card.Body>
</Card>
{savedName ? (
<Alert variant="success" role="status" title="Preview updated">
Saved “{savedName}” in this preview. No data was sent.
</Alert>
) : null}
</Layout.Stack>
</InterfaceRoot>
);
}