ullamlaboriosam/docs/index.html.jade

Lightweight and intuitive javascript library

extends layout

block content
  header.hero
    .cover.color
    .cover.cloud
    .cover.city
    .cover.rain
    div.wrap
      div.content
        h1 Umbrella JS
        p.slogan Tiny library for DOM manipulation, events and AJAX
        pre.install https://unpkg.com/umbrellajs
        a.button.icon-g(href="https://github.com/franciscop/umbrella" target="_blank") Github
        = ' '
        a.button.icon-download(href="https://raw.githubusercontent.com/franciscop/umbrella/master/umbrella.min.js" target="_blank" download="umbrella.min.js") Download
        = ' '
        a.button.icon-jsfiddle(href="https://jsfiddle.net/franciscop/mwpcqddj/" target="_blank") Try it
      
      a.keepgoing(href="#go") ▼
  
  main#index
    section.flex.two#go
      div
        :markdown
          ## Intuitive and Documented
          It is **strongly influenced by jquery** with many similar methods so you'll feel at ease developing with Umbrella.
          
          However there are also some improvements such as with `.ajax()`, `.append()`, etc. It's all detailed here:
        a.button.icon-doc(href="documentation" target="_blank") Documentation
      div
        pre
          code.language-javascript.
            // Simple events like jquery
            u("button").on('click', function(){
              alert("Hello world");
            });

            // Send form through ajax when submitted
            u('form.login').ajax(function(err, res){
              window.href = '/user/' + res.id;
            });
    
    section.flex.two
      div
        :markdown
          ## Tiny and Clear
          **3kb** when gzipped means it will load in a snap on mobile. The core is reusable so new features are also tiny.
          
          You can see two features of Umbrella JS source code on the right, or check it all on github:
        a.button.icon-g(href="https://github.com/franciscop/umbrella" target="_blank") Source on Github
      div
        pre
          code.language-javascript.
            // Find the nodes matched by a selector
            u.prototype.find = function(selector) {
              return this.map(function(node){
                return u(selector || "*", node);
              });
            };
            // Check if any node matches the selector
            u.prototype.is = function(selector){
              return this.filter(selector).length > 0;
            };
    
    section.flex.two
      div
        :markdown
          ## Tested and Performant
          The speed is similar to jquery and there are many tests, including performance ones.
          
          They run on development, on deploy and live in different browsers so you know everything will work as expected.
      div
        pre
          code.language-javascript.
            it("can select by class", function() {
              expect(u('.demo').length).to.equal(1);
            });

            it("can select li inside ul", function() {
              var ul = base.find('li').closest('ul');
              expect(ul.length).to.equal(1);
            });
    
    section.flex.two
      div
        :markdown
          ## MIT License
          If you love something set it free. This license allows you to use Umbrella JS in a broad variety of projects.
        a.button.icon-info(href="https://github.com/franciscop/umbrella/blob/master/LICENSE" target="_blank") MIT License
      div.thanks
        :markdown
          ## Special Thanks
          - [Contributors](https://github.com/franciscop/umbrella/graphs/contributors) for helping Umbrella to improve
          - [You Might Not Need jQuery](http://youmightnotneedjquery.com/) for its *awesomeness*
          - [Picnic CSS](http://picnicss.com/) for making the website look alive
          - [Browser Stack](http://browserstack.com/) for cross-browser checks
          - [Can I use?](http://caniuse.com/) for compatibility checks
          
    section.flex.one
      div.love
        div With love,
        a(href="http://francisco.io/" target="_blank") Francisco Presencia

  script(src="https://unpkg.com/umbrellajs")