https://github.com/thewebartisan7/posthtml-bootstrap-ui
PostHTML UI using X Components plugin and Bootstrap
https://github.com/thewebartisan7/posthtml-bootstrap-ui
bootstrap posthtml posthtml-component ui
Last synced: 9 months ago
JSON representation
PostHTML UI using X Components plugin and Bootstrap
- Host: GitHub
- URL: https://github.com/thewebartisan7/posthtml-bootstrap-ui
- Owner: thewebartisan7
- License: mit
- Created: 2022-10-18T23:36:26.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-10T02:37:35.000Z (about 3 years ago)
- Last Synced: 2025-03-25T21:02:06.215Z (10 months ago)
- Topics: bootstrap, posthtml, posthtml-component, ui
- Language: HTML
- Homepage: https://thewebartisan7.github.io/posthtml-bootstrap-ui/index.html
- Size: 1.54 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- License: license
Awesome Lists containing this project
README
[![NPM][npm]][npm-url]
[![Coverage][cover]][cover-badge]
[![XO code style][style]][style-url]
PostHTML UI
A PostHTML UI using X Components plugin and Bootstrap. For now just for testing and demo purpose of X Components plugin, in future maybe something more.
## Installation
```bash
npm i -D posthtml-bootstrap-ui
```
If you want to publish all Boostrap UI components in your project, so without using the `ui` namespace then run below command.
```bash
npm explore posthtml-bootstrap-ui -- npm run publish
```
All components will be copied inside `src/components` and `src/layouts` without the `ui` namespace.
See also the [starter template here](https://github.com/thewebartisan7/posthtml-bootstrap-ui-starter).
## Introduction
The PostHTML Bootstrap UI is a set of components made with [PostHTML X Components plugin](https://github.com/thewebartisan7/posthtml-components).
The components are designed to render Bootstrap components out-of-the-box, meaning you just write x-components syntax by passing props and it will be processed to a fully working HTML markup for Boostrap.
To give you a practical introduction example, let's look at the way how a few Bootstrap component can be rendered.
```html
Hi, there! I'm an alert type danger component.
```
Output:
```html
Hi, there! I'm an alert type danger component.
```
**NOTE**
The components documentation show always the code example without the `ui` namespace.
If you didn't publish the ui as explained in installation, then you have to use the `ui` namespace.
For example the alert component would be:
```html
Hi, there! I'm an alert type danger component.
```
See here more docs: [PostHTML Bootstrap UI docs and demo](https://thewebartisan7.github.io/posthtml-bootstrap-ui/index.html).
## Contributing
See [PostHTML Guidelines](https://github.com/posthtml/posthtml/tree/master/docs) and [contribution guide](CONTRIBUTING.md).
[npm]: https://img.shields.io/npm/v/posthtml-bootstrap-ui.svg
[npm-url]: https://www.npmjs.com/package/posthtml-bootstrap-ui
[style]: https://img.shields.io/badge/code_style-XO-5ed9c7.svg
[style-url]: https://github.com/sindresorhus/xo
[cover]: https://coveralls.io/repos/thewebartisan7/posthtml-bootstrap-ui/badge.svg?branch=main
[cover-badge]: https://coveralls.io/r/thewebartisan7/posthtml-bootstrap-ui?branch=main