Display Primitives

Tasks To Do:

• Build new design that uses grid and an image, too. Start with Mobile.
• Add examples for Next and Gatsby
• Finish this readme
• Add Social Preview in Github settings

Tasks I Might Do:

• Consider <flex.row> and <flex.col>
• Make importable <Flex> components with derived $- props
  • Auto-import or grobally available in tsconfig?
• SWC plugin? https://swc.rs/docs/usage/plugins

What is this?

The browser gives us <div/> for display: block; and <span/> for display: inline;, but what about the other display values like flex and grid? This babel transform adds these missing tags/elements.e

NOTE: could also show before and after screenshots of code editor with red underlines for <flex> and such.

Before

  <div /> // display: block;
  <span /> // display: inline;
  <table /> // display: table;

  // ❌ These don't exist (notice the red squiglies)
  <flex /> // display: flex;
  <grid /> // display: grid;

After

  <div /> // display: block;
  <span /> // display: inline;
  <table /> // display: table;

  // ✅ But we can make up their existence with a Babel Transform :smile: (notice absence of red squiglies)
  <flex /> // display: flex;
  <grid /> // display: grid;

display=	html	Display Elements
"block"	<div>	<block>
"inline"	<span>	<inline>
"flex"	❌	<flex>
"grid"	❌	<grid>
"table"	<table>
"inline-block"	❌	<inlineblock>
"inline-flex"	❌	<inlineflex>
"inline-grid"	❌	<inlinegrid>

Also added for convenience: row and column. See The Case for Row and Col for more.

css	html	Display Elements
display: flex; flex-direction: row;	❌	<row>
display: flex; flex-direction: column;	❌	<column>

For convenience, we've also added <block> and <inline>, even though div and span already exist.

Getting Started

Install...

API

Prop	Type	Description
$	"div" | "aside" | "main" ...etc (Default: "div")	The html tag that this element will become (at compile time)

Limitations

$ prop is used at compile time, so it can not be a variable. I.e. you can't have a wrapper component that passes in $={props.as}.

Questions/Answers

Why Babel? Why not just make components like <Flex>?

1. runtime perf (I assume)
2. no import needed
3. editor treats it (and colors it) like a normal html tag, which I like.
   1. I also like that the lowercase name (e.g. <flex>) denotes it as a leaf node in the render tree (not a compound component)