@techandtribal/combronents NPM

Combronents

Rapidly style your DOM elements inline, with full intellisense and type support

Features

No need to memorise longwinded lists of css shortcodes
Built in TypeScript so includes full typechecking and hints
Full CSS3 grid capabilities in a single key code

Install via NPM

  npm i @techandtribal/combronents

Example Usage

import { Div, H1 } from "combronents";

const GridWithTitle = () => (
    <Div
        bg_grey			// grey background
        h_full w_90pc	// full height, 90% width
        mt_3			// top margin of 3
		p_2				// all round padding of 2
        gridfixed_2x4	// 2 rows, 4 columns
		gap_2			// grid gap of 2
	>
        <H1
			font_orbitron fontsize_2 // fonts built in
		>
            Web 3 is For Our Kids To Thrive
        </H1>
    </Div>
);

Usage

Import Div, H1 etc.
Pass it your desired Key Codes from the List of Key Codes

import { Div } from 'combronents'

const App = () => (
    <Div
        h_full w_full
    />
)

Static vs Dynamic Key Codes

Static key codes are type checked and generate styles with no customisation. For example:

<Div
    h_full
    border_solid
/>

Dynamic key codes on the other hand, allow you to customise certain key codes. For example:

<Div
    grid

/>

List of Static Key Codes

Sizing

Key	Means
h_full	`height: 100%;`
h_half	`height: 50%;`
w_full	`width: 100%;`
w_half	`width: 50%;`
overflow_hidden	`overflow: hidden;`

Border

Key	Means
border	`border-style: solid; border-width: 1px;`
border_dashed	`border-style: dashed;`
border_dotted	`border-style: dotted;`
border_solid	`border-style: solid;`

Alignment

Key	Means
ac_center	`align-content: center;`
ac_start	`align-content: flex-start;`
ac_end	`align-content: flex-end;`
ac_between	`align-content: space-between;`
ac_around	`align-content: space-around;`
ac_evenly	`align-content: space-evenly;`
ai_start	`align-items: flex-start;`
ai_end	`align-items: flex-end;`
ai_center	`align-items: center;`
ai_baseline	`align-items: baseline;`
ai_stretch	`align-items: stretch;`
jc_start	`justify-content: flex-start;`
jc_end	`justify-content: flex-end;`
jc_center	`justify-content: center;`
jc_between	`justify-content: space-between;`
jc_around	`justify-content: space-around;`
jc_evenly	`justify-content: space-evenly;`
ji_start	`justify-items: start;`
ji_end	`justify-items: end;`
ji_center	`justify-items: center;`
ji_stretch	`justify-items: stretch;`

Display

Key	Means
display_block	`display: block;`

Positioning

Key	Means
bring_to_top	`z-index: 99999999;`
pos_absolute	`position: absolute;`
pos_relative	`position: relative;`
top_left	`position: absolute; left: 0; top: 0;`
top_center	`position: absolute; left: 50%; top: 0; transform: translateX(-50%);`
top_right	`position: absolute; right: 0; top: 0;`
middle_right	`position: absolute; right: 0; top: 50%; transform: translateY(-50%);`
bottom_right	`position: absolute; bottom: 0; right: 0;`
bottom_center	`position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);`
bottom_left	`position: absolute; bottom: 0; left: 0;`
middle_left	`position: absolute; left: 0; top: 50%; transform: translateY(-50%);`

Flex

Key	Means
flex	`display: flex;`
flex_center	`align-items: center; display: flex; justify-content: center;`
flex_column	`display: flex; flex-direction: column;`
flex_row	`display: flex; flex-direction: row;`

Grid

Key	Means
grid	`display: grid;`
grid_auto_column	`display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;`
grid_auto_row	`display: grid; grid-auto-flow: row; grid-auto-rows: 1fr;`

Fonts and Text

Key	Means
font_weight_medium	`font-weight: 500;`
font_weight_bold	`font-weight: 700;`
text_sm	`font-size: 0.875rem;", "line-height: 1.25rem;`
text_md	`font-size: 1rem;", "line-height: 2rem;`
text_lg	`font-size: 1.5rem;", "line-height: 3rem;`
text_center	`text-align: center;`
truncate	`overflow: hidden; text-overflow: ellipsis; white-space: nowrap;`

Animation

Key	Means
preserve_3d	`transform-style: preserve-3d;`
duration_150	`transition-duration: 150ms;`
ease_in_out	`transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);`
transition	`transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;`

Cursor (more to come)

Key	Means
cursor_pointer	`cursor: pointer;`

Focus

Key	Means
focus_outline_none	`&:focus { outline: none; }`
focus_bg_gray_200	`&:focus { background-color: #E5E7EB; }`

Useful Tools

Key	Means
hidescrollbars	`scrollbar-width: none; // Firefox` `&::-webkit-scrollbar { display: none; } // Chrome, Safari & Opera` `-ms-overflow-style: none; // IE and Edge`

Custom Effects

Key	Means
shadow	`box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);`
flux	`color: #426DFB; font-family: 'Orbitron', sans-serif; text-shadow: 0 0 5vw rgb(77, 77, 78);`
reflection_left	`-webkit-box-reflect: left 1px linear-gradient(transparent, #0005);`
reflection_right	`-webkit-box-reflect: right 1px linear-gradient(transparent, #0005);`