Bs4 paddings, margins {5}, cookie sameSite=Strict Path=/

Now .p-5, .m-5 are with Bootstrap 4 rem sizes and not in pixel.

Cookie Choice Consent cookie are sameSite=Strict and with Path=/ for work correctly with new cookies policy

Added slick-carousel js and css

v1.6.0

v1.6.0

Bootstrap3to4 classes, withBox imprvmnts, npm scripts

• Botstrap 3 classes name, override for work also in Bootstrap version is 4
  for: .pull-right/left, .img-responsive, .center-block

• withbox collapsable now switch shSwitcher in correct way

• npm run dev with verbose output

w-overlay (and some fixes)

Overlay offect with and .overlay div and also animated content inside

.w-overlay (Add overlay hover effect with a div inside element)

.animated and .from-top/bottom + left/right is used for animate content that is inside overlay and it isn't shown at start but compare on hover with the set direction

By add -inverse to .overlay or .animated the inverted behaviour will be used

Social Color's `.text-...` + `.gradient`

• Fixed w-children it wasn't called on initialization for a error of wrong param passed to it

Addded official social color's and gradient with CSS class .text-... and .gradient doc here and the file is here

Thanks to Brand Gradients

Available sociale and click here for demo

Here it all

Enabled .text-social's [+ .gradient]

• .text-facebook .gradient
• .text-instagram .gradient
• .text-whatsapp .gradient
• .text-tripadvisor .gradient
• .text-flickr .gradient
• .text-skype .gradient
• .text-youtube .gradient
• .text-gmail .gradient
• .text-soundcloud .gradient

Here an example of implementation

w-target/w-scroll, security fixes (and dev grunt watcher)

Animate scroll of #hash anchor and put the window to right place with topOffset

• data-keep-hash [false] If #hash anchor is needed in url set true, otherwise u will not see the #hash in url
  
• data-top-offset [10] The NEGATIVE offset from top (for not cover things with navbar or other things)
  
• data-animation [1000] The duration of scroll animation

    <a type="button" href="#target-block" class="btn btn-primary w-scroll">
        Bottom Button
    </a>

Add target highlight to something

• data-target [-] CSS Selector for select the element on which apply
• data-auto-close [8000] Bool or the ms for close
• data-taregt-class [on-target] The class to add (default have CSS animation but it must be on the #anchor element also)

    <a type="button" href="#target-block" class="btn btn-primary w-target" data-target="#target-block">
        Bottom Button
    </a>

Bottom Buttons w-bottom_btns.css & WhatsApp Mobile/Desktop URL

Bottom Buttons w-bottom_btns.css

Div .bottom-buttons with grouped bottom buttons .b-btn, .b-btn_circle, b-btn_whatsapp

Also in .bottom-buttons.horizontal or .bottom-buttons.vertical style

<!-- Bottom Buttons -->
<div class="bottom-buttons vertical">
    <!-- Anchor to Email form -->
    <a href="#ajaxsend" class="text-center b-btn b-btn_circle bg-dark">
        <i class="fa fa-envelope fa-2x text-white-a"></i>
    </a>

    <!-- Admin helper -->
    <div class="text-center b-btn b-btn_circle bg-info">
        <i class="fa fa-cog fa-2x"></i>
    </div>

    <!-- WhatsApp Button https://faq.whatsapp.com/en/android/26000030/ -->
    <a href="https://wa.me/1234567890?text=Salve,%20desidero%20ricevere%20informazioni%20per%20un%20soggiorno%20presso%20il%20vostro%20Hotel.%20Grazie!" class="b-btn b-btn_circle b-btn_whatsapp" target="_blank">
        <i class="fab fa-whatsapp"></i>
    </a>

    <!-- Facebook Messenger Button https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/ -->
    <div id="fb-root" class="b-btn"></div>

    <!-- Go2Top {css: .go2top, js: LayoutGo2Top} -->
    <div class="go2top hidden-xs text-center b-btn">
        <i class="fa fa-chevron-up"></i>
        <p class="hidden-sm m-0">Torna su</p>
    </div>
</div>

Social

WhatsApp url Mobile and Desktop

WhatsApp Button https://faq.whatsapp.com/en/android/26000030/

• Replace 1234567890 with your desired phone number
• text=The message must be url_encoded use https://www.urlencoder.org/ for get text=The%20message%20must%20be%20url_encoded

<a href="https://wa.me/1234567890?text=Salve,%20desidero%20ricevere%20informazioni%20per%20un%20soggiorno%20presso%20il%20vostro%20Hotel.%20Grazie!" class="b-btn b-btn_circle b-btn_whatsapp whatsapp-weburl" target="_blank">
    <i class="fab fa-whatsapp"></i>
</a>

File js/social/w-whatsapp.js This is the MOBILE URL and it will be replaced to DESKTOP version (not worry :D)

The mobile first strategy is used cause most people decide to not show WhatsApp on Desktop but only on mobile where it is very useful

Added 404.html Error Page

404 Error page Credits: https://codepen.io/sqfreakz/pen/GJRJOY

BuildJS with Grunt - Separated in little contextual file's and configured build tasks for withplugins.js

Now all scripts from withplugins.js have a separated file in js folder also it are separated for context

• core js/core/
  core thing without it a lot of other script doesn't work properly. If you decide to non include it, be carefoul for dependencies in doc comment of each script.

  • w-alert.js for notifications, if not included make a callback to browser alert how in form/w-ajaxsend.js
  • w-cookie.js for save information in cookies, you can simply override it with your own implementation cause it have a interface behaviour
  • w-breakpoint.js for isXs, isSm, isMd, isLg functions (trivial but )
  • w-core.js here we have withOptions object with configuration and cLog() function for debug mode

• bs js/bs/
  bootstrap tools

  • w-hash_nav.js for save #hash
  • w-wide_modal.js for auto adjust height of .modalWide on open

• form js/form/
  tools for work with form's

  • w-ajaxsave.js ajax handler for save form data and get an success or error message
  • w-ajaxsend.js handler for send an contact form trough ajax
  • w-binder.js bind an input value data to another element or input
  • w-buffer_unload.js add an buffer unload behaviour for prevent closing of page if a form input change
  • w-children_age.js input's with children age, cloned or removed on change of number of children input
  • w-cookie.js save form input values in to cookie
  • w-filter.js filter elements by it classes (like isotype but without animations)
  • w-honey_pot.js honey pot antispam (with my own workaround)
  • w-preup_image.js image upload with preview

• plugins js/plugins/
  installed plugins activator and configurator, with my prefered options for it

  • w-bootstrap_switch.js https://github.com/Bttstrp/bootstrap-switch
  • w-datepicker.js https://github.com/uxsolutions/bootstrap-datepicker
  • w-nicescroll.js https://github.com/inuyaksa/jquery.nicescroll
  • w-raty.js https://github.com/wbotelhos/raty
  • w-selectize.js https://selectize.github.io/selectize.js/
  • w-tooltip.js bootstrap tooltip

• style js/style/
  tools for styling web page

  • w-height.js equal height for all matched element's (with higher founded height)
  • w-showhide.js show hide box on click
  • w-target.js #target animation

• web js/web/

  • w-analytics.js js universal ga() and old _gaq() analytics events
  • w-cookie_choice.js cookie banner with privacy link and confirm cookie

• widget js/widget/

  • w-appear_btn.js button that appear after some time
  • w-go2top.js go to top button
  • w-loader.js loader behaviour that show a loading img.svg during all assets load

All this are concatened and builded into withPlugins.js, see gruntfile.js and customize if you want

NPM - Created package.json

npm i withfront --save