Nitramui NPM | npm.io

NitramUI

GitHub

Don’t worry about design, HTML, and CSS. Just use NitramUI’s components, play around with options, select a built–in theme (or let the user select it), and focus on the rest.

If you want to customize your project’s look and feel, this is not for you. This is for you if you want a design system which is lightweight, easy to use, and user–oriented.

Head over to the Demo.

Light and Dark Modes

Screenshot

Design principles

Convention over customization.
Complete abstraction from HTML/CSS, which means you can’t set custom classes or style attributes to the elements. Instead, components have their own size–variant properties. For example, Panes have a size property with options like: default, small, full, square, …

Getting started

Add fonts and root style

Add these lines in the head of your index.html:

<link href="https://fonts.googleapis.com/css2?family=Inconsolata&family=Inter:wght@200;400;600&display=swap" rel="stylesheet">
<style>#root { height: 100%; }</style>

This is due to an issue with @import and createGlobalStyle. Read more: Note regarding css @import and createGlobalStyle.

NitramUI options

customThemes
availableThemes

NitramUIContext

mode: (string) current mode name. Default: light.
setMode: (function) sets mode.
theme: (string) current theme name. Defaults to the first theme in the availableThemes NitramUI prop, or to smooth if availableThemes is not set.
setTheme: (function) sets theme.
themes: (object) available themes, built-in and custom. Default:
```
{
  "smooth": "smooth",
  "hiContrast": "hiContrast"
}
```
ds: (object) design system definition. Each attributed has to be accesed using getDSVal. See: designSystem
getDSVal: (function) useful to get mode and theme aware values from the design system. Example: getDSVal(ds.colors.bg)

Change theme and mode

import { modes, NitramUI, NitramUIContext } from 'nitramui'

export const App = () => {
  return (
    <NitramUI>
      <NitramUIContext.Consumer>
        {({ mode, setMode }) => (
          <Layout
            menuB={(
              <Control
                type='select'
                value={mode}
                onChange={setMode}
                options={Object.entries(modes).map(([_key, value]) => ({ label: value, value }))}
              />
            )}
          >
            <p>FG color: {getDSVal(ds.colors.fg)}</p>
          </Layout>
        )}
      </NitramUIContext.Consumer>
    </NitramUI>
  )
}

Get design system attributees (theme and mode aware)

import { NitramUI, NitramUIContext } from 'nitramui'

export const App = () => {
  return (
    <NitramUI>
      <NitramUIContext.Consumer>
        {({ ds, getDSVal }) => (
          <Layout>
            <p>FG color: {getDSVal(ds.colors.fg)}</p>
          </Layout>
        )}
      </NitramUIContext.Consumer>
    </NitramUI>
  )
}

Note: NitramUIContext has to be consumed within NitramUI scope.

Roadmap

Use Storybook
Test reset using createGlobalStyle
Add Inter, Inconsolata
Headings font
top and bottom fixed bars
Add eslint
Add themes (smooth, dark, high-contrast, …)
Add box shadow to design system
Export GlobalStyle and ThemeProvider (do not export reset)
Make smooth default theme when there is no ThemeProvider (test in Layout/Full story)
Build NitramUI into a library
Add a screenshot
Add license
Add Pane size: half
Fix labelStyles (or just vertical padding) for inputs and selects
Create form control component (for inputs and selects with or without labels)
Make onChange optional on controls
Export design system variables aware of theme and mode
Add instructions for NitramUIContext.Consumer, and controlling modes and themes
Add button variants (secondary, text, …)
Fix too many scrollbars on Windows
Prevent control labels from being selected (reproduce with double click on them)
Pass ref to controls
Have the outter pane have the scroll. E.g: default pane inside full-width pane (<Pane height='auto'> inside a Layout or Container with scroll='vertical')
Center panes horizontally
Add git hook for build and build storybook
Add button link (https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md)
Add instructions for customThemes and availableThemes props
Add hook for auto dark mode
Add packagequality.com badge
Create React App template
Responsive layout (what to do with the sidebar pane?)
Check for updates
Add terser (https://www.npmjs.com/package/rollup-plugin-terser)
Move some dependencies to devDependencies/peerDependencies (does this prevent them to be installed when installed this package, for example popper.js which I think comes from storybook)
Add guidelines for contributors
Add build badge
Add tests
Add tests coverage badge
Is having funding/sponsors/buy-me-a-beer/bitcoin-wallet a good idea?
Create custom font with Glyphsapp Mini