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

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);

🚀 About Me

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

[GitHub](https://www.github.com/baufometic)

Twitter

Support

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