Boostrap4 Plus

Boostrap 4 Plus MODX extra

Logo ResourceSpace Logo Wordpress Logo Prestashop Logo Joomla

Boostrap 4 Plus is a MODX plugin extending Boostrap 4 MODX extra with additional CSS styles and useful jQuery plugins.

Bootstrap 4 MODX extension is available for free here.

Buttons styles

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

Styles come from utilities.css

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