Styling
Currently Tenon-UI comes with a compiled style sheet as well as SASS source files for you to use.
You can use our compiled CSS, import and override our SASS files, or completely restyle the components using the classes rendered on the elements.
Our styles are based on Vanilla Framework to be as lightweight and non-intrusive as possible.
The compiled stylesheet
In your React app, simply import the tenon-ui.css file located in the /lib/styles part of the import:
SASS files
If your build configuration supports SASS compilation, you can also simply import the main SASS file:
But you also have access to the source files. The main file shows the standard dependencies:
Please note the dependency on Vanilla Framework. Also note that in order for your compilation to succeed, node_modules MUST be registered as a path with the SASS compiler.
If you want to override our styles, you can use this file as example. Then you can override or change any of the components to achieve the look your desire.
The colours you can override are shown in the Vanilla Framework Color documentation.
Roll your own solution
If you would like a totally different visual experience and cannot do this with the files provided, you can of course create your own style sheet.
Please refer to the source files and rendered HTML to see how.
Just remember that clear colour combinations and contrasts are also important for accessibility. If you use our styles, you get that out of the box.
But what about stuff like CSS Modules and Styled Components?
Tenon-UI was built by Tenon for Tenon so we did it with our preference in mind.
But if you want to use Tenon-UI or you are already using it but you want to used other methods of styling, please open a Pull Request to discuss. We are open to the discussion and moving Tenon-UI towards a library that YOU can use easily, but we will need your help sometimes to get it there.