@i34/show

An opinionated React layout component designed with "slots" for Apps and Blogs with built in semantic layout, responsiveness for mobile, tablet and desktop platforms and research-based UX best practices.

Storybook examples

Usage

This layout component has the following "slots" you can use to design pages:

• page - replaces everything in the view (no other slot elements)
• header - typical area at the top of the page, moves over in tablet mode
• nav - displays at the top horizontally for desktop, left vertically for tablet, and bottom horizontally for mobile
• main - body content
  • section - displays at the top or left of article
  • aside - left panel, next to article
  • details - right panel, next to article
• footer - below main

All slots are not rendered unless content is set. Like: <Show header={<h1>Show</h1>}></Show>

Styling concepts

Mix and match any of the following methods:

CSS modules are used for styling All "functional" layout css is isolated using css-modules to avoid conflict with any existing CSS. Nice for embedding into apps or whatever.

But you can use inline styles kinda like styled components You can add inline styles (anything that would work in the react 'style' prop) for each slot in the form of: <Show headerStyle={{background: "black", color: "white"}} header={<h1>Show</h1>}></Show> All slot style props are available in the {slot}Style format like navStyle or mainStyle

Or Insert your own CSS classnames for any slot kinda like global CSS or use classes from existing CSS You can also add classes you write or that exist already in an app in a similar way to styles. All slot CSS class props are available in the {slot}Class format like navClass or mainClass For example:

<Show headerClass={'my-special-css-class'} header={<strong>Header with local style</strong>}></Show>

Semantic html elements

if you want to use global css, the following elements can be styled (or inherit existing styles)

header, nav, section, article, aside, details, footer, main

Targetable id's

If you want to target any of the layout elements, id's are assigned to the semantic elements above in the format of:

ux-show-{element}

So as an example you can do #ux-show-header { background: black; } in your css These id's can also be used to add your own styles or override any CSS from higher up the chain if required.

CSS variables

These css variables set the base size proportions.

--layout-base-size - sets the width/height of the nav (min-height of 48px is default but will grow to content) --layout-panel-size - sets the min width of the section and aside slots (240px is default but will grow to content)

React

const show = require('@i34/show');

Simply create your views using the dynamic slots provided:

<Show header="Header" nav="Nav" aside="Aside" details="Details" article="Article" footer="Footer"></Show>

Roadmap

• Allow for local styling directly in react

Versions

0.0.2

• Ability to add custom CSS inline styles
• Ability to inject custom CSS classes

0.0.1

• First release with base responsive layout frame with "slots"