Макет

Чтобы показать продукт на посадочной странице или скриншот в документации. Рамка — это декорация: точки, адресная строка и вырез помечены aria-hidden, поэтому скринридер получает содержимое, а не описание обвязки.

Браузер

sitelo.dev

Привет, мир

Отрендерено на сборке, отдаётся статическим файлом.

mockup({ variant: 'browser', url: 'sitelo.dev' },
  div({ style: 'padding: 1.5rem; background: var(--su-surface-2)' },
    stack({ gap: 'sm' },
      text({ variant: 'h5', as: 'div' }, 'Привет, мир'),
      text({ variant: 'small', tone: 'muted' }, 'Отрендерено на сборке, отдаётся статическим файлом.'),
    ),
  ),
)

Окно

Та же рамка без адресной строки — для всего, что не является веб-страницей.

Окно без URL.

mockup({ variant: 'window' },
  div({ style: 'padding: 1.5rem' },
    text({ variant: 'small' }, 'Окно без URL.'),
  ),
)

Светофорные кнопки

По умолчанию кнопки следуют теме. dots: 'mac' красит их в красный, жёлтый и зелёный macOS — одни и те же в обеих темах, ведь весь их смысл в узнаваемости.

sitelo.dev

Окно, которое вы уже где-то видели.

mockup({ variant: 'browser', url: 'sitelo.dev', dots: 'mac' },
  div({ style: 'padding: 1.5rem' },
    text({ variant: 'small' }, 'Окно, которое вы уже где-то видели.'),
  ),
)

Терминал

Вариант code тёмный в обеих темах — как и положено терминалу.

$ npm install -D sitelo

$ npx sitelo build

✓ собрано за 1,09 с

204 страницы · 9,7 МБ

mockup({ variant: 'code' },
  '<div>$ npm install -D sitelo</div>' +
  '<div>$ npx sitelo build</div>' +
  '<div style="opacity: .7">✓ собрано за 1,09 с</div>' +
  '<div style="opacity: .7">  204 страницы · 9,7 МБ</div>',
)

Телефон

Современный аппарат: «динамический остров», парящий в стороне от рамки, а не вырез, прорезанный в ней. Оставьте ему место в верхней части экрана.

sitelo

Статические сайты без фреймворка.

mockup({ variant: 'phone' },
  div({ style: 'padding: 3rem 1rem 1rem' },
    stack({ gap: 'md' },
      text({ variant: 'h6', as: 'div' }, 'sitelo'),
      text({ variant: 'caption', tone: 'muted' }, 'Статические сайты без фреймворка.'),
      button({ size: 'sm', block: true }, 'Начать'),
    ),
  ),
)

Рамка и остров

frame подкрашивает внешний бортик — любой CSS-цвет, поэтому отделка корпуса задаётся hex-кодом, а не именем, список которых пришлось бы вести этой библиотеке. notch: false убирает остров для всего, у чего его нет.

stack({ direction: 'row', gap: 'md', wrap: true },
  mockup({ variant: 'phone', size: 'sm', frame: '#a8674a' }, ''),
  mockup({ variant: 'phone', size: 'sm', frame: '#2c3644' }, ''),
  mockup({ variant: 'phone', size: 'sm', frame: '#c9ced4', notch: false }, ''),
)

Со скриншотом

<img> внутри тела заполняет ширину рамки. Сочетайте его с aspectRatio(), если картинка грузится поздно, а странице прыгать нельзя.

sitelo.dev/ui

mockup({ variant: 'browser', url: 'sitelo.dev/ui' },
  aspectRatio({ ratio: '16 / 9', style: 'background: var(--su-surface-2)' },
    '<img src="/logo.svg" alt="Галерея sitelo UI" style="object-fit: contain; padding: 3rem">',
  ),
)

Размеры

По умолчанию макет заполняет свой контейнер. size вместо этого закрепляет его на фиксированной ширине. У телефона свои три — 22rem телефона были бы уже планшетом, — и на всех он сохраняет пропорции: скругления, бортик и остров заданы долями ширины, а не фиксированными длинами.

size: sm

по умолчанию — во всю ширину

stack({ gap: 'md', align: 'flex-start' },
  mockup({ variant: 'window', size: 'sm' }, div({ style: 'padding: 1rem' }, text({ variant: 'small' }, 'size: sm'))),
  mockup({ variant: 'window' }, div({ style: 'padding: 1rem' }, text({ variant: 'small' }, 'по умолчанию — во всю ширину'))),
)

В hero-блоке

Ради этой пары всё и затевалось: передайте макет в media hero-блока.

Посмотрите в деле

К моменту прихода в браузер это уже статический HTML.

example.com

Страница в рамке.

hero({
  level: 2,
  align: 'start',
  title: 'Посмотрите в деле',
  description: 'К моменту прихода в браузер это уже статический HTML.',
  media: mockup({ variant: 'browser', url: 'example.com' },
    div({ style: 'padding: 1.25rem; background: var(--su-surface-2)' },
      text({ variant: 'small' }, 'Страница в рамке.'),
    ),
  ),
}, button('Начать'))

Пропсы

Проп	Тип	По умолчанию	Описание
`variant`	`'browser' \| 'window' \| 'phone' \| 'code'`	`'browser'`	Какую рамку рисовать.
`url`	`string`	—	Показывается в адресной строке. Только для варианта browser.
`dots`	`'mono' \| 'mac'`	`'mono'`	Как выглядят три кнопки.
`frame`	`string`	—	Подкрашивает внешний бортик. Любой CSS-цвет. Только для phone.
`notch`	`boolean`	`true`	Рисовать «динамический остров». Только для phone.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Фиксированная ширина. Средний заполняет контейнер.