Boostrap 4 Plus MODX extra

Buttons styles

A series of classes with custom color sets. In these exemples class name is buttton name.

Styles come from utilities.css

btn-hviz-green

<a class="btn xbtn-hviz-green btn-lg"><i class="fa fa-modx" aria-hidden="true"></i> btn-hviz-green</a>

btn-hviz-green
btn-hviz-green
FR

EN
FR

EN

pdoPage

pdoPages chunks for Bootstrap 4 added.

pdopageB4PageWrapper
pdopageB4PagePrev
pdopageB4PagePrevEmpty
pdopageB4PageNext
pdopageB4PageNextEmpty
pdopageB4Page
pdopageB4PageActive
pdopageB4PageFirst
pdopageB4PageFirstEmpty
pdopageB4PageLast
pdopageB4PageLastEmpty

pdoMenu

pdoMenu chunks, CSS and JS for Bootstrap 4.

These chunks also allow to display submenus.
- pdomB4TplOuter
- pdomB4TplInner
- pdomB4TplInnerRow
- pdomB4ParentRow
- pdomB4Tpl

Example

CSS


<link href="/assets/components/bootstrap4plus/css/utilities.css" rel="stylesheet" media="all" type="text/css">

Javascript


<script src="/assets/components/bootstrap4plus/js/bootstrap4plus.js"></script>

Snippet

Don't miss to add:

&outerClass=`navbar-nav xnav-submenu`

to enable CSS and JS.

[[!pdoMenu?         
    &parents=`46`
    &level=`5`
    &showHidden=`1`
    &showUnpublished=`1`
	&firstClass=`pdom-first`
	&lastClass=`pdom-last`
    &outerClass=`navbar-nav xnav-submenu`
    &rowClass=`nav-item`
    &tpl=`pdomB4Tpl`
    &parentClass=`dropdown`
    &tplOuter=`pdomB4TplOuter` 
    &tplInner=`pdomB4TplInner`
    &tplInnerRow=`pdomB4TplInnerRow`
    &tplParentRow=`pdomB4ParentRow`
]]

Forms styles

A series of classes to easily customize bootsrap 4 forms.

Styles come from utilities.css

Remove border-radius
```
form.x-formstyle-square
```
Stealth placeholders

Light placeholders with a more lighter effect on focus.
```
form.x-placeholders-stealth
```

Tables

Table classes.

Styles come from utilities.css

Display: table
```
.x-table
```
Display: cell
```
.x-cell
```

pdoMenu (pdoTools extra)

Bootra

Template chunks to use pdoMenu with Bootstrap 4 allowing quick & easy custom output using the link_attributes TV.

b4PdoMenuTplParentRow

If Attribute x-top-only="true", only output the top link without the dropdown.


<li[[+classes]]>
    [[+attributes:contains=`x-top-only="true"`:then=`
    <a class="nav-link tpl" href="[[+link]]">[[+menutitle]]</a>[[- force simple nav link]]
    `:else=`
    <a class="nav-link dropdown-toggle tplParentRow" href="[[+link]]" id="navbarDropdownMenuLink-[[+id]]" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">[[+menutitle]]</a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink-[[+id]]">
        [[+wrapper]]
    </div>
    `]]
</li>

Output exemple

With x-top-only="true", output will be:

Instead :

jsPanel

Coming soon.

Muuri JS

Responsive, sortable, filterable and draggable grid layouts (jQuery not resuired).

Muuri is a JavaScript layout engine that allows you to build all kinds of layouts and make them responsive, sortable, filterable, draggable and/or animated. Comparing to what's out there Muuri is a combination of Packery, Masonry, Isotope and Sortable. Wanna see it in action? Check out the demo on the website.

Bootstrap 4 responsive classes can be used to switch layouts on media queries.

http://haltu.github.io/muuri/

https://github.com/haltu/muuri


assets/components/bootstrap4plus/libs/muuri/0.7.1/muuri.min.js
assets/components/bootstrap4plus/libs/muuri/0.7.1/muuri.js

imagesLoaded

JavaScript is all like "You images done yet or what?". Detect when images have been loaded.

https://github.com/desandro/imagesloaded/


assets/components/bootstrap4plus/libs/4.14/imagesloaded.js
assets/components/bootstrap4plus/libs/4.14/imagesloaded.pkgd.js
assets/components/bootstrap4plus/libs/4.14/imagesloaded.pkgd.min.js

Breakpoints.js

A a lightweight, pure javascript library for attaching callbacks to breakpoints.

https://github.com/thecreation/breakpoints-js


assets/components/bootstrap4plus/libs/breakpoint/1.0.5/
assets/components/bootstrap4plus/libs/breakpoint/1.0.5/js/breakpoints.js
assets/components/bootstrap4plus/libs/breakpoint/1.0.5/js/breakpoints.min.js

Boostrap4 Plus