Layout scaffolding for Web apps.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
TheoryOfNekomata 0e4bb19a9b Bump version 1 year ago
example Add area customization 1 year ago
src Update BasicWide topbar 1 year ago
.editorconfig Initial commit 1 year ago
.gitignore Add examples 1 year ago
.npmignore Republish package, fix left sidebar layout 1 year ago
LICENSE Initial commit 1 year ago
README.md Update README 1 year ago
package.json Bump version 1 year ago
tsconfig.json Make styles dynamic 1 year ago
yarn.lock Initial commit 1 year ago

README.md

Viewfinder

Layout scaffolding for Web apps.

This library is made to avoid custom repetitive layout code.

Usage

Just import:

import * as React from 'react'
import { Basic, LeftSidebar, LeftSidebarWithMenu, RightSidebarStatic } from '@tesseract-design/viewfinder'

const Page: React.FC = ({
	avatar,
	fullName,
}) => (
	<Basic.Layout
		brand={
		  <a href="/">
				<img
					src="logo.svg"
					alt="ACME Inc."
				/>
		  </a>
		}
		topBarCenter={
			<form>
				<input
					type="search"
					name="q"
				/>
			</form>
		}
		userLink={
			<a href="/profile">
				<img
					src={avatar}
					alt={fullName}
				/>
			</a>
		}
	>
		<Basic.ContentContainer>
			Hello world!
		</Basic.ContentContainer>
	</Basic.Layout>
)

export default Page

Other examples can be found in the example directory in the repository. Please check them out for hints on styling and using the different available layouts.

The available props per layout are included as a TypeScript declarations file.

Configuration

There are CSS variables that can be declared in the parent of the *.Layout components (preferably :root) for customizing the metrics of the layout:

--height-topbar

Default value: 4rem

Height of the top bar widget.

--size-menu

Default value: 4rem

Width or height of the menu, depending on the orientation it is rendered.