This repo contains base style sheets intented to be used on scripture content return from API.Bible. For examples of all the styles and formatting used, see examples.
All the HTML content returned from API.Bible uses classnames that follow USX styles.
To use this package directly in your app, install with NPM.
npm install --save scripture-styles
Then import into your index file.
import "scripture-styles/dist/css/scripture-styles.css";
Wherever you display scripture content from API.Bible on your site, just make sure it's wrapped in a div with class="scripture-styles".
<div class="scripture-styles">
{apiBibleResponse.data.content}
</div>
## CDN
If you prefer to reference this directly from the CDN add the following to your page.
```html
<link
rel="stylesheet"
href="https://assets.api.bible/css/scripture-styles.css"
/>
We've worked hard to make sure that the scripture styles do not collide with other styles on your site. That being said, it's important that it comes last in the source order whether that is last in a Sass import or last when linking to the CSS file.
We've chose to use :nested as the style for the main css file. It's nice and easy to read. We've used :compressed on the minified css file. If you want to go straight into production just grab the minifed version.
If you need to rebuild the css you can run.
npm run build
Or individually:
nested
npm run build-nested
compressed
npm run build-nested
gzip
npm run gzip
First add your API.Bible key to previewer/.env. See .env.sample for format. If you need a key, you can Sign Up Here.
Then, to run the preview tool
cd previewer
npm install
npm start
New stories can be added to stories/stories.js.