withFront

v1.6.41

The Front-end Tools and basic configs that i use for every project see demo

[EN] During my development experience i encounter a lot of tools and configs for front-end, and this is one that i used most frequently!

[IT] Durante la mia esperienza di sviluppo, ho incontrato molti tools e configurazioni, front-end, queste qui sono quelle che uso più frequentemente e che consiglio di usare a tutti!

Installation

NPM

npm i withfront --save

Bower

bower install withFront --save

*invalid-meta because i want use the camelCase

CREDITS

HTML5 Boilerplate - https://github.com/h5bp/html5-boilerplate

Bootstrap - https://github.com/twbs/bootstrap

HEAD - https://github.com/joshbuchea/HEAD

Dependency and many Thank to:

jQuery - https://github.com/jquery/jquery

... raty, bootstrap-datepicker, selectize, iCheck, SVG-Loaders, nicescroll, bootstrapSwitch, bootstrap-daterangepicker, js-cookie, see bower.json for complete list

(you can remove the dependencies or not include script and their not will be made nothing cause there are a check before any action)

Documentation (How to use)

Adding to web page

<!-- Inside Tag head -->
<link rel="stylesheet" href="node_modules/bootstrap/css/bootstrap.min.css" type="text/css"/> <!-- bootstrap 3/4-->
<link rel="stylesheet" href="node_modules/withFront/dist/css/w-style.min.css" type="text/css"/> <!-- css tools -->

<!-- Better down in footer after all content and after include jQuery and Bootstrap -->
<script type="text/javascript" src="/node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

<script>
    // you can Configure wOptions for override withOptions
    var wOptions = {
        debug: true, // enable/disable Debug mode [defaule:false]
        wAppearBottomButton: true, // enable/disable widget/w-appear_btn.js [defaule:false]
        go2top: true, // enable/disable widget/w-go2top.js [defaule:true]
        htmlNicescroll: true, // [defaule:false]
        whatsappWeb: true, // replace WhatsApp mobile with Desktop on Desktop [defaule:true]
    };
</script>
<script type="text/javascript" src="/node_modules/withFront/withplugins.js"></script> <!-- js tools -->

You can add single file's also

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
  • w-ismobile.js detect if it is a mobile device (no like breakpoints that only check the size) jQuery.browser.mobile true/false

• 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

• social js/social/ tools for social's

  • w-whatsapp.js replace the Mobile version to WhatsApp URL to Desktop one
  • In index.html you can find the code and link for Facebook Messenger implementation

• 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 it if you want

Core

Breakpoints

Detect if the width of screen is bootstrap 3 isXs, isSm, isMd, isLg

Or in bootstrap 4 style if it is for is4sm, is4md, is4lg, is4xl or upper

var isXs = window.matchMedia("(max-width: 768px)"),
    isSm = window.matchMedia("(min-width: 768px) and (max-width: 991px)"),
    isMd = window.matchMedia("(min-width: 992px) and (max-width: 1199px)"),
    isLg = window.matchMedia("(min-width: 1200px)"),
    //Bootstrap4 style
    is4sm = window.matchMedia("(min-width: 576px)"),
    is4md = window.matchMedia("(min-width: 768px)"),
    is4lg = window.matchMedia("(min-width: 992px)"),
    is4xl = window.matchMedia("(min-width: 1200px)");

Style

Equal Height for all elements (.withEqualHeight, .weh, data-weh-ad)

@dependencies [w-breakpoints]

For set all elements to have equal height add the .withEqualHeight class to parent DOM element and the class .weh to children elements to equal.

.withEqualHeight = for small device and higher (not for xs)

.withEqualHeightInverse = for the smallest element instead of tallest

.withEqualHeightLike = for equal height element like the element with .wehl class

And to all child add class .weh and .wehl if you wont a height like specific element

If you want additional height to all elements (ex: for add a button with absolute position etc.) Add data-weh-add="50" to children .weh elements (add 50px to all)

<div class="row withEqualHeight">
    <div class="col-sm-4 weh">element</div>
    <div class="col-sm-4 weh">element</div>
    <div class="col-sm-4 weh">element</div>
    <div class="col-sm-4 weh">element</div>
</div>


<!-- You may need to add some additional height for place a absolute botton or whatever else -->
<!-- with `data-weh-add="??px"` you can do it -->

<div class="row withEqualHeight" data-weh-add="70px">
    <div class="col-sm-4 weh">element</div>
    <div class="col-sm-4 weh">element</div>
    <div class="col-sm-4 weh">element</div>
    <div class="col-sm-4 weh">element</div>
</div>

.withEqualHeight not work for Extra Small device xs cause often in mobile we have one row only for each element

use .withEqualHeightAll for add equal height also in mobile xs

Paddings & Margins

extend Bootstrap .m{direction}-{size}, .p{direction}-{size}

For add padding or margin to an element use the helper classes:

From v1.4.0 also with Bootstrap 4 style: (.mp-{x}, .mt-{x}, .mb-{x}, .ml-{x}, .mr-{x}, .my-{x}, .mx-{x})

and From v1.6.0 without .p-5, .m-5, .py-5 etc. cause Bootstrap also use this number for rem calculation margin and paddings. (but for 5px you can still use .m-t-5, .m-r-5, .m-b-5, .m-l-5, and for paddng the same .p-t-5, .p-r-5, ...)

http://getbootstrap.com/docs/4.1/utilities/spacing/

The difference is that withFront use static spacing with pixel's:

/* this mean margin on all directions of 5px */
.m-10 { margin: 10px !important; }
/* same for padding */
.p-10 { padding: 10px !important; }

/* this mean margin on t = TOP of 5px */
.mt-50 { margin-top: 10px !important; } /* Bs4 */
.m-t-5 { margin-top: 5px !important; }
/* same for padding */
.pt-10 { padding-top: 10px !important; } /* Bs4 */
.p-t-5 { padding-top: 5px !important; }

/* this mean margin r = RIGHT of 5px */
.mr-10 { margin-right: 10px !important; } /* Bs4 */
.m-r-5 { margin-right: 5px !important; }
/* same for padding */
.pr-10 { padding-right: 10px !important; } /* Bs4 */
.p-r-5 { padding-right: 5px !important; }

/* And rispectively b = BOTTOM, l = LEFT */
.mb-10 { margin-bottom: 10px  !important; } /* Bs4 */
.ml-10 { margin-left: 10px  !important; } /* Bs4 */
.m-b-5 { margin-bottom: 5px  !important; }
.m-l-5 { margin-left: 5px  !important; }
/* same for padding */
.pb-10 { padding-bottom: 10px  !important; } /* Bs4 */
.pl-10 { padding-left: 10px  !important; } /* Bs4 */
.p-b-5 { padding-bottom: 5px  !important; }
.p-l-5 { padding-left: 5px  !important; }

/* And there are another two things v = VERTICAL 
 * for margin top & bottom- Bs4: y = VERTICAL 
 */
.my-10 { margin-top: 10px  !important; margin-bottom: 10px  !important;} /* Bs4 */
.m-v-5 { margin-top: 5px  !important; margin-bottom: 5px  !important;}
/* same for padding */
.py-10 { padding-top: 10px  !important; padding-bottom: 10px  !important;} /* Bs4 */
.p-v-5 { padding-top: 5px  !important; padding-bottom: 5px  !important;}

/* And h = HORIZONTAL 
 * Bs4: x = HORIZONTAL for margin right & left 
 */
.mx-10 { margin-left: 10px  !important; margin-right: 10px  !important;} /* Bs4 */
.m-h-5 { margin-left: 5px  !important; margin-right: 5px  !important;}
/* same for padding */
.px-10 { padding-left: 10px  !important; padding-right: 10px  !important;} /* Bs4 */
.p-h-5 { padding-left: 5px  !important; padding-right: 5px  !important;}

The same thing for add padding change the m that stand for marrgin to p padding and you done!

You can use this values with this classes m-/p-[t,r,b,l,v,h]-0,5,10,15,20,25,30,35,40,50,60,70,80,90,100,150,200

Web tools

Cookie Choice Banner

Include alone js/web/w-cookie_choice.js, css/web/w-cookie_choice.css or if u use build files this are yet included in dist/js/w-plugins.js and dist/css/w-style.css

Cookie is: document.cookie = displayCookieConsent=y; Path=/; SameSite=Strict; expires=fn(plus one year from now);

    <script>
       document.addEventListener('DOMContentLoaded', function (event) {
           cookieChoices.showCookieConsentBar("Questo sito utilizza i cookies per migliorare l'esperienza di navigazione. Utilizzando il sito l'utente accetta tutti i cookies.",
               'OK', 'Privacy Policy', "/privacy-url");
       });
    </script>

• En: This site uses cookies to improve the browsing experience. By using this site you agree to all cookies
• Fr: Ce site utilise des cookies pour améliorer l'expérience de navigation. En utilisant ce site, vous acceptez tous les cookies
• De: Diese Seite benutzt Cookies , um den Browser-Erfahrung zu verbessern. Durch die Nutzung der Website erklären Sie sich mit allen Cookies
• Es: Este sitio utiliza cookies para mejorar la experiencia de navegación. Al usar este sitio usted acepta todas las cookies
• Hu: Ez a webhely cookie-kat használ a böngészési élmény javítása érdekében. Az oldal használatával elfogadja az összes cookie-t
• Nl: Deze site maakt gebruik van cookies om de browser-ervaring te verbeteren. Door deze site te gebruiken, gaat u akkoord met alle cookies
• Pl: Ta witryna używa plików cookie, aby poprawić doświadczenie przeglądania. Korzystając z tej witryny zgadzasz się na wszystkie pliki cookie
• Pt: Este site usa cookies para melhorar a experiência de navegação. Ao usar este site você concorda com todos os cookies
• Ru: Нажимая кнопку или продолжая использовать сайт, вы разрешаете нам собирать информацию посредством использования файлов «cookie»

JS - Form

Datepicker (bootstrap-datepicker)

<!-- Bs Date Picker -->
<link rel="stylesheet" href="/node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css"/>

<!-- Bs Date Picker -->
<script src="/node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="/node_modules/bootstrap-datepicker/dist/locales/bootstrap-datepicker.it.min.js" data-lang="it" id="bsdp_lang_code"></script>

For add a single linked datepicker with visual range to your forms use this:

<div class="period">
    <div class="form-group">
        <input type="text" name="checkin" id="checkin" class="form-control checkin range">
    </div>
     <div class="form-group">
         <input type="text" name="checkout" id="checkout" class="form-control checkout range">
     </div>
</div>

in the div .period we can set options with data-attribute

Example: data-date-start-date="10/01/2019" default:0d - today

data-date-end-date="25/12/2019" default:none - infinite

Al available options: https://bootstrap-datepicker.readthedocs.io/en/stable/options.html

Children Age to Form

You can add a children number input that show the fields for each children age:

<!-- 1 add class `children_age_form` to form -->     
<form class="children_age_form">

<!-- 2 create input with `child_num_input` class and min/max attr optionaly -->
<input type="number" class="form-control child_num_input" min="0" max="5" name="num_children">
     
<!-- 3 add hidden `child_ageClone` input inside form -->
<div class="col-sm-2 pull-right display-none" id="child_ageClone">
    <div class="form-group">
        <input type="number" placeholder="0" class="form-control" name="age_children[]" value="1" max="17" min="0" disabled/>
    
        <label>Children <span class="jq_child_num">1</span></label>
    </div>
</div>


<?php
    // and in PHP or whatever you use get the data
    $children_number = $_POST['num_children']); // 3
    $children_age = impolode(', ', $_POST['age_children']); // 3, 6, 7
?>    

Filter HTML elements

(like isotype but without effects) So you made a list of elements with filters in the class attribute and after filter it on click on the data-filter="filter"

<!-- main container `w-filters` -->
<div class="w-filters">
    <ul>
        <!-- `w-filter` for all elements leave empty data-filter -->
        <li class="w-filter" data-filter=""></li>
        <!-- `w-filter `elements with .filter in data-filter -->
        <li class="w-filter" data-filter=".vegetable"></li>
        <li class="w-filter" data-filter=".fruit"></li>
        <li class="w-filter" data-filter=".drink"></li>
    </ul>
    
    <!-- items to filter `.w-item` and `.filter`-->
    <div class="w-item vegetable col-sm-3">
        Patatos
    </div>
    <div class="w-item vegetable col-sm-3">
        Carot
    </div>
    <div class="w-item fruit col-sm-3">
        Orange
    </div>
    <div class="w-item fruit col-sm-3">
        Apple
    </div>
    <div class="w-item drink col-sm-3">
        CocaCola
    </div>
</div>

Widget

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>

Go to top button

Button fixed on bottom of the document that appear on scroll down and on click go to the top of document

<!-- Add this to your layout -->
<div class="go2top hidden-xs text-center">
    <i class="fa fa-chevron-circle-up"></i>
    <p class="hidden-sm">Torna su</p>
</div>

And .go2top in css handle the positioning and style of button. The js LayoutGo2Top show the button on scroll down and hide when we are on top of document and scroll up document on click.

With Appear Bottom Button w-bottom_btn.js/css

Button fixed on bottom that appear after 5 seconds by default

data-delay 5000 - number of ms after that the button will be displayed from bottom

data-left 105 - The position from left (with media queries it change in mobile to 75px)

data-right 105 - The position from right (with media queries it change in mobile to 75px)

data-bottom 105 - The position from bottom (with media queries it change in mobile to 20px)

If you change the position remember the @mediaqueries also

<a type="button" href="javascript:;" class="wabb right btn btn-primary" data-bottom="20" data-delay="2000">
    Bottom Button .wabb <i class="fa fa-check"></i>
</a> 

You can enable or disable it with wOptions = { wAppearBottomButton: false }

And .go2top in css handle the positioning and style of button. The js LayoutGo2Top show the button on scroll down and hide when we are on top of document and scroll up document on click.

Loader (for entire document or only inside some element)

Thanks to SamHerbert/SVG-Loaders

For add a loader to your site, that appears and automatically closes when all content is load:

<div class="loader-wrapper">
    <i class="fa fa-close fa-3x pull-right p-20 cursor-pointer loader-wrapper-close display-none"></i>
    <div class="loader">
        <img width="40" src="/bower_components/SVG-Loaders/circles.svg" alt="">

        <span class="loader-title">Caricamento contenuti, attendere qualche secondo...</span>
    </div>
</div>

You can also add inner-loader-wrapper class to loader-wrapper for include loader in a div and not over all content of document.

<div class="loader-wrapper inner-loader-wrapper">
    <i class="fa fa-close fa-3x pull-right p-20 cursor-pointer loader-wrapper-close display-none"></i>
    <div class="loader">
        <img width="40" src="/bower_components/SVG-Loaders/svg-loaders/spinning-circles.svg" alt="">

        <span class="loader-title">Caricamento contenuti, attendere qualche secondo...</span>
    </div>
</div>

Example: loader-wrapper, inner-loader-wrapper

Sliding Panel .w-sliding-panel, .w-sliding-btn

Button and bottom panel that slide out from left to right

1 - Btn with class w-sliding-btn and data-target #id of the panel to open (for standard style add sliding-btn class and right/left class for position)

2 - Panel with class w-sliding-panel, sliding-panel and the right #id (also the close icon .close-panel the panel is closed automatically on document click)

<!-- Button for open panel -->
<div class="w-sliding-btn text-center b-btn b-btn_circle bg-info"
    data-target="#adminHelper"
    data-no-close-btn="true"
>
    <i class="fa fa-cog fa-2x"></i>
</div>

<div id="adminHelper" class="w-sliding-panel sliding-panel text-center bg-info">
    <i class="close-panel fa fa-close fas fa-times fa-3x cursor-pointer abspos"></i>

    <div class="container">
        ...
    </div>
</div>

If you want to costumize the panel position and style remove class sliding-panel and add your own, remember to hide panel with negative position

.w-sliding-panel.sliding-panel {
    position: fixed;
    left: -2000px;
    bottom: 0px;
}

.w-sliding-panel.sliding-panel .close-panel {
    top: -25px;
    left: 0px;
}

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>

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

Official Colors and Gradients

Social Color's for icons, text, backgrounds css/text/social-colors.css

.text-instagram = color of instagram

.bg-instagram = background of instagram

.gradient = will be add the gradient of the social

(thank to http://www.brandgradients.com/)

Enabled .text-social's [+ .gradient] you can alo use .bg-....

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

-secondary Some social's have secondary colors in plain bg and text color (without gradient)