3.3.7 • Published 4 years ago
book-gui v3.3.7
Extended Bootstrap Components for Book Publishing
Components
- Illustration (story/sample)
- Business (story/sample)
- Link (story/sample)
- Poem (story/sample)
- Quote (story/sample)
- Text (story/sample)
- Youtube (story/sample)
Atom users heads up: install Markdown Preview Plus to use the above for navigation (clickable links)
TODO
- Remove svelite, leaving only the compatible build system.
- Install svelite as a dependency
Install
npm install --save book-gui
Usage
You need to include a link to Bootstrap 4 stylesheet in your page - these components do not include or embed any Bootstrap styles automatically.
To make using Bootstrap themes easier, this library does not embed Bootstrap styles directly and you will need to include Bootstrap 4 CSS in your page.
Either in your HTML layout:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>Or add from your Svelte app:
<svelte:head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</svelte:head>In your svelte component:
<script>
import { Button, Col, Row } from 'sveltestrap';
</script>
<Row>
<Col>
<Button color="primary" outline>Hello World!</Button>
</Col>
</Row>Note on server-side rendering (SSR) Usage:
If you are using Sveltestrap in an SSR environment like Sapper, it's recommended you import the component source directly, for example:
<script>
import Button from 'sveltestrap/src/Button.svelte';
import Col from 'sveltestrap/src/Col.svelte';
import Row from 'sveltestrap/src/Row.svelte';
</script>
<Row>
<Col>
<Button color="primary" outline>Hello World!</Button>
</Col>
<Row>Tips and Tricks
Adding a new Component
- Create the Code
- cp /src/Blank.svelte to NAME.svelte
- add NAME to /src/index.js
- Customize NAME.svelte
- Setup Stories
- cp -r /stories/blank to /stories/NAME
- add NAME to stories/index.stories.js
- Customize /stories/NAME