JSFiddle

  • Basic Column Chart - CanvasJS JavaScript Charts #11 is the latest revision

    Basic Column Chart - CanvasJS JavaScript Charts

    var chart = new CanvasJS.Chart("chartContainer",
    	{
            
          data: [
          {
            type: "column",
            dataPoints: [
            { x: 10, y: 71 },
            { x: 20, y: 55},
            { x: 30 ...
  • Vertical align image with flex #2 is the latest revision

    Vertical align image with flex

    <div>
      <img src="http://i.giphy.com/xYHscQ1Np55i8.gif" width="300">
    </div>
  • Vertical align with flexbox #4 is the latest revision

    Vertical align with flexbox

    <div>
      <img src="http://i.giphy.com/xYHscQ1Np55i8.gif" width="300">
    </div>
  • Event delegation pure JS #3 is the latest revision

    Very simple implementation of event delegation in pure JS

    var relayEvent = function(element, target, eventName, fn){
    
    	var targetEl  = document.querySelector(target);
      var elementEl = document.querySelector(element);
      
    	elementEl.addEventListener(eventName ...
  • Extract colors from an image #295 is the latest revision

    Get color swatches from image with Vibrant.js. Extract colors from an image.

    dropZone = document.getElementById "drop"
    
    handleFileSelect = (event) ->
        event.stopPropagation()
        event.preventDefault()
        
        files = event.dataTransfer.files
        f = files[0]
        reader = new FileReader ...
  • Custom checkboxes CSS Animation #23 is the latest revision

    Custom checkboxes CSS Animation

    <!-- inspired by https://dribbble.com/shots/1927803-Toggle -->
    
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
        
    <form action="">
        <label>
            <input type="checkbox" />
            <div><i class="fa fa-dribbble"></i></div>
        </label>
            
        <label>
            <input type="checkbox" checked />
            <div><i class="fa fa-jsfiddle"></i></div>
        </label>
        
        <label>
            <input type="checkbox" />
            <div><i class="fa fa-github"></i></div>
        </label>
        
        <label>
            <input type="checkbox" />
            <div><i class="fa fa-twitter"></i></div>
        </label>
    </form>
    
  • 123

    No-Library (pure JS), HTML, CSS, JavaScript

    No code. How about adding some?
  • Responsive text columns #9 is the latest revision

    Responsive text columns

    <div class="cols num_2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat veritatis pariatur tempora suscipit. Provident eveniet laborum necessitatibus odio quis dolor ...</div>
  • SCSS flexible/fluid column mixin #9 is the latest revision

    SCSS flexible/fluid column mixin

    <div class="cols num_2">
        <div class="col"></div>
        <div class="col"></div>
    </div>
    
    <div class="cols num_3">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
    
    <div class="cols num_4">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
    
    <div class="cols num_5">
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
  • EpicSlider - Elements Slider in CoffeeScript #41 is the latest revision

    EpicSlider - Elements Slider in CoffeeScript

    class EpicSlider
    
      constructor: (options = {}) ->
    
        @options =
          slidesPerPage: options.slidesPerPage or 3
          slider:        options.slider
          slides:        options.slides
          pagination:    options.pagination
          transition ...