
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)
![GitHub followers](https://img.shields.io/github/followers/baufometic?style=social)

Twitter

Support

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