Nanotechnology Promises Much

    @theoryofnekomata/viewfinder
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.4 • Public • Published

    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.

    Install

    npm i @theoryofnekomata/viewfinder

    DownloadsWeekly Downloads

    1

    Version

    0.2.4

    License

    MIT

    Unpacked Size

    206 kB

    Total Files

    19

    Last publish

    Collaborators

    • theoryofnekomata