ui-block v0.1.6

UI-Block

Introduction

This library provides several css utilities.

<Block px={12} mt="6rem">
  <code>npm i ui-block</code>
</Block>

Performance

Provides predefined classes, and automatically treats them as inline-style if not.

CSS-in-JS

Overlapping CSSProvider allows you to implement an independent style within the scope.

import { Block, CSSProvider } from "ui-block";

<CSSProvider>
  <Block p={1}>The padding here is 0.25 rem.</Block>
  <CSSProvider config={{ getSize: (v) => `${v * 0.5}rem` }}>
    <Block p={1}>The padding here is 0.5rem.</Block>
  </CSSProvider>
</CSSProvider>;

If you do not want to use CSSProvider, use preset.css

import "ui-block/lib/preset.css";

API

Block

CSSProvider