STYLE SWITCHER

HTML 5

Create precise animations with animista.net

Create precise animations with animista.net

CSS animations on demand. Build animations with real time testing.

animista.net helps you to test and create animations without having to waste time writing code, saving it and then refresh browser. The code created by this online tool is versatile and includes support for older browser versions. Although some ninja coders prefer to avoid online code generators such as animista.net, the savings in time cannot be ignored. The number of options offered by this code generator to customize your animation will leave you speechless.

Open Animista
More
Prevent full width inner div from getting cut off when scrolled within parent

Prevent full width inner div from getting cut off when scrolled within parent

Prevent full width inner tag from getting cut off when parent is set to overflow auto.

When the browser window is smaller than the content within a block tag, and you scroll to the right, then scrolled child tag will move left with the rest of the page rather than occupying 100% of the width of the available scroll area.

This scenario is commonly faced by UI developers. The parent tag is set to overflow auto, however the child tag gets cut off when it's width is lesser than the browser view port. This situation can be solved by the use of the following code within the wrapping parent tag.

display: inline-block;
position: relative;
min-width: 100%;
overflow: visible;
Open fiddle
More
Select2 – The jQuery replacement for select boxes

Select2 – The jQuery replacement for select boxes

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
  • In your language
  • Remote data support
  • Theming
  • Fully extensible
  • Dynamic item creation
  • Full browser support

Installation

In order to use Select2, you must include the compiled JavaScript and CSS files on your website. There are multiple options for including these pre-compiled files, also known as a distribution, in your website or application.
Using Select2 from a CDN
A CDN (content delivery network) is the fastest way to get up and running with Select2! Select2 is hosted on both the cdnjs and jsDelivr CDNs. Simply include the following lines of code in the <head> section of your page:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

Single select boxes

Select2 was designed to be a replacement for the standard <select> box that is displayed by the browser. By default it supports all options and operations that are available in a standard select box, but with added flexibility.
<select class="js-example-basic-single" name="state"> 
    <option value="AL">Alabama</option> 
    ... 
    <option value="WY">Wyoming</option> 
</select>
Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call .select2() on any jQuery selector where you would like to initialize Select2.
// In your Javascript (external .js resource or <script> tag) 
$(document).ready(function() { 
    $('.js-example-basic-single').select2(); 
});
Website
More
Lazy Load Images for Website Performance

Lazy Load Images for Website Performance

Lazy loading images means loading images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser’s viewport. This means that if users don’t scroll all the way down, images placed at the bottom of the page won’t even be loaded.

Why Should You Care About Lazy Loading Images?

There are at least a couple of excellent reasons why you should consider lazy loading images for your website:
  • If your website uses JavaScript to display content or provide some kind of functionality to users, loading the DOM quickly becomes critical. It’s common for scripts to wait until the DOM has completely loaded before they start running. On a site with a significant number of images, lazy loading — or loading images asynchronously — could make the difference between users staying or leaving your website.
  • Since most lazy loading solutions work by loading images only if the user has scrolled to the location where images would be visible inside the viewport, those images will never be loaded if users never get to that point. This means considerable savings in bandwidth, for which most users, especially those accessing the web on mobile devices and slow-connections, will be thanking you.
<img data-src="image.jpg" alt="test image">
img {
  opacity: 1;
  transition: opacity 0.3s;
}

img[data-src] {
  opacity: 0;
}
JavaScript then adds the src attribute to each img element and gives it the value of their respective data-src attributes. Once images have finished loading, the script removes the data-src attribute from img elements altogether:
[].forEach.call(document.querySelectorAll('img[data-src]'),    function(img) {
  img.setAttribute('src', img.getAttribute('data-src'));
  img.onload = function() {
    img.removeAttribute('data-src');
  };
});
Website
More
Flexible Grid

Flexible Grid

For users who can embrace the newest of technology, Flexiblegrid comes with an flex based grid. It’s the same grid you know and love, but with even better source ordering and alignment options.

Features

  • Responsive
  • Mobile First
  • Semantic
  • Readable
  • RTL Feature
  • Rails Friendly

Introduction

Get started with Flexible Grid. Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexgrid utilities. For more complex implementations, custom CSS may be necessary.

Website
More
Element – A Desktop UI Library

Element – A Desktop UI Library

Element, a Vue 2.0 based component library for developers, designers and product managers

Element is a complete and minimal framework including many useful UI components to quickly build websites and apps. The toolkit is based on Vue.js and provides all the basic elements you may need when creating a complex product (grid system, forms, navigation, notices, dialogs and more).

Website
More
Fontisto – An iconic font and CSS toolkit

Fontisto – An iconic font and CSS toolkit

Fontisto is a new iconic font curated and maintained by Kenan Gündoğan that includes more than 360 pictographic icons and a CSS toolkit for easily customising size, color, drop shadow and anything else via CSS.

Features

  • It doesn’t require JavaScript
  • Icons are infinitely scalable and look sharp on HiDPI screens
  • The icon font has been built with accessibility in mind
  • Last but not lease, it’s free for commercial use
Website
More
Font Awesome 5 Released !!!

Font Awesome 5 Released !!!

Get vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit.
Website
More
Select2 – The jQuery replacement for select boxes

Select2 – The jQuery replacement for select boxes

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
  • Fully extensible
  • Dynamic item creation
  • Full browser support
Website
More
Responsive reCAPTCHA

Responsive reCAPTCHA

The new reCAPTCHA is here. A significant number of your users can now attest they are human without having to solve a CAPTCHA. Instead with just a single click they’ll confirm they are not a robot. We’re calling it the No CAPTCHA reCAPTCHA experience.

Javascript

// Resize reCAPTCHA to fit width of container
// Since it has a fixed width, we're scaling
// using CSS3 transforms
// ------------------------------------------
// captchaScale = containerWidth / elementWidth

function scaleCaptcha(elementWidth) {
  // Width of the reCAPTCHA element, in pixels
  var reCaptchaWidth = 304;
  // Get the containing element's width
	var containerWidth = $('.container').width();
  
  // Only scale the reCAPTCHA if it won't fit
  // inside the container
  if(reCaptchaWidth > containerWidth) {
    // Calculate the scale
    var captchaScale = containerWidth / reCaptchaWidth;
    // Apply the transformation
    $('.g-recaptcha').css({
      'transform':'scale('+captchaScale+')'
    });
  }
}

$(function() { 
 
  // Initialize scaling
  scaleCaptcha();
  
  // Update scaling on window resize
  // Uses jQuery throttle plugin to limit strain on the browser
  $(window).resize( $.throttle( 100, scaleCaptcha ) );
  
});

CSS

.g-recaptcha {
  transform-origin: left top;
  -webkit-transform-origin: left top;
}
More