Varnish makes it easy to build AI2 branded demos, websites, and applications.
For a preview of what your application will look like by using Varnish, visit the demo.
- CSS that updates the default presentation of HTML elements so that they follow general AI2 branding conventions.
- A custom theme provider for both Ant Design and Styled-Components that can be used in React applications.
- A collection of prestyled React components.
Varnish can be used in one of three ways:
-
By starting from the Skiff Template:
The skiff-tamplate takes care of all the setup needed to use Varnish. To get started with the skiff template, follow the instructions in the README.
-
Simply add
<link rel=stylesheet href="https://cdn.jsdelivr.net/npm/@allenai/varnish@0.5.7/dist/theme.min.css" />in the<head>tag of your HTML:<html lang="en"> <head> <title>️⛵</title> <link rel=stylesheet href="https://cdn.jsdelivr.net/npm/@allenai/varnish@0.5.7/dist/theme.min.css" /> </head> <body> 🎨 </body> </html>
Without Varnish With Varnish Applied 
-
-
Add
<link rel=stylesheet href="https://cdn.jsdelivr.net/npm/@allenai/varnish@0.5.7/dist/theme.min.css" />to the<head>of your html file, as described above. -
Install Varnish (you can use either
npmoryarn):yarn add @allenai/varnish
-
Install Varnish's peer depencies:
yarn add antd react react-dom react-router-dom styled-components
-
Add TypeScript, if you'd like (we'd highly recommend you do so):
yarn add typescript @types/react @types/react-dom @types/react-router-dom @types/styled-components
-
Integrate Varnish into your application:
import React from 'react'; import ReactDOM from 'react-dom'; // Import the parts of Varnish you want. At minimum, you need to import // the ThemeProvider import { ThemeProvider } from '@allenai/varnish/theme'; // Wrap your App with the Varnish ThemeProvider const VarnishApp = () => ( <ThemeProvider> <App /> </ThemeProvider> ); // Render ReactDOM.render(<VarnishApp />, document.getElementById('root'));
-
Use Varnish components:
import { Button } from '@allenai/varnish/components'; // use as any other React component const MyComponent = () => ( <div> <h1>👋 Hello World</h1> <Button>Click Me</Button> </div> );
-
Varnish is built on top of Ant Design. To see a full list of the Varnish specific components visit the demo.
If you don't find what you're looking for, you can use one of the Ant components instead.
If you end up using an Ant Design component, but feel the output could be improved, let us know.
Varnish is changing quickly. To stay up to date as we release new versions,
join the #varnish-releases Slack channel.
Here's a list of resources that might be helpful as you get started:
If you're stuck don't hesitate to reach out:
- Sending an email to reviz@allenai.org
- Opening a Github Issue
- Asking a question in the
#skiff-usersslack channel.
We're eager to improve Varnish and need your feedback to do so!
We welcome and encourage contributions. For more information on how to get your development environment setup, review this document.