MENU


Miscellaneous Libraries

Great for emphasis, home pages, sliders, and attention-guiding hints, Animate.css is a library of ready-to-use animations.


RESETRUNFULL
<!DOCTYPE html><html><head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
</head><body>
   <h1 class="animate__animated animate__bounce"> pre-defined class </h1>
   <h2 style="animation:lightSpeedInLeft 3s;"> pre-defined @keyframe </h2>
</body></html>

PurifyCSS is a tool that takes content (HTML/JS/PHP/etc.) and CSS, and returns only the used CSS. It does not modify the original CSS files. You can write to a new file, like minification.If your application is using a CSS framework, this is especially useful as many selectors are often unused. The tool is available online here.

Normalize.css is a modern, HTML5-ready alternative to CSS resets (4.1.9). It makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

Modernizr tells you what HTML, CSS, and JavaScript features the user's browser has to offer.

Depending on the browser, either <html class="cssgradients"> or <html class="no-cssgradients"> will be produced, thus you can do the following: 
.no-cssgradients .header {
  background: url("images/glossybutton.png");
}
.cssgradients .header {
  background-image: linear-gradient(cornflowerblue, rebeccapurple);
}

HTML5 Boilerplate is a set of HTML, CSS, JavaScript, and Image files that you can use to jumpstart your web development process. The web's most popular front-end template, it helps you build fast, robust, and adaptable web apps or sites.

Below is its 'index.html' file:


<!doctype html><html class="no-js" lang=""><head>  
   <meta charset="utf-8"> 
   <title></title>  
   <meta name="description" content="">  
   <meta name="viewport" content="width=device-width, initial-scale=1">  
   
   <meta property="og:title" content="">  
   <meta property="og:type" content="">  
   <meta property="og:url" content="">  
   <meta property="og:image" content="">  
   
   <link rel="manifest" href="site.webmanifest">  
   <link rel="apple-touch-icon" href="icon.png"> 
   <!-- Place favicon.ico in the root directory -->  
   
   <link rel="stylesheet" href="css/normalize.css">  
   <link rel="stylesheet" href="css/main.css">  
   
   <meta name="theme-color" content="#fafafa">
</head><body>  
   <!-- Add your site or application content here -->  
   <p>Hello world! This is HTML5 Boilerplate.</p>  
   <script src="js/vendor/modernizr-3.11.2.min.js"></script>  
   <script src="js/plugins.js"></script>  
   <script src="js/main.js"></script>  
   
   <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->  
   <script>
      window.ga = function () { ga.q.push(arguments) }; 
      ga.q = []; 
      ga.l = +new Date;
      ga('create', 'UA-XXXXX-Y', 'auto'); 
      ga('set', 'anonymizeIp', true); 
      ga('set', 'transport', 'beacon'); 
      ga('send', 'pageview')  
   </script>  
   <script  src="https://www.google-analytics.com/analytics.js" async></script>
</body></html>

Sizzle is a pure-JavaScript CSS selector engine designed to be easily dropped into a host library.