Axs

Responsive Typography & Layout for React
GitHub
npm i axs

<Box />

Hello Box
<Box
	p={2}
	mx='auto'
	width={1/2}
	css={{
		backgroundColor: '#fff'
	}}>
	Hello Box
</Box>

<Text />

Hello Text
<Text
	fontSize={[ 2, 1, 0 ]}
	center
	my={2}>
	Hello Text
</Text>

<Flex />

Hello
Flex
<Box px={3}>
	<Flex
		p={2}
		css={{
			backgroundColor: '#fff'
		}}>
		<Box px={2}>
			Hello
		</Box>
		<Box px={2} ml='auto'>
			Flex
		</Box>
	</Flex>
</Box>

<Heading />

Hello Heading

<Heading
	is='h3'
	fontSize={[ 2, 1, 0 ]}
	px={3}
	my={2}>
	Hello Heading
</Heading>

<Color />

Hello Color
<Color
	p={2}
	mx='auto'
	width={1/2}
	color='white'
	backgroundColor='tomato'
	>
	Hello Color
</Color>

<Border />

Hello Border
<Border
	p={2}
	mx='auto'
	width={1/2}
	top
	bottom
	color='tomato'>
	Hello Border
</Border>

Grid

1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
<Box p={3}>
	<Flex.wrap
		mx={-1}
		fontSize={6}
		css={{
			'& > div': {
				outline: '1px solid'
			}
		}}>
		<Box width={1/2} p={1}>1/2</Box>
		<Box width={1/2} p={1}>1/2</Box>

		<Box width={1/3} p={1}>1/3</Box>
		<Box width={1/3} p={1}>1/3</Box>
		<Box width={1/3} p={1}>1/3</Box>

		<Box width={1/4} p={1}>1/4</Box>
		<Box width={1/4} p={1}>1/4</Box>
		<Box width={1/4} p={1}>1/4</Box>
		<Box width={1/4} p={1}>1/4</Box>

		<Box width={1/5} p={1}>1/5</Box>
		<Box width={1/5} p={1}>1/5</Box>
		<Box width={1/5} p={1}>1/5</Box>
		<Box width={1/5} p={1}>1/5</Box>
		<Box width={1/5} p={1}>1/5</Box>

	</Flex.wrap>
</Box>

Media Object

Hello
Try changing the example code below
<Flex.center>
	<Box m2>
		<img
			width={128}
			height={128}
			src='http://placehold.it/256/ff6347/fff?text=Axs'
		/>
	</Box>
	<Box w={1}>
		<Text f={3}>Hello</Text>
		<Text>
			Try changing the example code below
		</Text>
	</Box>
</Flex.center>

Bar Chart

25%
75%
<Box f6 p2>
	<Color
		p1
		mb1
		w={1/4}
		color='#fff'
		backgroundColor={color[7]}>
		25%
	</Color>
	<Color
		p1
		w={3/4}
		color='#fff'
		backgroundColor={color[5]}>
		75%
	</Color>
</Box>

Percentage Bar

37.5%
25%
25%
12.5%
<Flex f6 p2>
	<Color
		p1
		w={3/8}
		color='#fff'
		backgroundColor={color[8]}>
		37.5%
	</Color>
	<Color
		p1
		w={1/4}
		color='#fff'
		backgroundColor={color[6]}>
		25%
	</Color>
	<Color
		p1
		w={1/4}
		color='#fff'
		backgroundColor={color[4]}>
		25%
	</Color>
	<Color
		p1
		w={1/8}
		color='#fff'
		backgroundColor={color[2]}>
		12.5%
	</Color>
</Flex>

Panel

Hello
Panel
Panel Footer
<Box p2>
	<Border color={color[5]} rounded>
		<Color
			p2
			color='#fff'
			backgroundColor={color[5]}>
			<Text bold>Hello</Text>
		</Color>
		<Box p2>
			Panel
		</Box>
		<Border top f6 p2 color={color[5]}>
			Panel Footer
		</Border>
	</Border>
</Box>

Card

Hello Card
<Box p2>
	<Box w={256} mx='auto'>
		<Border rounded color={color[3]}>
			<Box
				is='img'
				w={1}
				width={256}
				height={256}
				src='http://placehold.it/512/ff6347/fff?text=Axs'
				css={{
					display: 'block',
					maxWidth: '100%',
					height: 'auto'
				}}
			/>
			<Box p1>
				<Text bold>Hello Card</Text>
			</Box>
		</Border>
	</Box>
</Box>
Axs is a React UI component library that serves as a foundation for highly customized UI as well as a utility belt for prototyping.

Usage

Hello

Axs
<Box p={3}>
	<Flex mx={-2}
		css={{
			alignItems: 'baseline'
		}}>
		<Box width={2/3} px={2}>
			<Heading fontSize={1}>
				Hello
			</Heading>
		</Box>
		<Box width={1/3} px={2}>
			<Text fontSize={3}>
				Axs
			</Text>
		</Box>
	</Flex>
</Box>

Responsive Typography and Layout

Axs is an abstraction of the most common responsive typographic and layout styling concerns in the form of UI component primitives.

From Prototype to UI Library

Axs is intended as a way to quickly prototype new UI, handle one-off styles, and serve as a foundation for creating your own custom UI component libraries.

UI Component Primitives

Use the Flex and Box components as a starting point for any visual containers or grid systems in your app. Use the Heading and Text components for headings, labels, messages, or any other UI typography. Use the Color and Border components for thematic styles.

The Power of CSS in JavaScript

Using Glamor under the hood, each Axs component handles CSS-in-JS with the css prop, with support for media queries and pseudoclasses, to allow for any fine-tuned styling needs.

Get Started

Check out demos or read the documentation on GitHub
GitHub