Commit 46d821b7 authored by Ben Galloway's avatar Ben Galloway

Add instructions for theme-only import to README

parent 6ecf9b3d
......@@ -7,18 +7,19 @@ A simple theme implementation for [Material UI](https://material-ui.com/) which
Install the package with e.g.
```bash
yarn add react @material-ui/core git+https://git.gsc.org.uk/utils/gsc-material.git
yarn add react @material-ui/core git+https://gitlab.gsc.org.uk/gsc-frameworks/gsc-material.git
```
Note that this depends on the `gsc-material` package being stored in a public Git repository.
Then simply wrap your app's main component with the `<GSCMaterial>` component. For example, in the `index.js` file generated by `create-react-app`, use something like:
```js
```jsx
import React from "react";
import ReactDOM from "react-dom";
import GSCMaterial from "@gsc/material";
import "@gsc/material/ProximaNovaFontFace.css";
import "@gsc/material/ArialFontFace.css"; // if required
import App from "./App";
ReactDOM.render(
......@@ -29,6 +30,37 @@ ReactDOM.render(
);
```
### Theme Only
If you don't intend to use any of Material-UI's components and just want to use the styling solution (`@material-ui/styles`), you can do the following instead.
Install the package with e.g.
```bash
yarn add react @material-ui/styles git+https://gitlab.gsc.org.uk/gsc-frameworks/gsc-material.git
```
Then wrap your app's main component with the `<MuiThemeProvider>` component and supply the exported theme:
```jsx
import React from "react";
import ReactDOM from "react-dom";
import { MuiThemeProvider } from "@material-ui/styles";
import GSCTheme from "@gsc/material/theme";
import "@gsc/material/ProximaNovaFontFace.css";
import "@gsc/material/ArialFontFace.css"; // if required
import App from "./App";
ReactDOM.render(
<MuiThemeProvider theme={GSCTheme}>
<App />
</MuiThemeProvider>,
document.getElementById("root")
);
```
This is essentially what the 'full' version of the package does behind the scenes, but it also implements Material-UI's `CssBaseline` component. If you are only using the theme as shown here, you may have to perform your own CSS reset or normalization.
## Adding Fonts
In a JavaScript app:
......@@ -40,11 +72,13 @@ import "@gsc/material/ProximaNovaFontFace.css";
or, in plain HTML:
```html
<link rel="stylesheet" type="text/css" href="ProximaNovaFontFace.css">
<link rel="stylesheet" type="text/css" href="ProximaNovaFontFace.css" />
```
Note that the font files themselves are not supposed to be distributed with the package. The design of this package is such that they will be obtained directly from `style.gsc.org.uk`.
A `font-face` declaration for Arial (`ArialFontFace.css`) is also included. This is usually unnecessary as it is a web-safe system font, but is sometimes required when designing for specific devices e.g. digital signage.
## Images
GSC logos are stored in the `img` directory for posterity. These are also not distributed with the package.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment