Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

@aaronschubert0/blocks

0.0.1 • Public • Published

Blocks

Platform differences

lineHeight

type PixelLineHeight = string;
type RelativeLineHeight = number;
/* Web */
type LineHeight = RelativeLineHeight | PixelLineHeight;
/* iOS & Android */
type LineHeight = PixelLineHeight;
type LineHeight = PixelLineHeight;

borderStyle

/**
 * Web
 *
 * @required for border to appear
 *
 * @default "none"
 */
type BorderStyle = 
  | "none"
  | "hidden"
  | "dotted"
  | "dashed"
  | "solid"
  | "double"
  | "groove"
  | "ridge";
 
/**
 * iOS & Android
 *
 * @optional
 *
 * @default "solid"
 */
type BorderStyle = "solid" | "dotted" | "dashed";
/**
 * blocks
 *
 * @optional
 *
 * @default "solid"
 */
type BorderStyle = "solid" | "dotted" | "dashed";

boxSizing

/**
 * Web
 *
 * @optional
 *
 * @default "content-box"
 */
type BoxSizing = "content-box" | "border-box";
 
/**
 * iOS & Android
 *
 * @default "border-box"
 */
type BoxSizing = "border-box";
/**
 * blocks
 *
 * @default "border-box"
 */
type BoxSizing = "border-box";

shadow

/**
 * Web
 *
 * @optional
 *
 * @default "none"
 */
interface Shadow {
  inset?: boolean;
  offsetX: PixelValue;
  offsetY: PixelValue;
  blurRadius: PixelValue;
  spreadRadius: PixelValue;
  color: Color;
}
 
/**
 * iOS
 *
 * @optional
 *
 * @default undefined
 */
 
interface ShadowOffset {
  width: number; // x
  height: number; // y
}
 
interface Shadow {
  shadowColor: Color;
  shadowOffset: ShadowOffset;
  shadowOpacity: number;
  shadowRadius: number;
}
 
/**
 * Android
 *
 * @optional
 *
 * @default undefined
 */
 
interface Shadow {
  elevation: number;
}
/**
 * blocks
 *
 * @optional
 *
 * @default undefined
 */
interface Shadow {
  color: Color;
  offset: {
    x: number;
    y: number;
  };
  opacity: number;
  radius: number;
}

fontFamily

/**
 * Web, iOS, Android & blocks
 *
 * @optional
 *
 * @default OS/Device Specific
 *
 * String specified is unique per platform hence it's inclusion.
 */
type FontFamily = string;

CSS Values

display

/**
 * Web
 *
 * @optional
 *
 * @default element specific
 */
 
type Display = "block" | "grid" | "flex" | "inline" | "table" ...
 
/**
 * iOS & Android
 *
 * @optional
 *
 * @default "flex"
 */
 
type Display = "flex"
/**
 * blocks
 *
 * @optional
 *
 * @default "flex"
 */
 
type Display = "flex";

Rendering Text

On Web you're able to render text anywhere in the DOM, on iOS & Android you can only render text inside a <Text /> component. Blocks adheres to this convention, meaning that any text must be wrapped in a <Text /> component.

Outline / Border

Border is supported on Web, iOS and Android. Outline is only supported on Web. Therefore blocks only supports border at this present time.

Install

npm i @aaronschubert0/blocks

DownloadsWeekly Downloads

1

Version

0.0.1

License

MIT

Unpacked Size

4.53 kB

Total Files

4

Last publish

Collaborators

  • avatar