JSPM

@watheia/app.ui.layout.page-frame

0.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • 0
  • Score
    100M100P100Q51504F
  • License EPL-2.0

Package Exports

  • @watheia/app.ui.layout.page-frame

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@watheia/app.ui.layout.page-frame) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Page frame

CSS components for readable columns.

centerColumn - main display width for most content, including images and text.

wideColumn - 'extra wide' display width, e.g. when putting large elements side by side.

textColumn - display width for readable areas. (headlines, paragraphs, etc)

Example

import { centerColumn, wideColumn, textColumn } from '@watheia/app.ui.layout.page-frame';

// ...

<div className={centerColumn}>
    normal content

    <div className={textColumn}>nice title</div>
    <div className={textColumn}>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Suspendisse et sodales diam, sed sodales tellus.
        Nam sodales interdum dolor, eget euismod purus.
    </div>
<div>

<div className={wideColumn}>
    Content breaking out of regular layout
    {/* ... */}
<div>