index.html

<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Lil' JS</title>
    <link href="styles/style.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="http://www.superfish.com/ws/css/main.css?v=14.09.05.1"></head>
  <body>
  <div class="doc-loader" style="display: none;"></div>
  <section id="intro" style="background-image: url('img/lil-john2.png'); background-position: right 380px; background-attachment: fixed; background-repeat: no-repeat; background-size: auto;"> 
    <header>
    <nav class="navbar navbar-default" role="navigation">
      <div class="container">
        <div class="container">
          <a class="navbar-brand" href="index.html">LIL' JS</a>
          <!--<div id="main-nav" class="navbar-collapse">        
            <ul class="social-links">
              <li><h2>production</h2></li>
            </ul>
          </div>-->
        </div><!-- /container -->
      </div>
    </nav>
  </header>
  <div class="container">
    <div class="intro-well wow animated bounceIn animated" style="visibility: visible;">
    <div class="col-md-12">
    <h1>A collection of tiny modules to do colossal things</h1>
    <h2>The new modular, lightweight and tiny library to empower your core JavaScript development</h2>
    <a class="btn btn-primary" href="#modules"><li class="fa"></li>Modules</a>
    <a class="btn btn-primary" href="https://github.com/lil-js/all"><li class="fa"></li>All-in-one bundle</a>
    <a class="btn btn-primary" href="https://github.com/lil-js"><li class="fa"></li>See on Github</a>
    </div>
    </div>
  </div><!-- /container -->
  </section>
  <!--////////// FEATURES SECTION ////////// -->
  <section id="features">
    <div class="container wow fadeIn animated animated" style="visibility: visible;">
      <h1>Introducing Lil'JS</h1>
      <h2>Lil'JS aims to be a general purpose JavaScript collection of modules for common ES 5 &amp; 6 development
      <br />Modules are designed keeping in mind modularity, lightweight, dependency-free, low-coupling and reusability
      <br /><br />It could be a great choice to embed it as a part of your library, framework, application core or using it from <a href="https://github.com/h2non/thread.js">Web Workers</a></h2>
    </div><!-- /container -->
    <div class="container">
      <div class="row">
        <div class="col-md-4 wow fadeInLeft animated animated" data-wow-delay="0.1s" style="visibility: visible;-webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;">
          <div class="iconbox">
          <a href="#" class="icn-1">Tiny</a>
          </div>
            <p class="icntitle">Tiny</p>
            <p class="icnp">Modules are designed keeping bytes in mind, trying to create them as lightweight as possible. Usually their size is around 1KB (gzipped)</p>
        </div><!-- /col-md-4 -->

        <div class="col-md-4 wow fadeInLeft animated animated" data-wow-delay="0.2s" style="visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;">
        <div class="iconbox">
      <a href="http://themeberry.net/flati/blue-2/index.html#" class="icn-2">Modular</a>
        </div>
      <p class="icntitle">Modular</p>
            <p class="icnp">Each module has it's own resposability and no coupling with others modules</p>
        </div><!-- /col-md-4 -->

      <div class="col-md-4 wow fadeInLeft animated animated" data-wow-delay="0.3s" style="visibility: visible;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
        <div class="iconbox">
      <a href="http://themeberry.net/flati/blue-2/index.html#" class="icn-3">Support</a>
        </div>
      <p class="icntitle">Cross-engine</p>
         <p class="icnp">Runs in multiple JavaScript engines, including browsers, node.js and any other ES5 compliant engine</p>
        </div>
      </div><!-- /col-md-4 -->
      </div><!-- /row -->
    <!-- /container -->

    <div class="more-features">
    <div class="container wow fadeIn animated animated" style="visibility: visible;">
      <h1>Design Principles &amp; Features</h1>
    </div><!-- /container -->
    <div class="container">

      <div class="col-sm-4">
        <div class="features-left wow animated fadeInLeft animated" data-wow-delay="0.1s" style="visibility: visible;-webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;">

          <div class="features-item">
            <i class="fa fa-desktop icons_right hidden-sm"></i>
            <div class="text-align-right">
            <h4>Single responsability</h4>
            <p>Each module was designed according to the single module responsability principle</p>
              
            </div><!-- /text-align-right -->
          </div><!-- /features-item -->

          <div class="features-item">
            <i class="fa fa-life-ring icons_right hidden-sm"></i>
            <div class="text-align-right">
            <h4>Low-coupling</h4>
            <p>Modules arises from the idea to be much independent as possible, avoiding dependency between them</p>
              
            </div><!-- /text-align-right -->
            
          </div><!-- /features-item -->
          <div class="features-item">
            <i class="fa fa-sliders icons_right hidden-sm"></i>
            <div class="text-align-right">
              <h4>Well tested</h4>
              <p>Each module has a high test coverage and pass tests in node.js, headless and real browsers</p>
            </div><!-- /text-align-right -->
          </div><!-- /features-item -->

        </div><!-- /features-left -->
      </div><!-- /col-sm-4 -->

      <div id="iphone" class="col-sm-4 hidden-xs wow animated fadeInUp animated" data-wow-delay="0.3s" style="visibility: visible;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s; margin-top: 60px;">
        <img src="img/lil-john.gif" class="img-responsive" alt="Features">
      </div><!-- /col-sm-4 -->

      <div class="col-sm-4">
        <div class="features-right wow animated fadeInRight animated" data-wow-delay="0.2s" style="visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;">
          
          <div class="features-item">
            <i class="fa fa-gift f icons_left hidden-sm"></i>
            <div class="text-align-left">
            <h4>Lightweight</h4>
            <p>Modules are as much lightweight as possible. Only necessary code will be put inside</p>
            </div><!-- /text-align-left -->
          </div><!-- /features-item -->

          <div class="features-item">
            <i class="fa fa-rocket icons_left hidden-sm"></i>
            <div class="text-align-left">
            <h4>CommonJS</h4>
            <p>It uses CommonJS and UMD module definition pattern to support multiple JavaScript environments</p>
          </div><!-- /text-align-left -->
            
          </div><!-- /features-item -->
          <div class="features-item">
            <i class="fa fa-heart icons_left hidden-sm"></i>
            <div class="text-align-left">
            <h4>Well documented</h4>
            <p>Each module has it's own basic usage, examples and API documentation, based on Markdown</p>
            <!--<p>All the modules are public available via Github for code reviewing, issue reporting, feature requests and forking</p>-->
          </div><!-- /text-align-left -->
          
        </div><!-- /features-item -->
        </div><!-- /features-right -->
      </div><!-- /col-sm-4 -->
      
    </div><!-- /container -->      
    </div><!-- /more-features -->  
    
  </section>
  <!--////////// NEWSLETTER SECTION ////////// -->
  <section id="modules">

  <div class="container wow animated fadeInDown animated" style="visibility: visible;">
    <h3>Modules</h3>
    <div class="col-sm-4">
      <div class="features-left wow animated fadeInLeft animated" data-wow-delay="0.1s" style="visibility: visible;-webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;">
        <div class="features-item">
          <i class="fa fa-rocket icons_right hidden-sm"></i>
          <div class="text-align-right">
            <h4 class="module-title"><a href="https://github.com/lil-js/http">http</a></h4>
            <p><span class="btn-xs btn-primary">Browser</span>
            <span class="btn-xs btn-primary">1KB</span>
            <span class="btn-xs btn-primary"><a href="https://github.com/lil-js/http#installation" class="module-title">lil-http</a></span>
            <span class="btn-xs btn-primary download-btn"><a href="//cdn.rawgit.com/lil-js/http/master/http.js" class="module-title">
            <img height="12" src="img/download.png" /></a></span>
            <br />Tiny, lightweight, full featured HTTP client</p>
          </div>
        </div>
      </div>
    </div>

     <div class="col-sm-4">
      <div class="features-left wow animated fadeInLeft animated" data-wow-delay="0.1s" style="visibility: visible;-webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;">
        <div class="features-item">
          <i class="fa fa-rocket icons_right hidden-sm"></i>
          <div class="text-align-right">
            <h4 class="module-title"><a href="https://github.com/lil-js/uri">uri</a></h4>
            <p><span class="btn-xs btn-primary">Multi</span>
            <span class="btn-xs btn-primary">1KB</span>
            <span class="btn-xs btn-primary"><a href="https://github.com/lil-js/uri#installation" class="module-title">lil-uri</a></span>
            <span class="btn-xs btn-primary download-btn"><a href="//cdn.rawgit.com/lil-js/uri/master/uri.js" class="module-title">
            <img height="12" src="img/download.png" /></a></span>
            <br />URI parser and builder with semantic API</p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="features-right wow animated fadeInRight animated" data-wow-delay="0.2s" style="visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;">
        <div class="features-item">
          <i class="fa fa-rocket icons_right hidden-sm"></i>
          <div class="text-align-right">
            <h4 class="module-title"><a href="https://github.com/lil-js/type">type</a></h4>
            <p><span class="btn-xs btn-primary">Multi</span>
            <span class="btn-xs btn-primary">1KB</span>
            <span class="btn-xs btn-primary"><a href="https://github.com/lil-js/type#installation" class="module-title">lil-type</a></span>
            <span class="btn-xs btn-primary download-btn"><a href="//cdn.rawgit.com/lil-js/type/master/type.js" class="module-title">
            <img height="12" src="img/download.png" /></a></span>
            <br />Modern, reliable, full featured, type checking helpers</p>
          </div><!-- /text-align-right -->
        </div><!-- /features-item -->
      </div>
    </div>

    <div class="col-sm-5">
      <div class="features-right wow animated fadeInRight animated" data-wow-delay="0.2s" style="visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;">
        <div class="features-item">
          <i class="fa fa-rocket icons_right hidden-sm"></i>
          <div class="text-align-right">
            <h4 class="module-title"><a href="https://github.com/lil-js/uuid">uuid</a></h4>
            <p><span class="btn-xs btn-primary">Multi</span>
            <span class="btn-xs btn-primary">1KB</span>
            <span class="btn-xs btn-primary"><a href="https://github.com/lil-js/uuid#installation" class="module-title">lil-uuid</a></span>
            <span class="btn-xs btn-primary download-btn"><a href="//cdn.rawgit.com/lil-js/uuid/master/uuid.js" class="module-title">
            <img height="12" src="img/download.png" /></a></span>
            <br />UUID version 4 generator and validator (RFC4122 compliant)</p>
          </div><!-- /text-align-right -->
        </div><!-- /features-item -->
      </div>
    </div>

    <div class="col-sm-5">
      <div class="features-right wow animated fadeInRight animated" data-wow-delay="0.2s" style="visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;">
        <div class="features-item">
          <i class="fa fa-rocket icons_right hidden-sm"></i>
          <div class="text-align-right">
            <h4 class="module-title"><a href="https://github.com/lil-js/event">event</a></h4>
            <p><span class="btn-xs btn-primary">Multi</span>
            <span class="btn-xs btn-primary">1KB</span>
            <span class="btn-xs btn-primary"><a href="https://github.com/lil-js/event#installation" class="module-title">lil-event</a></span>
            <span class="btn-xs btn-primary download-btn"><a href="//cdn.rawgit.com/lil-js/event/master/event.js" class="module-title">
            <img height="12" src="img/download.png" /></a></span>
            <br />Tiny event bus inspired in node's EventEmitter</p>
          </div><!-- /text-align-right -->
        </div><!-- /features-item -->
      </div>
    </div>

  </div>

  <div class="container wow animated fadeInDown animated" style="visibility: visible;">
    <br /><br />
    <h3>Upcoming Modules</h3>
    <div class="features-item">
      <div class="col-sm-4">
        <div class="features-left wow animated fadeInLeft animated" data-wow-delay="0.1s" style="visibility: visible;-webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;">
          <div class="features-item">
            <i class="fa fa-rocket icons_right hidden-sm"></i>
            <div class="text-align-right">
              <h4 class="module-title"><a href="https://github.com/lil-js/ua">ua</a></h4>
              <p><span class="btn-xs btn-primary">Multi</span>
              <br />Cross UserAgent parser with elegant API</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="features-left wow animated fadeInLeft animated" data-wow-delay="0.1s" style="visibility: visible;-webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;">
          <div class="features-item">
            <i class="fa fa-rocket icons_right hidden-sm"></i>
            <div class="text-align-right">
              <h4 class="module-title"><a href="https://github.com/lil-js/sort">sort</a></h4>
              <p><span class="btn-xs btn-primary">Multi</span>
              <br />Array sorting helpers based on efficient and well-knowned algorithms</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-4">
        <div class="features-left wow animated fadeInLeft animated" data-wow-delay="0.1s" style="visibility: visible;-webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;">
          <div class="features-item">
            <i class="fa fa-rocket icons_right hidden-sm"></i>
            <div class="text-align-right">
              <h4 class="module-title"><a href="https://github.com/lil-js/validate">validate</a></h4>
              <p><span class="btn-xs btn-primary">Multi</span>
              <br />Generic data validation helpers</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container wow animated fadeInDown animated" style="visibility: visible;">
    <br /><br />
    <h4>Looking for more modules?</h4>
    <div class="features-item">
      <p>New modules will continously supported during the future... <br />You can <a href="https://github.com/lil-js/all/issues/new" style="color: #FFF">open an issue</a> proposing a new module</p>
      <p></p>
    </div>
  </div>

  </section>
  <!--
  <section id="screenshots">
    <div class="container wow fadeInUp animated animated" style="visibility: visible;">
      <h1>Screenshots</h1>
      <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam scelerisque faucibus risus non iaculis. Fusce a augue ante, pellentesque pretium erat. Fusce in turpis in velit tempor pretium. Integer a leo libero.</h2>
    </div>
   
   <div class="container">
    <div class="row">
        <div class="col-sm-4 wow fadeInLeft animated animated" data-wow-delay="0.1s" style="visibility: visible;-webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;">
            <a href="./js/1.jpg" class="thumbnail" data-lightbox-gallery="gallery1">
            <img src="./js/1.jpg" alt="...">
            </a>
        </div>
        <div class="col-sm-4 wow fadeInLeft animated animated" data-wow-delay="0.2s" style="visibility: visible;-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;">
            <a href="./js/2.jpg" class="thumbnail" data-lightbox-gallery="gallery1">
            <img src="./js/2.jpg" alt="...">
            </a>
        </div>
        <div class="col-sm-4 wow fadeInLeft animated animated" data-wow-delay="0.3s" style="visibility: visible;-webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; animation-delay: 0.3s;">
            <a href="./js/3.jpg" class="thumbnail" data-lightbox-gallery="gallery1">
            <img src="./js/3.jpg" alt="...">
            </a>
        </div>
    </div>
  </div>     
  </section>

  <section id="download">
  <div class="container wow fadeIn animated animated" style="visibility: visible;">
    <div class="row">
      <div class="col-md-4">
      <h3>Ea eam mollis phaedrum, eam at appareat consetetur repudiandae,</h3>
        <a class="btn btn-primary" href="http://themeberry.net/flati/blue-2/index.html#"><li class="fa fa-apple fa-lg"></li>&nbsp;&nbsp;Download from Appstore</a>
      </div>
      <div class="col-md-8">
        <img src="./js/iphone2.png" class="img-responsive" alt="picture">
      </div>
    </div>
  </div>
  </section>
  -->
  <footer>
    <p>Brought to you with caffeine, passion and good music</p>
    <p>Copyright © 2014 Tomas Aparicio - Originally designed by Themeberry</p>
  </footer>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/bootstrap.js"></script>
  <script src="./js/wow.min.js"></script>
  <script src="./js/nivo-lightbox.min.js"></script>
</body>
</html>