Web app prototyping library based on Bootstrap framework.

  • By Alexander Tarkhov
  • Last update: Aug 7, 2022
  • Comments: 6

PostBoot

Web app prototyping library based on Bootstrap framework.

Contents

  1. Compatibility
    1. Version support
  2. Installation
    1. NodeJS
    2. Manually
  3. Usage
    1. Local
    2. CDN
  4. Author
  5. License

Compatibility

Library Version
Bootstrap >= 4.5.0 and < 5.0

PostBoot does not overwrite any components of Bootstrap, but only extends most of them. You can use it completely safe.

Version support

Bootstrap Repo
4.x 1.x

Installation

NodeJS

npm install postboot

Manually

Download package and unpack it or use following commands:

wget -O https://github.com/tarkhov/postboot/releases/download/v1.0.2/postboot.zip
unzip postboot.zip

Usage

Local

<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/postboot.min.css"/>

<!-- JS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/postboot.min.js"></script>

CDN

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/tarkhov/postboot/v1.0.2/dist/css/postboot.min.css">

<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/tarkhov/postboot/v1.0.2/dist/js/postboot.min.js"></script>

Author

Alexander Tarkhov

License

This project is licensed under the MIT License - see the LICENSE file for details.

Github

https://github.com/tarkhov/postboot

Comments(6)

  • 1

    Upcoming features

    • [x] Card size.
    • [x] Card dark style.
    • [x] Horizontal collapse. #17496
    • [x] Scrolled navbar nav.
    • [x] Navbar nav and container horizontal padding fixes .navbar-container.
    • [x] Replace class like .font-size-1 to .fs-1. - https://github.com/twbs/bootstrap/issues/27365
    • [x] Replace .font-weight-normal like classes to .fw-400.
    • [x] Add .breadcrumb-light color scheme.
    • [x] Sidebar modal.
    • [x] Remove too much colors.
  • 2

    polyfills

    Since you have removed jquery I expect that you use babel polyfills for ES6 and some Node patching polyfills from somelwhere else. Am I right?

    Can you describe you solution related to plyfills in several words? Who is responcible to load them, which should be load and etc..

  • 3

    Цвета

    Удаление цветов весьма огорчает. Понятно, что без них библиотека сильно похудела, что здорово, но это была киллер-фича. Возвращать вы их вряд ли будете, форкать и поддерживать, добавляя все последующие изменения кроме этих, сильно не хочется. Недолго длилось счастье. :-( Если всё-таки возможно, обдумайте, пожалуйста, какой-то компромиссный вариант, например, вынос в дополнительный стиль.

  • 4

    Make examples responsive for following articles

    Border

    • [x] Responsive

    Button

    • [x] Responsive block

    Card

    • [x] Image left - move this example to templates
    • [x] Image right - move this example to templates
    • [x] Sizes

    Collapse

    • [x] Horizontal

    Dropdown

    • [x] Arrows
    • [x] Menu sizes

    Flex

    • [x] Align
    • [x] Align content

    Grid

    • [x] Wide responsive containers
    • [x] Wide column sizes
    • [x] Gutter spacing

    List group

    • [x] Sizes - on tablet
    • [x] Horizontal flush
    • [x] Striped

    Nav

    • [x] Active link
    • [x] Sizes
    • [x] Tabs bottom - hide extra items
    • [x] Tabs material - hide extra items in the top and bottom tabs

    Navbar

    • [x] Dropdown menu
    • [x] Expand on mobile
    • [x] Nav align left
    • [x] Nav align right
    • [x] Nav sizes
    • [x] Scrollable - navbar brand
    • [x] Sizes
    • [x] Toggler triple bar
    • [x] Container
    • [x] Height padding vertical

    Position

    • [x] Directions

    Sidebar

    • [x] Modal - on mobile
    • [x] Expand
    • [x] Sizes
    • [x] Nav sizes

    Size

    • [x] Full width and height

    Text

    • [x] Opacity colors - hyphenation
    • [x] Hover colors - hyphenation
    • [x] Opacity hover colors - hyphenation
    • [x] State colors - hyphenation

    Typography

    • [x] Responsive headings
  • 5

    Add copy button to source code examples

    image

    <button type="button" class="btn btn-1 btn-outline-primary" style="
    position: absolute;
    top: .75rem;
    right: .75rem;
">Copy</button>
  • 6

    Add vertical progress percent transform

    <div class="progress progress-vertical mr-gutter" style="height:300px;">
  <div class="progress-bar" style="height:25%;">
    <span style="transform: rotate(-90deg);">25%</span>
  </div>
</div>

Popular Tag

Related