index.haml

!!! 5
%html
  %head
    %meta{ charset: "UTF-8" }
      %title jQuery Gridly
      %link{ href:"https://fonts.googleapis.com/css?family=Lato", rel: "stylesheet", type: "text/css" }
      %link{ href:"stylesheets/jquery.gridly.css", rel: "stylesheet", type: "text/css" }
      %link{ href:"stylesheets/sample.css", rel: "stylesheet", type: "text/css" }
      %script{ src:"javascripts/jquery.js", type: "text/javascript" }
      %script{ src:"javascripts/jquery.gridly.js", type: "text/javascript" }
      %script{ src:"javascripts/sample.js", type: "text/javascript" }
      %script{ src: "javascripts/rainbow.js", type: "text/javascript" }
      :javascript

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-31911059-1']);
        _gaq.push(['_trackPageview']);

        (function() {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

  %body
    %a{ href: "https://github.com/ksylvest/jquery-gridly"}
      %img.fork{ src: "images/fork.png", alt: "Fork" }
    .content
      %h1 jQuery Gridly
      %p Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grids. In the example below try tapping or dragging any of the bricks.
      %h2 Example
      %section.example
        .gridly
          - 20.times do
            .brick.small
              %a.delete{ href: '#' } ×
        %p.actions
          %a.add.button{ href: '#' } Add
      %h2 Installation
      %p To install download one of these packages and include the jquery.gridly.js and jquery.gridly.css files in your head with the following:
      %section.formats
        .format
          %a.zip{ href: "packages/jquery.gridly.zip" }
        .format
          %a.tar{ href: "packages/jquery.gridly.tar" }
      %pre
        %code{ data: { language: "html" } }
          = preserve do
            :escaped
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
              <script src="javascript/jquery.gridly.js" type="text/javascript"></script>
              <link href="stylesheets/jquery.gridly.css" rel="stylesheet" type="text/css" />
      %h2 Example
      %p Setting up a gridly is easy. The following snippet is a good start:
      %pre
        %code{ data: { language: "html" } }
          = preserve do
            :escaped
              <style type="text/css">
                .gridly {
                  position: relative;
                  width: 960px;
                }
                .brick.small {
                  width: 140px;
                  height: 140px;
                }
                .brick.large {
                  width: 300px;
                  height: 300px;
                }
              </style>
              <div class="gridly">
                <div class="brick small"></div>
                <div class="brick small"></div>
                <div class="brick large"></div>
                <div class="brick small"></div>
                <div class="brick small"></div>
                <div class="brick large"></div>
              </div>
              <script>
                $('.gridly').gridly({
                  base: 60, // px 
                  gutter: 20, // px
                  columns: 12
                });
              </script>
      %p.copy
        Copyright (c) 2013 - 2015 
        %a{ href: "http://ksylvest.com/" } Kevin Sylvestre
      %p.links
        %a{ href: "https://github.com/ksylvest" } GitHub
        %a{ href: "https://plus.google.com/+KevinSylvestre?rel=author" } Google
        %a{ href: "https://twitter.com/ksylvest" } Twitter