-
Notifications
You must be signed in to change notification settings - Fork 673
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Docs: Move homepage to root path (#1783)
* Drop homepage file * Update layout exception * Rename home.mdx to index.mdx
- Loading branch information
Showing
3 changed files
with
119 additions
and
174 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,54 +1,123 @@ | ||
--- | ||
fullwidth: true | ||
hidenav: true | ||
--- | ||
import { Container, Box, Button } from 'theme-ui' | ||
import { Banner, Tiles } from '..' | ||
import Testimonials from './testimonials' | ||
import Graph from '../components/graph' | ||
|
||
<Banner> | ||
|
||
<Graph /> | ||
|
||
# Theme UI: The Design Graph Framework | ||
|
||
Theme UI is a library for creating themeable user interfaces based on constraint-based design principles. | ||
Build custom component libraries, design systems, web applications, Gatsby themes, and more | ||
with a flexible API for best-in-class developer ergonomics. | ||
|
||
[Documentation](/getting-started) | ||
[GitHub](https://github.com/system-ui/theme-ui) | ||
|
||
</Banner> | ||
|
||
<Container> | ||
|
||
[![GitHub Stars](https://badgen.net/github/stars/system-ui/theme-ui)](https://github.com/system-ui/theme-ui/stargazers) | ||
![npm (latest)](https://img.shields.io/npm/v/theme-ui/latest) | ||
![npm (next)](https://img.shields.io/npm/v/theme-ui/next?color=%23e044aa) | ||
[![Build Status](https://github.com/system-ui/theme-ui/workflows/CI/badge.svg)](https://github.com/system-ui/theme-ui/actions?query=workflow%3ACI) | ||
[![Contributors](https://img.shields.io/github/contributors/system-ui/theme-ui)](https://github.com/system-ui/theme-ui/graphs/contributors) | ||
[![Activity](https://img.shields.io/github/commit-activity/m/system-ui/theme-ui)](https://github.com/badges/shields/pulse) <br/> | ||
[![Size](https://badgen.net/bundlephobia/minzip/theme-ui)](https://badgen.net/bundlephobia/minzip/theme-ui) | ||
[![Tree Shaking](https://badgen.net/bundlephobia/tree-shaking/theme-ui)](https://bundlephobia.com/result?p=theme-ui) | ||
[![MIT license](https://badgen.net/badge/license/MIT/blue)](https://github.com/system-ui/theme-ui/blob/stable/LICENSE.md) | ||
[![Join our Discord community](https://img.shields.io/discord/778553042466635786?color=%237289da&logo=discord)](https://discord.gg/theme-ui) | ||
|
||
<Tiles columns={2}> | ||
|
||
1. ## Create your theme | ||
|
||
```js | ||
export default { | ||
colors: { | ||
text: '#000', | ||
background: '#fff', | ||
primary: 'tomato', | ||
}, | ||
fonts: { | ||
body: 'system-ui, sans-serif', | ||
heading: '"Avenir Next", sans-serif', | ||
}, | ||
} | ||
``` | ||
|
||
2. ## Style your UI | ||
|
||
```jsx | ||
/** @jsxImportSource theme-ui */ | ||
|
||
export default (props) => ( | ||
<div | ||
style={{ | ||
backgroundColor: 'black', | ||
color: 'white', | ||
padding: 32, | ||
fontWeight: 'bold', | ||
fontSize: '2em', | ||
<h1 | ||
sx={{ | ||
color: 'primary', | ||
fontFamily: 'heading', | ||
}}> | ||
{props.children} | ||
</div> | ||
Hello | ||
</h1> | ||
) | ||
``` | ||
|
||
</Tiles> | ||
|
||
<Tiles> | ||
|
||
- ## Ergonomic | ||
Best-in-class developer ergonomics let you style | ||
your application quickly and consistently | ||
based on your theme | ||
- ## Themeable | ||
Quickly and easily reference values from your theme | ||
throughout your entire application, on any component | ||
- ## Constraint-based | ||
Use color, typography, and layout scales | ||
rooted in constraint-based design principles | ||
|
||
</Tiles> | ||
|
||
<Testimonials /> | ||
|
||
<Tiles | ||
sx={{ | ||
fontWeight: 'bold', | ||
a: { | ||
display: 'block', | ||
color: 'inherit', | ||
textDecoration: 'none', | ||
':hover': { | ||
textDecoration: 'underline', | ||
} | ||
} | ||
}}> | ||
|
||
- [Theme-aware `sx` prop for CSS](/getting-started/#sx-prop) | ||
- [30+ Built-in primitive UI components](/components) | ||
- [Simple, expressive MDX styling](/styling-mdx) | ||
- [Style with or without creating components](/getting-started/#sx-prop) | ||
- [Use Typography.js themes](/styling-mdx/#typographyjs) | ||
- [Easy, mobile-first responsive styles](/getting-started/#responsive-styles) | ||
- [Built-in dark mode](/color-modes) | ||
- [Plugin for Gatsby sites and themes](/packages/gatsby-plugin) | ||
- [Robust theming API](/theming) | ||
- [Backed with a Theme Specification](/theme-spec) | ||
|
||
</Tiles> | ||
|
||
<Box py={6}> | ||
|
||
## Get Started | ||
|
||
<Button as="a" href="/getting-started" variant="black"> | ||
Explore the Docs | ||
</Button> | ||
|
||
</Box> | ||
|
||
# #BlackLivesMatter | ||
|
||
## George Floyd | ||
|
||
Tony McDade, Yassin Mohamed, Finan H. Berhe, Sean Reed, Steven Demarco Taylor, | ||
Breonna Taylor, Ariane McCree, Terrance Franklin, Miles Hall, Darius Tarver, | ||
William Green, Samuel David Mallard, Kwame Jones, De’von Bailey, Christopher Whitfield, | ||
Anthony Hill, De’Von Bailey, Eric Logan, Jamarion Robinson, Gregory Hill Jr, | ||
JaQuavion Slaton, Ryan Twyman, Brandon Webber, Jimmy Atchison, Willie McCoy, | ||
Emantic Fitzgerald Bradford J, D’ettrick Griffin, Jemel Roberson, DeAndre Ballard, | ||
Botham Shem Jean, Robert Lawrence White, Anthony Lamar Smith, Ramarley Graham, | ||
Manuel Loggins Jr, Trayvon Martin, Wendell Allen, Kendrec McDade, Larry Jackson Jr, | ||
Jonathan Ferrell, Jordan Baker, Victor White III, Dontre Hamilton, Eric Garner, | ||
John Crawford III, Michael Brown, Ezell Ford, Dante Parker, Kajieme Powell, | ||
Laquan McDonald, Akai Gurley, Tamir Rice, Rumain Brisbon, Jerame Reid, Charly Keunang, | ||
Tony Robinson, Walter Scott, Freddie Gray, Brendon Glenn, Samuel DuBose, Christian Taylor, | ||
Jamar Clark, Mario Woods, Quintonio LeGrier, Gregory Gunn, Akiel Denkins, Alton Sterling, | ||
Philando Castile, Terrence Sterling, Terence Crutcher, Keith Lamont Scott, Alfred Olango, | ||
Jordan Edwards, Stephon Clark, Danny Ray Thomas, DeJuan Guillory, Patrick Harmon, | ||
Jonathan Hart, Maurice Granton, Julius Johnson, Jamee Johnson, Michael Dean... | ||
|
||
<br /> | ||
<br /> | ||
|
||
The homepage is currently offline, as a small mark of respect, and expression of solidarity. | ||
The rest of the [docs pages are still available](/home). | ||
|
||
Organizations that could use your financial support include | ||
[Black Lives Matter](https://blacklivesmatter.com), | ||
[The NAACP Legal Defense and Educational Fund](https://www.naacpldf.org), | ||
[The Equal Justice Initiative](https://eji.org), | ||
[We The Protesters](https://www.wetheprotesters.org), | ||
and the | ||
[Philadelphia Bail Fund](https://www.phillybailfund.org/). | ||
|
||
--- | ||
</Container> |
682cf91
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs: