page-frame

v1.0.5

v1.0.4

v1.0.3

v1.0.2

v1.0.1

v1.0.0

STATUS

Passing

DOWNLOADS

3,485

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

3 KB

UI Components

layout

1 contributor

Install page-frame as a package?

Copied

npm i @bit/bit.base-ui.layout.page-frame

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

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 '@bit/bit.base-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>