This article walks you through the process of installing Straple Design System for React JS, we'll cover changing variables, examples of themes, properties and any additional information you need. Remember you can also view the portal in your account area to look deeper at all the previews and table of contents for all aspects of The Straple Design System. If you have any questions or issue please contact us and we'll do our best to help you.
Install guide
- Drag the straple library into your project folder
a. If you are using a custom webpack/babel config (e.g. not using create-react-app), please ensure the style-loader and css-loader are installed/configured within webpack - Run the command npm install ./straple inside your project folder
a. If using yarn, use the command yarn add link:straple. This is the recommended way of installing via yarn as it allows editing variables within the local straple folder (by creating a symlink). - b. Whilst the normal yarn add ./straple command can be used, this copies the library into node_modules and variables must be edited within the node_modules folder which may not be saved by version control.
- Straple is installed and can be accessed like any other library.
- For example: import { Base } from 'straple' will import a Base component.
Notes
Changing Variables (e.g. font size, colors, etc)
Editing variables.js (recommended)
Within the Straple library folder, a file named variables.js exists containing all the variables used throughout Straple (and the UI Kit). Changing any of these values will alter all the components. Note: if using Yarn, read the Yarn install notes - using the typical yarn add command may result in this method not working.
Using a ThemeProvider
A theme provider can also be used. This can be useful if you only want different variables to affect a certain part of the application.
- Import ThemeProvider from Straple
- Wrap any components you want to have in this theme
example: <ThemeProvider><Base>I'm themed</Base></ThemeProvider> - The ThemeProvider takes a prop theme which is an object containing all the variables.
- All variables must be defined. The easiest/best way to do this is create a copy of Variables and alter any objects needed. In the example provided below the font size for a medium Base element has been changed in the theme. The Base element wrapped within the ThemeProvider has a font size of 50px whereas the other Base element has the default font size even though they are using the 'same size' of medium - this is due to theming. The same can be done with every other variable.
Example of ThemeProvider
<![CDATA[
import { ThemeProvider, Variables, Base } from "straple";
function App() {
const THEME = { ...Variables }
THEME.base_medium = '50px'
return (
<div>
<ThemeProvider theme={THEME}>
<Base size='medium'>I have a different theme</Base>
</ThemeProvider>
<Base size='medium'>I have the default theme</Base>
</div>
)
}
]]> enum/string (or enum/other data type)
This means that there are predefined options, but ALSO a custom option can be passed.
For example for padding which is enum/string, padding can be 'small', 'regular', 'large' or any custom value such as '10px', '10px 15px', '10px 12px 14px 10px', like regular CSS.
className
All components support a className prop which provides a class to the top element of that component. This allows you to use Straple components within a library such as styled-components and target children elements, allowing full customisation.
extra prop
All components support an extra prop which allows you to supply more CSS to a particular component.
For example:
<![CDATA[
<Base size='medium'>base</Base>
]]>Would be a regular Base component.
However the following component (with the extra prop):
<![CDATA[
<Base size='medium' extra='text-decoration: underline;'> base</Base>
]]>Would have the CSS 'text-decoration: underline;' and so be rendered underlined.
My AccountLog In
