# withFront
`v1.6.41`
## The Front-end Tools and basic configs that i use for every project [see demo](https://arturmamedov.github.io/withFront/)
[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
```html
```
##### 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
```javascript
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)
```html
element
element
element
element
element
element
element
element
```
__.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:
```css
/* 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);
```html
```
* 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](https://uxsolutions.github.io/bootstrap-datepicker/))
```html
```
For add a single linked datepicker with visual range to your forms use this:
```html
```
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:
```html