Get UIkit CDN Local Fallback Script

UIkit is an awesome framework like bootstrap. Many developers implement it to power their websites as an alternative choise to bootstrap. So, it's worth noting to make your website loads quickly by linking it to a CDN provider.

We have working script that if UIkit CDN links fail to load, then local library will be used as an alternative fallback. Please, follow the instruction in the source code.


jQuery Fallback Script

UIkit CDN fallback script need jQuery to run first. So, we also get jQuery CDN with fallback to local server.

<!-- jQuery CDN link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<!-- jQuery CDN fallback script -->
<script>window.jQuery || document.write('<script src="assets/js/jquery-2.2.0.min.js"><\/script>')</script>

Change on the hightlighted text (yellow mark) with the address of your local server (jQuery that available on your local server).


UIkit CDN Fallback Script

UIkit CDN fallback script that working for me are on the example below:

(function($){
  var $span = $('<span class="uk-icon-home" style="display:none"></span>').appendTo('body');
  if ($span.css('fontFamily') !== 'FontAwesome' ) {
    // Local library
    $('head').prepend('<link href="assets/css/uikit.almost-flat.min.css" rel="stylesheet" />');
    document.write('<script src="assets/js/uikit.min.js"><\/script>');
   }
  $span.remove();
})(jQuery);

Change also on the hightlighted text (yellow mark) with UIkit CSS and Javascript library on your local server.


Example: Put It All Together

Full example of UIkit CDN fallback that are ready to go. Just copy the example below and try it yourself!

<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>UIKIt CDN fallback - by dul.web.id</title>
    <meta name="description" content="" />

    <!-- UIkit CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/css/uikit.almost-flat.min.css" />

  </head>
  <body>
    <!-- Begin Content  -->
    <button class="uk-button uk-button-danger">This is UIkit button - danger</button>


    <!-- ================================================
    - - - - - - - - - - - SCRIPT - - - - - - - - - - - -
    ================================================= -->
    <!-- jQuery CDN link -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <!-- jQuery CDN fallback script -->
    <script>window.jQuery || document.write('<script src="assets/js/jquery-2.2.0.min.js"><\/script>')</script>

    <!-- UIkit JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/js/uikit.min.js"></script>

    <!-- UIkit CDN fallback script -->
    <script>
      (function($){
        var $span = $('<span class="uk-icon-home" style="display:none"></span>').appendTo('body');
        if ($span.css('fontFamily') !== 'FontAwesome' ) {
          // Local library
          $('head').prepend('<link href="assets/css/uikit.almost-flat.min.css" rel="stylesheet" />');  //local UIkit CSS
          document.write('<script src="assets/js/uikit.min.js"><\/script>'); // local UIkit js
         }
        $span.remove();
      })(jQuery);
    </script>
  </body>
</html>