@booleon/base v1.0.0-alpha.0

Booleon is a DX focused React library for, a highly typed declarative, styling, using component boolean properties. Works by mapping a pre-defined entry of css with keys that can be static (string) or dynamic (RegEx).

• Get Started
• Complex Usage
• Inspirations
• Motivations

Get Started

Instalation

npm i @booleon/base

yarn add @booleon/base

Basic Usage

it'll match the hexadecimal color and apply to a css string.

import React from 'react';
import { View, Text } from '@booleon/base';

export const MyComponent = () => {
  return (
    <View.div bg_000>
      <Text.span fc_fff>
        My Text
      </Text.span>
    </View.div>
  )
}

Conditional styling

Only applies css if a condition is satisfied.

import React from 'react';
import { View, Text } from '@booleon/base';

export const MyComponent = ({ color, backgroundColor }) => {
  return (
    <View.div bg_000={backgroundColor === 'black'}>
      <Text.span fc_fff={color === 'white'}>
        My Text
      </Text.span>
    </View.div>
  )
}

Responsiveness

Add styles to media queries.

import React from 'react';
import { View, Text } from '@booleon/base';

export const MyComponent = () => {
  return (
    <View.div md__bg_000>
      <Text.span sm__fc_fff>
        My Text
      </Text.span>
    </View.div>
  )
}

Pseudo Elements

Applies, possible nested, pseudo elements.

import React from 'react';
import { View, Text } from '@booleon/base';

export const MyComponent = () => {
  return (
    <View.div hover__bg_000>
      <Text.span active__fc_fff>
        My Text
      </Text.span>
    </View.div>
  )
}

Complex Usage

import React, { FC } from 'react';

import { Text, View } from '@booleon/base';

export const Checkbox: FC<any> = ({ id, children, ...props }) => {
  return (
    <View.div
      flex // display: flex;
      cross_center // align-items: center;
      fc_555 // color: #555;
    >
      <View.input
        {...props}
        id={id}
        type="checkbox"
        noappearance // appearance: none;
        ol_none // outline: none;
        cr_pointer // cursor: pointer;
        w_200 // width: 2rem;
        h_200 // height: 2rem;
        relative // position: relative;
        flex // display: flex;
        b_edge // border-radius:.5rem;
        cross_center // align-items: center;
        main_center // justify-content: center;
        fs_20 // font-size: 2rem;
        fc_fff // color: #fff;
        bw_1 // border-width: 0.01rem;
        bc_555 // border-color: #555;
        bs_solid // border-style: solid;
        bg_d5d5d5 // background-color: #d5d5d5;
        checked__bg_00f // :checked { background-color: #00f; }
        focus__bc_00f // :focus { border-color: #00f; }
        checked__before__content='"✔"' // :checked:before { content: "✔" }
        before__absolute // :before { position: absolute; }
        focus__sibling__fc_00f // :focus + * { color: #00f; }
      />
      {children ? (
        <Text.label
          htmlFor={id}
          fsl_none // user-select: none;
          cr_pointer // cursor: pointer;
          fs_12 // font-size: 1.2rem;
          ff_sans // font-family: sans-serif;
        >
          {children}
        </Text.label>
      ) : null}
    </View.div>
  );
};