Zurb Foundation Customize XLarge XXLarge Column

this is the SCSS I whipped up for it, I included a divide class to divide the page into the specified numbers
it is included a divided class to divide the page into the specified numbers
// xlarge queries (1441px to 1920px)
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
  @for $i from 1 through $total-columns {
    .xlarge-divide-#{$i} {
      width: #{100 / $i}% !important;
    }
    .xlarge-#{$i} {
      width: #{(100/$total-columns)*$i}% !important;
    }
  }
}
// xxlarge queries (1921px up)
@media only screen and (min-width: 120em) {
  @for $i from 1 through $total-columns {
    .xxlarge-divide-#{$i} {
      width: #{100 / $i}% !important;
    }
    .xxlarge-#{$i} {
      width: #{(100/$total-columns)*$i}% !important;
    }
  }
}

Disable Frontend use only CMS

To disable the Frontend interface of the website and leave only CMS, Put this in your functions.php
add_action('init', 'redirect_to_backend');

function redirect_to_backend() {
    if(
        !is_admin() &&
        !is_wplogin() 
    ) {
    wp_redirect(site_url('wp-admin'));
    exit();
  }
}

remove emoji code in WordPress

This’s the code WordPress adds in your page about emoji icons
window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/your-url\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.2.1"}};
    !function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f;c.supports={simple:d("simple"),flag:d("flag")},c.supports.simple&&c.supports.flag||(f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);


img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}
you can remove in functions.php (Wordpress Theme) by add the following lines
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );

Revert a Git repository to a previous commit

I want to go back to HEAD being at 15ab882

SCSS Mixins to create Background Gradient

Simple and effective when you need to background gradient and orientation.

SCSS Mixins to create triangles

you just specify color , size and direction of your element
now,it's going to come out

Minifying CSS Using Gulp - Step By Step

Easy step to minify your css in Visual Studio Code
1.Install Gulp and some plug-ins
npm install -g gulp
npm install gulp-autoprefixer --save-dev
npm install gulp-csso --save-dev
npm install gulp-sass --save-dev
npm install gulp-rename --save-dev
npm install gulp-minify-css --save-dev