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 ...@@ -7,18 +7,19 @@ A simple theme implementation for [Material UI](https://material-ui.com/) which
Install the package with e.g. Install the package with e.g.
```bash ```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. 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: 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 React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import GSCMaterial from "@gsc/material"; import GSCMaterial from "@gsc/material";
import "@gsc/material/ProximaNovaFontFace.css"; import "@gsc/material/ProximaNovaFontFace.css";
import "@gsc/material/ArialFontFace.css"; // if required
import App from "./App"; import App from "./App";
ReactDOM.render( ReactDOM.render(
...@@ -29,6 +30,37 @@ 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 ## Adding Fonts
In a JavaScript app: In a JavaScript app:
...@@ -40,11 +72,13 @@ import "@gsc/material/ProximaNovaFontFace.css"; ...@@ -40,11 +72,13 @@ import "@gsc/material/ProximaNovaFontFace.css";
or, in plain HTML: or, in plain HTML:
```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`. 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 ## Images
GSC logos are stored in the `img` directory for posterity. These are also not distributed with the package. 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