Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
82 lines (55 sloc) 2.95 KB

import Layout from '../../components/layout';

export default Layout;

Installing Base Web

Base Web is available on npm as baseui. This single package contains all Base Web components.

# using yarn
yarn add baseui styletron-engine-atomic styletron-react

# using npm
npm install baseui styletron-engine-atomic styletron-react

Base Web comes with both Flow and TypeScript. Styletron only with Flow. If you use TypeScript there are an external declarations:

yarn add @types/styletron-standard @types/styletron-react @types/styletron-engine-atomic

Our React components don't use PropTypes.

Styletron is a toolkit for component-oriented styling, part of the CSS in JS family. Base Web uses Styletron as a peer dependency to style all the elements, so you need to add them as dependencies too.

The next step is to setup Styletron in your application. There are detailed guides for

Styletron

Base Web always needs Styletron to function. You probably will not be able to build the whole application only with Base Web components and you will be creating some new components as well. Since Styletron is already loaded in your project, we recommend you using Styletron to style any new components:

import {styled} from 'baseui';

export default () => {
  const Anchor = styled('a', {
    fontSize: '20px',
    color: 'red',
  });
  return <Anchor href="/my-link">Custom Link</Anchor>;
};

What's the difference here?

import {styled} from 'baseui';
import {styled} from 'styletron-react';

It's exactly the same styled function, but Base Web adds the $theme variable that gives you access to all Base Web's design tokens. So if you want to use our primary color for that custom link, you can do:

import {styled} from 'baseui';

const Anchor = styled('a', ({$theme}) => ({
  color: $theme.colors.primary,
}));

Do you want to learn more about Styletron? Go to styletron.org.

Do you prefer other approaches when styling your components? CSS Modules? Styled-components? You can use them in parallel to Base Web and Styletron. Styletron adds only 8kB to your bundle and works in an isolation.

Next step

Check out the Usage section to see what you have to change in your application to start using Base Web.

You can’t perform that action at this time.