Skip to content

Latest commit

 

History

History
153 lines (108 loc) · 5.05 KB

README.md

File metadata and controls

153 lines (108 loc) · 5.05 KB
Raw

Varnish

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.

What do I get by using Varnish?

  • 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.

Some sites that use Varnish:

Getting Started

Varnish can be used in one of three ways:

  1. 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.

  2. By embedding the CSS file into an HTML page (sans React):

    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
    without varnish without varnish

  3. Using NPM:

    1. 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.

    2. Install Varnish (you can use either npm or yarn):

      yarn add @allenai/varnish

    3. Install Varnish's peer depencies:

      yarn add antd react react-dom react-router-dom styled-components

    4. 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

    5. 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'));

    6. 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>
);

Components

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.

Staying Up to Date

Varnish is changing quickly. To stay up to date as we release new versions, join the #varnish-releases Slack channel.

Helpful Links

Here's a list of resources that might be helpful as you get started:

Getting Help

If you're stuck don't hesitate to reach out:

We're eager to improve Varnish and need your feedback to do so!

Contributing

We welcome and encourage contributions. For more information on how to get your development environment setup, review this document.