https://github.com/springtype-org/st-bootstrap
Bootstrap 4 for SpringType
https://github.com/springtype-org/st-bootstrap
bootstrap bootstrap-4 components springtype
Last synced: about 1 year ago
JSON representation
Bootstrap 4 for SpringType
- Host: GitHub
- URL: https://github.com/springtype-org/st-bootstrap
- Owner: springtype-org
- License: mit
- Created: 2019-11-21T18:22:48.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:18:02.000Z (about 3 years ago)
- Last Synced: 2025-01-05T06:29:49.195Z (about 1 year ago)
- Topics: bootstrap, bootstrap-4, components, springtype
- Language: TypeScript
- Homepage:
- Size: 1.28 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Bootstrap 4 for SpringType
> "How to use Bootstrap 4 with SpringType?"
SpringType comes with a lazy, fault-tolerant VDOM implementation that allows you to use standard HTML + CSS.
Unlike other modern frontend frameworks, SpringType *doesn't need any special wrapper component libraries*.
This means, you can just use the standard Bootstrap 4 SCSS/CSS, it's HTML and JS plugins like we did back in the good old days - but with components and VDOM :-)
You can find a working integration example in the `playground` folder.
Scaffolding
For your convenience, we've created a scaffolding template for SpringType / Bootstrap 4 projects.
To use it, please install the SpringType scaffolding CLI `st-create`:
yarn add global st-create
Then simply run:
st-create -c project -t bootstrap-4 -n MyBootstrapProject
...and seconds later, a SpringType / Bootstrap 4 application will be created for you.
Manual integration guide
If you don't want to use `st-create`, the process of integrating Bootstrap 4 in a
SpringType projects (or even any TypeScript project), is quite straigt forward.
You can choose to integrate third-party libraries via CDN or import them in JS
to include them into the application JS bundle.
Importing third-party JS in application JS bundle
Install these dependencies:
npm i st-bootstrap bootstrap jquery popper.js
OR:
yarn add st-bootstrap bootstrap jquery popper.js
- jQuery is a Bootstrap 4 dependency
- Bootstrap 4 comes with the SCSS (SASS) stylesheets and the jQuery plugins for interactive components
- popper.js for
Make sure to actually import these dependencies (e.g. in `src/index.tsx`):
```ts
// import jQuery, Bootstrap, popper.js
import { importBootstrap } from "st-boostrap";
st.run(async() => {
// dynamically imports the dependencies jquery, bootstrap and popper.js
await importBootstrap();
// enabling SpringType support for Bootstrap 4 tooltip components
setupBootstrapComponent('tooltip');
st.render();
});
```
Importing third-party JS using a CDN
The other option is to integrate Bootstrap 4 and it's dependencies in the `` of your `index.html` just like described in the official Bootstrap 4 docs:
```html
```
Make sure *not* to import and call `importBootstrap()` then.
Bootstrap 4 JS Components
Some components require an initialization (e.g. tooltips). To do this, just implement the lifecycle method `onAfterInitialRender` just like described in the official Bootstrap 4 docs:
```ts
onAfterInitialRender() {
// tooltip integration
$(() => {
$('[data-toggle="tooltip"]', this.el).tooltip()
});
}
```
Custom theming using Sass
We also suggest, to create an SCSS file to integrate the Bootstrap 4 SCSS with custom themeing support.
Create a `theme.scss` in your `src` folder:
```scss
$theme-colors: (
"primary": #1a6da9,
"secondary": #2a863c,
);
@import "bootstrap/scss/bootstrap";
```
To transpile the SCSS file to CSS, just activate the SASS processing feature of `st-start` by creating or modfiying the file `st.config.js`. Add the key `staticStyleEntryPoints`:
```js
module.exports = {
staticStyleEntryPoints: {
'src/theme.scss': 'dist/theme.css'
},
};
```
Finally, import the resulting `dist/theme.scss` CSS file in the `` section of your `src/index.html` file:
```html
```
Most Bootstrap apps also use Font Awesome, so we recommend importing Font Awesome as well.
Maintainers
Aron Homberg
Michael Mannseicher
Contributing
Please help out to make this project even better and see your name added to the list of our
[CONTRIBUTORS.md](./CONTRIBUTORS.md) :tada:
