Fit

Fit is a convenience utility element that allows you to fit site content to a reasonable size. By composing your site header, body, and foot within separate Fit's you're also able to easily spread them for design purposes.

Demo

Usage

<Fit />
should be used liberally in your main layout. Consider the following pattern:

 tsxlayout.tsx
import { Fit } from 'nitpick-ui';
import { Header } from './header';
import { Footer } from './footer';

export function Layout(props) {
    return (
        <>
            <Fit as="header">
                <Header />
            </Fit>
            {props.expandedContent ? (
                props.children
            ) : (
                <Fit as="main">
                    {props.children}
                </Fit>
            )}
            <Fit as="footer">
                <Footer />
            </Fit>
        </>
    );
}