0.1.6 • Published 3 years ago

ui-block v0.1.6

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

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

proptypedefaultdescription
mPredefinedSize | CSSSizeundefinedmargin
mxPredefinedSize | CSSSizeundefinedhorizontal margin
myPredefinedSize | CSSSizeundefinedvertical margin
mtPredefinedSize | CSSSizeundefinedmargin top
mrPredefinedSize | CSSSizeundefinedmargin right
mbPredefinedSize | CSSSizeundefinedmargin bottom
mlPredefinedSize | CSSSizeundefinedmargin left
pPredefinedSize | CSSSizeundefinedpadding
pxPredefinedSize | CSSSizeundefinedhorizontal padding
pyPredefinedSize | CSSSizeundefinedvertical padding
ptPredefinedSize | CSSSizeundefinedpadding top
prPredefinedSize | CSSSizeundefinedpadding right
pbPredefinedSize | CSSSizeundefinedpadding bottom
plPredefinedSize | CSSSizeundefinedpadding left
htmlReact.HTMLAttributes<HTMLDivElement>undefined

CSSProvider

proptypedefaultdescription
getSize(value: PredefinedSize) => CSSSize(v: number) => `${v \* 0.25}rem`predefined size getter
prefixstringrandom string valueclass prefix