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

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.

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.

Introduction

The PostHTML Bootstrap UI is a set of components made with PostHTML X Components plugin.

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.

<x-alert type="danger">
  Hi, there! I'm an alert type danger component.
</x-alert>

Output:

<div class="alert alert-danger" role="alert">
    Hi, there! I'm an alert type danger component.     
</div>

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:

<x-ui::alert type="danger">
  Hi, there! I'm an alert type danger component.
</x-ui::alert>

See here more docs: PostHTML Bootstrap UI docs and demo.

Contributing

See PostHTML Guidelines and contribution guide.