import {Meta} from '@storybook/addon-docs';
import {Source} from '@storybook/components';
import {version} from '../../../package.json';
import Breadcrumb from 'breadcrumb/Breadcrumb';
import Link from 'text/Link';
import TextBit from 'text/TextBit';
import Label from 'labels/Label';
import Logo from 'logo/Logo';
import Flex from 'flex/Flex';
import Headline from 'text/Headline';
import Subheadline from 'text/Subheadline';
import OverlayedBox from 'overlayed-box/OverlayedBox';
import DocsHeadline from 'blocks/Headline';
import Text from 'blocks/Text';
import revManifest from 'RevManifest';
Brainly
Style Guide
Welcome to the official Brainly style guide!
This style guide is a part of the
Pencil Design System
and is used across all language versions of the Brainly website and
some smaller sites.
v{version}
brainly.com,
znanija.com,
nosdevoirs.fr,
]}
/>
## How to use it?
React components are stored in `npm` package. To make it work you need to
install package and import styles. You can use CSS from our cdn or import `scss` from package itself.
## Installation
```bash
# npm
npm install -S brainly-style-guide
# yarn
yarn add brainly-style-guide
```
## Usage
```jsx
// Following line is required if you don't use css from public cdn
import 'brainly-style-guide/src/sass/main.scss';
import {Button} from 'brainly-style-guide';
const App = () => {
return (
);
};
```
## External CSS
In order to use style guide components, you have to include CSS file in the `` of your website:
`}
/>
## Icons (SVG sprites)
For our icons include this scripts before the closing `` tag:
Basic Icons
`}
/>
Subject Icons
`}
/>
Subject Mono Icons
`}
/>
Math Symbols
`}
/>
Mobile Icons
`}
/>
More
If you'd like to learn more about this project, report a bug or contribute
check it out on{' '}
github
.