arturmamedov / withfront Goto Github PK

View Code? Open in Web Editor NEW

8.0 4.0 3.0 5.67 MB

HTML, CSS, JS, .htaccess, .gitgnore and more That i use in every project of website with Bootstrap and jQuery

License: MIT License

CSS 24.73% HTML 18.42% JavaScript 56.86%

jquery bootstrap frontend-web css html javascript bootstrap-datepicker datepicker loader loader-wrapper

withfront's People

Contributors

Stargazers

Watchers

Forkers

withartur erikafrancesconi victorthedev

withfront's Issues

npm Node Package Manager

for now npm i https://github.com/arturmamedov/withFront --save

.htaccess must have commented rules or with installation it reqrite things directly!!!

Or maybe must be called in a different way for not apply his rules

v1.4.5 and greater not show the `flag-icon-en`

Cause the path from dist/css folder not reach anymore the flag-icon-css package

2possibility:

copy the necessary flag to dist of withfront
change the path for refer to new flag-icon-css location

ajaxsend h4 error add margins that are not beutifull for nothing

/* contact form errros - remove padding of h4 where unexpected it not centered vertically */
.alert.errors h4 {
margin-bottom: 0px !important;
}

Social color's and background proposal

Something like this for all most important social's

.text-insta {
    background: -webkit-linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bg-insta {
    background: #833ab4;
    background: -moz-linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
    background: -webkit-linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
    background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#833ab4', endColorstr='#e1306c',GradientType=1 );
}

Each user must decide the size bu it own, to remove: min-height

withFront/css/thirdparty/fontawesome47.css

Line 26 in 0c28a92

min-height: 200px;

datepicker - Specify that document must include datepicker library for work, write the classes that are needed for work (i can to add a debug var tre/false and console.info thing that are not work in development)

Bootstrap 3 classes work in Bs 4

Bs3 style -> Bs4 style

center-block -> mx-auto
img-responsive -> img-fluid

go2top break and not have fallback

with bottom-buttons go2top must be moved inside this new div for btn's and this break go2top in single version so the update of library must have also the update of html code, its no good!

Proposal map black and white with a css class

/* Map Background Black & White */
.map-bg-bw {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

whatsapp no more needded cause wa.me work well mobile and desktop

Flag Icon path?

Current flag icon path are wrong

/* OVERRIDE for flag icon (for more intuitive use then GB-en) */
.flag-icon-en {
    background-image: url(../bower_components/flag-icon-css/flags/4x3/gb.svg);
}

.flag-icon-en.flag-icon-squared {
    background-image: url(../bower_components/flag-icon-css/flags/1x1/gb.svg);
}

Or i open /bower_components/ from root or i suppose that booth packages are in /bowercomponents/ floder.

.w-overlay improvments

I think i can avoid use of additional div with .overlay class by use of pseudo elements, shure work with image, need to try with div and other's thing

.w-overlay {
   posiiton: relative;
   overlay: hidden;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.w-overlay:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #252525;
    opacity: 0;
}

.w-overlay:hover:after {
    opacity: 0.7;
}

Add .display-none-imp { display: none !important; }

For have an !important rule for force the display

.display-none-imp {
	display: none !important;
}

A little but usefull function for set an element to full windows height

A little but usefull function for hero primary section on website for fit the entire height of windows and plus the min-height if present in data-min-height

viewportHeight = function() {
    return window.innerHeight || document.documentElement.clientHeight
}
function setHeight(element) {
    min_height = element.data('min-height');
    if (min_height > viewportHeight()) {
        element.height(min_height);
    } else {
        element.height(viewportHeight());
    }
}
setHeight($('.section-hero.cover'));
$(window).on('resize', function () {
    setHeight($('.section-hero.cover'));
});

Maybe add it to withplugins.js

HTML 5 Native Validation of form with sticky/fixed Navbar scroll-padding-top

Must add this new feuatures supported by major browser
https://caniuse.com/?search=scroll-padding

html {
	scroll-padding-top: 130px;
}

That make browser scroll to the field with error but moved from top for not haev this field hide from sticky/fixed navbar

Make .ajaxsend form configurable for enable or disable

Because some times we not need it event trigger

whatsappWeb set to true by default broke the js if not found the whatsapp url element

Error:

 TypeError: $(...).attr(...) is undefined[Ulteriori informazioni] withplugins.js:853:42
    <anonima> withplugins.js:853
    jQuery 2

Code:

if(withOptions.whatsappWeb && !jQuery.browser.mobile){
    var mobile_wa = $(".whatsapp-weburl").attr('href').replace('?text=', '&text');
    mobile_wa = mobile_wa.replace('https://wa.me/', 'https://web.whatsapp.com/send?phone=+39')

    $(".whatsapp-weburl").attr('href', mobile_wa);
}

maybe add also the check of an element on page

Need the gDiv alert

withFront/withplugins.js

Line 194 in b41677b

$('.child_num_input', form).val(5);

Add disabled uxsolution/datepicker

Add disabled style to datepicker

/* disbled dates */
.datepicker table tr td.disabled, .datepicker table tr td.disabled:hover {
    color: #EEEEEE !important;
    cursor: no-drop !important;
}

Wrong documentation for bs-datepicker

<div id="period">

must be!!!!!!

<div class="period">

Margin/Padding tools in Bootstrap4 style missed

For xs-, sm- tools it present and for general no