Composition and grids

The SkiMobile shell fills all available width with no fixed maximum. Page gutters use clamp(1rem, 3.125vw, 2.5rem) plus physical-edge safe areas. Photography, catalogues, panels and grids use screen space; prose is limited to 68ch for reading.

Mandatory for every public page: heroes, main sections, catalogues, vacancy lists and overall form compositions fill the shared page-container / site-shell width. Do not add a nested centred wrapper capped at 1200, 1280, 1360, 1440px or another fixed maximum. Limit the line length of individual paragraphs, not the page width. Exceptions require an explicit request from the owner.

Columns are 4 below a 32rem container width, 8 from 32rem and 12 from 64rem. At standard text these are 512 and 1024 px. Split compositions start at 42rem. These are content-space thresholds, not device labels. The brand book retains left navigation from 1024 px and a dialog below that width.

The rhythm unit is 0.25rem. The scale is 4, 8, 12, 16, 24, 32, 48, 64 and 96 px at 100% text. Related groups use smaller values; independent sections receive larger separation. Use semantic page-gutter, layout-gap, layout-panel-padding and layout-section-space roles instead of arbitrary numbers.

Comfortable is the default density. Compact suits operational lists; spacious suits presentation blocks. Density changes gaps and padding while preserving text size, focus and action targets of at least 44 × 44 px. Guest text enlargement takes priority over fitting more data.

The first message is brief and concrete: what the guest gets. Conditions and one primary action follow. Align to the start of the line; a shared axis connects heading, copy and action. Accent marks priority and neutral surfaces support content. Red retains its critical role; the logo uses its own palette.

Six compositions: 7:5 hero, auto-fit catalogue, 8:4 article, 8:4 booking, 5:7 service and auto-fit account. Ratios apply when space permits. In narrow containers, blocks follow semantic order without order or grid-auto-flow: dense reordering.

The page manages its shell and navigation. Components receive layout-context with container-type: inline-size; internal columns respond to available space through @container. Cards use auto-fit and minmax(min(100%, 16rem), 1fr). This intrinsic grid remains the foundation inside narrow panels.

minmax(0, 1fr), min-inline-size: 0 and wrapping long values prevent overflow. Images reserve aspect-ratio or width/height before loading. Subgrid aligns card heading, description and final rows; auto / 1fr / auto is the fallback. Text is not given a fixed height.

Capabilities, not browser names, determine support. Normal flow works first; @supports enables enhancements. Rem, logical axes and semantic tokens keep the system independent of window size and a particular component library. The library’s browser matrix checks syntax availability in the current browser.

Container units strengthen local adaptation. svh suits stable hero height; dvh suits panels following the visible area, with vh fallback. Anchor positioning, View Transitions and scroll-driven animation are optional enhancements after keyboard, focus and reduced-motion checks. Navigation and content remain available without any effect.

Visual order agrees with DOM and keyboard order. Body text stays complete at 200% enlargement and altered spacing. Errors, loading, empty results and offline states have space beside the relevant action. Long text wraps; truncation never hides prices, conditions or important warnings.

Sticky blocks do not cover focus or headings. With insufficient height, content scrolls in normal flow. Fixed mobile panels reserve space and safe-area-inset-bottom; the software keyboard does not cover required fields. Scrolling stays native. Container resizing does not animate the entire page.

Images below the initial viewport load as needed with dimensions reserved. Heavy effects and JavaScript measurement do not determine layout. content-visibility is allowed for long independent lists after find-in-page, anchor and focus checks. Brand book measurement reports specimen dimensions while CSS controls reflow.

Web grids use rem and available width; print uses physical dimensions and mm margins. A4 is 210 × 297 mm, A5 is 148 × 210 mm and business cards are 90 × 50 mm. Agree bleed and production margins with the printer: start at 3 mm bleed and safe margins from 5 mm. The 320/768/1440 vector grids are digital references, not print formats.

Every application preserves the message, conditions, contact and logo clear space. Replace screen buttons with a clear contact or labelled QR. Print removes interface controls, preserves all text and avoids split cards. Get colour profiles and font files from Colors and Typography.

1. Check 320, 390, 768, 1280, 1920 px and wide screens. The shell fills screen width, with no horizontal overflow or transform-scaled guides and text.
2. Check RU/EN, both themes, text enlarged to 200%, long words and altered spacing. Primary action and conditions remain visible; touch targets start at 44 px.
3. Use the keyboard and check focus, reading order, reduced motion, saved-page offline access and a real download. Then check Chromium, Firefox and WebKit; review physical or printed samples before production.

Layout 1.0 includes shared CSS, a JSON registry, six standalone RU/EN HTML compositions, 4/8/12 SVG grids and instructions. Every file lists version, size and SHA-256. JSON uses the custom skimobile-layout-1 schema; the complete kit includes the source registry and reproducible generator.

Changes start in shared/layout, followed by regenerated exports and documentation. New patterns receive a name, semantic order, narrow state, expansion threshold and long-content checks. Thresholds are not changed for a single mock-up; new browser capabilities ship with independent base behaviour and verification.

Applications 1.0 extends the grid to documents, social cards and wayfinding. Print masters use trim size with at least 5 mm safe area; usual 3 mm bleed is confirmed with the printer. Digital profiles do not define physical print dimensions.

Composition retains useful copy and terms even without photography. Before inserting an image, check crops, contrast and that text does not hide the main subject. Do not stretch a layout disproportionately to fit a new format.