combronents v1.27.0

Combronents

Rapid inline component styling. Inbuilt Google fonts, intellisense and types.

• Forget memorising long lists of CSS shortcodes
• Add Google fonts to a component using only the font name
• SSR capable with frameworks like Next

Coming soon:

• Describe your style in a sentence, and it'll turn it into CSS
• Remix Run template

Installation

  npm i combronents

Usage

1. Import the Div, H1 etc. components
2. Pass in your desired styles, use intellisense for suggestions

import { Div, H1, Section } from "combronents";

// Nested components aren't a problem
const GridWithTitle = () => (
  <Div
    grid gap_2 gtc_1fr_1fr
    h_full w_090pc>

    <H1
      mt_3 p_2 bg_grey>

      Web 3 is For Our Kids
    </H1>
  </Div>
);

// Pull in Google fonts easily
const WithGoogleFonts = () => (
  <Div font_orbitron_400 fontsize_4>
    Orbitron with weight 400
  </Div>
);

// Target child elements
const StyledChildren = () => (
  <Div child01_flex_center>
    <Section border_blue text_green>
      A section styled with flex, centered,
      and with a blue border and green text
    </Section>
  </Div>
);

Static vs Dynamic Key Codes

Static key codes are strongly typed:

<Div
  h_full
  border_solid border_green
/>

Generates this CSS:

height: full;
border: 1px solid green;

Dynamic key codes are more creative:

<Div
  gtc_1fr_2fr
/>

Generates:

display: grid;
grid-template-columns: 1fr 2fr;

Target Child Elements

<Div pos_relative child01_absolute>
  <div>
    An absolutely positioned child
  </div>
</Div>

Generates this CSS:

position: relative;

>:nth-child(1) {
  position: absolute;
}

List of Static Key Codes (INCOMPLETE)

This list does not contain all of the current styles so use intellisense to explore

Sizing

Border

Alignment

Display

Positioning

Flex

Grid

Fonts and Text

Animation

Cursor (more to come)

Focus

Useful Tools

Custom Effects

🚀 About Me

I'm Pete Savva, a day trader and developer at Tech & Tribal, and father to my newborn son Maximus.

Twitter

Support

If you have any questions or feedback, please feel free to post on the GitHub Repo Your feedback is greatly appreciated.