https://github.com/kristopolous/TopLevel

A New Way to Javascript Your HTML
https://github.com/kristopolous/TopLevel

Last synced: about 2 months ago
JSON representation

A New Way to Javascript Your HTML

• Host: GitHub
• URL: https://github.com/kristopolous/TopLevel
• Owner: kristopolous
• License: bsd-3-clause
• Created: 2014-06-05T03:37:39.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-06-06T08:43:01.000Z (over 10 years ago)
• Last Synced: 2024-05-02T06:12:46.482Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 430 KB
• Stars: 286
• Watchers: 13
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
TopLevel

========

TopLevel enables you to template your HTML, CSS, and Javascript at the Top Level like so:

    

    

      

        

        

        

          

        

          ...

        

        ...

The stylesheet above **will never load** unless the branch is satisfied.

 * This Is Not a solution of injecting stuff *after a page load*.

 * This Is Not a solution of *downloading and then removing* things from the DOM.

**The HTML code including the stylesheet will never be interpreted by the browser unless the function `CheckBrowser()` returns the string `"broken"`. ... seriously ...**



Another example:

    

    

      

        

      

      

    

        

          


        


      

    

When you load the page in the browser you will see 10 paragraph blocks with numbers inside of them.

### This Is A Total Game-Changer.

You can put TopLevel stanzas inside of CSS, HTML blocks, even HTML attributes.

Take this for example:

    


      .jpg">

    


Only one image will load - the right one for the browser.  

There will be no broken looking "flash" --- the delivery is smooth and polished.

### All Your JS Still Works.

 * `$(document).ready`

 * CSS selectors

 * Underscore

 * AMD Loaders, CoffeeScript, Knockout, Angular, Socket.io, Backbone, D3, yes --- all of them.

TopLevel is fast, transparent, and totally rewrites the rules of how you will create webpages.

## Works Everywhere And Is 0.6 KB gzipped.

(1.2 KB minified and 4.4 KB for the development version)

It Works On:

 * Chrome

 * Firefox

 * Safari

 * IE 

 * Opera

 * Dolphin

 * Seamonkey

 * Chromium 

 

They're all in and all the features are there.

Proof? Ok, sure!



You're welcome.

#### Add this massive functionality in a single include with under a kilobyte of gzipped code.

### Uses Underscore's Templating Engine

TopLevel takes its templating right from [underscore](http://underscorejs.org/). The functionality is identical with a slight change of syntax.

> Template functions can both interpolate variables, using ``, as well as execute arbitrary JavaScript code, with ``. If you wish to interpolate a value, and have it be HTML-escaped, use ``.

That is to say, a regular HTML comment block with the first character being either `=`, `%`, or `-`.  Keep this in mind, and refer to the [underscore documentation](http://underscorejs.org/#template) for further information!

### Easily Enable TopLevel to Use Any Third-Party Library

Everything after the `` gets interpreted.  If you want TopLevel to use a say, an MV* framework, simply include it before TopLevel, at the top of the HTML file like so:

    

    

      

        ... dependencies you want to expose to TopLevel ...

        

        ...

#### License & Contributions

 * BSD licensed

 * Send any [pull request](https://github.com/kristopolous/TopLevel/pulls)!

 * File any [issue](https://github.com/kristopolous/TopLevel/issues)!

 * And hit me up on the [mailing list](https://groups.google.com/forum/?hl=en#!forum/toplevel-js)!