Historytelling Styleguide
This project contains the styleguide sourcecode for the Historytelling system. The styleguide is based on Bootstrap and uses SCSS as a preprocessor. The preprocessor is run by a webpack project.
Use the styleguide
Include this styleguide into your own project simply by running
npm install histoytelling-styleguide --save
in your project. If your are using a module loader like webpack with a SCSS preprocessor you can just include the index.scss
file located in /src/index.scss
. The index file loads bootstrap, adjusted variables and the custom histoytelling styles.
If you aren't using a preprocessor you can also include the preprocessed CSS file styles.css
from /dist
.
Extend the Styleguide
It may be possible that future projects are going to extend the styleguide. In this case the new styles have to be included into the styleguide project.
The folder /src/historytelling
includes the custom historytelling styles. All styles for each component are located in one SCSS file. One SCSS file starts with an underscore and is named unique (preferebly with the name of the component where the styles come from).
Each CSS class inside a component file starts with a unique identifier like read
. This prevents overwriting other styles. CSS classes are written in delimiter-seperated words. Look through the code for examples.
After new SCSS files have been added these have to be added to the imports at the bottom of the index.scss
file.
If you want to use the preprocessed styles.css
make sure to run npm run dist
in your command line.
Reach out to the IMIS staff at the university to publish the extended styleguide so other project can make use of it.