syrup

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Have some Syrup with that Flapjack...</title> <link rel="stylesheet/less" href="/less/syrup.less" /> <script src="/lessjs/less-1.7.5.js" type="text/javascript"></script> </head> <body> <a href="https://github.com/allenai/syrup"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a> <header> <div class="max-width-content"> <span>Syrup</span> </div> </header> <div class="hero text-center"> <div class="max-width-content"> <span class="icon-syrup"></span> <p>Syrup is a collection of shared UI utilities and libraries leveraged by AI2 when developing interfaces.<br> It is opinionated, simple and based upon LESS and AngularJS.</p> </div> </div> <div class="content"> <div class="max-width-content"> <section id="setup"> <div class="right"> <select id="jump"> <option>Jump to a Section</option> <option value="#header">Site Header</option> <option value="#headers">Headers</option> <option value="#sections">Sections</option> <option value="#text">Text</option> <option value="#floats">Floats</option> <option value="#rules">Rules</option> <option value="#code">Code</option> <option value="#forms">Forms</option> <option value="#icons">Icons</option> <option value="#messaging">Forms</option> <option value="#footer">Footer</option> </select> </div> <h1 class="header-with-rule">Setup</h1> <h3>Installation:</h3> <code><pre>npm install syrup</pre></code> <h3>Usage:</h3> <h4>Gulp</h4> <code><pre> var gulp = require('gulp'); var syrup = require('syrup'); syrup.gulp.tasks(gulp)</pre></code> <h4>LESS</h4> <code><pre> @import '../node_modules/syrup/less/syrup.less'</pre></code> <h4>HTML</h4> <p>Take a look at the example components below!</p> </section> <section id="header"> <h2 class="header-with-rule">Site Header</h2> <header><div class="max-width-content"><span>My Application</span></div></header> <code><pre><header><div class="max-width-content"><span>My Application</span><div><header></pre></code> </section> <section id="headers"> <h2 class="header-with-rule">Headers</h2> <h1>Header 1</h2> <code><pre><h1>Header 1</h1></pre></code> <h2>Header 2</h2> <code><pre><h2>Header 2</h2></pre></code> <h3>Header 3</h3> <code><pre><h3>Header 3</h3></pre></code> <h4>Header 4</h4> <code><pre><h4>Header 4</h4></pre></code> <h5>Header 5</h5> <code><pre><h5>Header 5</h5></pre></code> <h6>Header 6</h6> <code><pre><h6>Header 6</h6></pre></code> </section> <section id="sections"> <h2 class="header-with-rule">Content Sections</h2> <section> A section. <section> A section in a section. </section> </section> <section> Another Section </section> <code><pre><section> A section. <section> A section in a section </section> </section> <section> Another Section </section></pre></code> </section> <section id="rules"> <h2 class="header-with-rule">Rules</h2> <hr> <code><pre><hr></pre></code> </section> <section id="text"> <h2 class="header-with-rule">Text</h2> <p> Bacon ipsum dolor amet doner pork chop ham brisket. Bacon meatball meatloaf hamburger. Porchetta turkey leberkas, ball tip fatback sirloin beef ribs. Salami shoulder drumstick, chuck capicola filet mignon shankle ham ground round tri-tip frankfurter pork jowl. </p> <p> Pastrami filet mignon ham shank pork belly rump. Turkey leberkas prosciutto pork swine short ribs. Capicola kevin meatloaf, turkey short loin chuck pig short ribs bacon ham t-bone sausage pork loin. Pork belly shank rump prosciutto short loin, landjaeger jowl pig porchetta pancetta. </p> <code><pre> <p>Bacon ipsum dolor amet doner pork chop ham brisket. Bacon meatball meatloaf hamburger. Porchetta turkey leberkas, ball tip fatback sirloin beef ribs. Salami shoulder drumstick, chuck capicola filet mignon shankle ham ground round tri-tip frankfurter pork jowl.</p> <p>Pastrami filet mignon ham shank pork belly rump. Turkey leberkas prosciutto pork swine short ribs. Capicola kevin meatloaf, turkey short loin chuck pig short ribs bacon ham t-bone sausage pork loin. Pork belly shank rump prosciutto short loin, landjaeger jowl pig porchetta pancetta.</p></pre></code> </section> <section id="floats"> <h2 class="header-with-rule">Floats</h2> <div class="clearfix"> <div class="left">Take one step on the left.</div> <div class="right">And now two on the right.</div> </div> <code><pre><div class="clearfix"> <div class="left">Take one step on the left.</div> <div class="right">And now two on the right.</div> </div></pre></code> </section> <section id="code"> <h2 class="header-with-rule">Code</h2> <code><pre> var foo = bar(); if(foo.isAwesome()) { foo.celebrate(); }</pre></code> <code><pre> <code><pre> var foo = bar(); if(foo.isAwesome()) { foo.celebrate(); }</pre></code></pre></code> </section> <section id="forms"> <h2 class="header-with-rule">Forms</h2> <form> <p><input type="text" placeholder="Enter Something"></p> <code><pre><p><input type="text" placeholder="Enter Something"></p></pre></code> <p><input type="search" placeholder="Search for Something"></p> <code><pre><p><input type="search" placeholder="Search for Something"></p></pre></code> <p><textarea placeholder="Enter lots of Something"></textarea></p> <code><pre><p><textarea placeholder="Enter lots of Something"></textarea></p></pre></code> <p><input type="radio" id="radio"> <label for="radio">Radio Option</label></p> <code><pre><p><input type="text" id="radio"><label for="radio">Radio Option</label></p></pre></code> <p><input type="checkbox" id="checkbox"> <label for="checkbox">Checkbox Option</label></p> <code><pre><p><input type="checkbox" id="checkbox"><label for="checkbox">Checkbox Option</label></p></pre></code> <p><select> <option>Select Something</option> <option>Select This</option> </select></p> <code><pre><select> <option>Select Something</option> <option value="this">Select This</option> </select></pre></code> <p><button>Click Me</button></p> <code><pre><button>Click Me</button></pre></code> <p><input type="submit" value="Submit Me"></p> <code><pre><input type="submit" value="Submit Me"></pre></code> <p><a href="#forms" class="btn btn-red">Don't Click Me!</a></p> <code><pre><a href="#forms" class="btn btn-red">Don't Click Me!</a></pre></code> <p><a href="#forms" class="btn btn-green">Click Me!</a></p> <code><pre><a href="#forms" class="btn btn-green">Click Me!</a></pre></code> <p><a href="#forms" class="btn btn-transparent">Click Me!</a></p> <code><pre><a href="#forms" class="btn btn-transparent">Click Me!</a></pre></code> <p><a href="#forms" class="btn btn-dark-blue">Click Me!</a></p> <code><pre><a href="#forms" class="btn btn-dark-blue">Click Me!</a></pre></code> <p><a href="#forms" class="btn btn-gray">Click Me!</a></p> <code><pre><a href="#forms" class="btn btn-gray">Click Me!</a></pre></code> <p><a href="#forms" class="btn btn-light-gray">Click Me!</a></p> <code><pre><a href="#forms" class="btn btn-light-gray">Click Me!</a></pre></code> <p><a href="#forms" class="btn btn-yellow">Click Me!</a></p> <code><pre><a href="#forms" class="btn btn-yellow">Click Me!</a></pre></code> <p><a href="#forms" class="btn btn-orange">Click Me!</a></p> <code><pre><a href="#forms" class="btn btn-orange">Click Me!</a></pre></code> <p><a href="#forms" class="btn btn-sm btn-green">I'm Smaller, Click Me!</a></p> <code><pre><a href="#forms" class="btn btn-sm btn-green">I'm Smaller, Click Me!</a></pre></code> </form> </section> <section id="icons"> <h2 class="header-with-rule">Icons</h2> <span class="icon-application"></span> <span class="icon-check"></span> <span class="icon-checklist"></span> <span class="icon-citation"></span> <span class="icon-clusters"></span> <span class="icon-code"></span> <span class="icon-datasets"></span> <span class="icon-details"></span> <span class="icon-doc"></span> <span class="icon-experimental"></span> <span class="icon-eye"></span> <span class="icon-gear"></span> <span class="icon-lineage"></span> <span class="icon-list"></span> <span class="icon-map"></span> <span class="icon-minus"></span> <span class="icon-open"></span> <span class="icon-paintbrush"></span> <span class="icon-plus"></span> <span class="icon-pointer_down"></span> <span class="icon-pointer_left"></span> <span class="icon-pointer_right"></span> <span class="icon-pointer_up"></span> <span class="icon-problems"></span> <span class="icon-reading_list"></span> <span class="icon-search"></span> <span class="icon-star"></span> <span class="icon-survey"></span> <span class="icon-syrup"></span> <span class="icon-techiniques"></span> <span class="icon-theoretical"></span> <span class="icon-x"></span> <code> <pre><span class="icon-application"></span><br><span class="icon-check"></span><br><span class="icon-checklist"></span><br><span class="icon-citation"></span><br><span class="icon-clusters"></span><br><span class="icon-code"></span><br><span class="icon-datasets"></span><br><span class="icon-details"></span><br><span class="icon-doc"></span><br><span class="icon-experimental"></span><br><span class="icon-eye"></span><br><span class="icon-gear"></span><br><span class="icon-lineage"></span><br><span class="icon-list"></span><br><span class="icon-map"></span><br><span class="icon-minus"></span><br><span class="icon-open"></span><br><span class="icon-paintbrush"></span><br><span class="icon-plus"></span><br><span class="icon-pointer_down"></span><br><span class="icon-pointer_left"></span><br><span class="icon-pointer_right"></span><br><span class="icon-pointer_up"></span><br><span class="icon-problems"></span><br><span class="icon-reading_list"></span><br><span class="icon-search"></span><br><span class="icon-star"></span><br><span class="icon-survey"></span><br><span class="icon-syrup"></span><br><span class="icon-techiniques"></span><br><span class="icon-theoretical"></span><br><span class="icon-x"></span></pre> </code> </section> <section id="messaging"> <h2 class="header-with-rule">Messaging</h2> <p class="msg msg-success"><strong>Success:</strong> Bacon ipsum dolor amet doner pork chop ham brisket.</p> <code><pre><p class="msg msg-success"><strong>Success!</strong> Bacon ipsum dolor amet doner pork chop ham brisket.</p></pre></code> <p class="msg msg-warning"><strong>Warning:</strong> Bacon meatball meatloaf hamburger. Porchetta turkey leberkas, ball tip fatback sirloin beef ribs.</p> <code><pre><p class="msg msg-warning"><strong>Warning:</strong&gt Bacon meatball meatloaf hamburger. Porchetta turkey leberkas, ball tip fatback sirloin beef ribs.</p></pre></code> <p class="msg msg-error"><strong>Error:</strong> Pastrami filet mignon ham shank pork belly rump. Turkey leberkas prosciutto pork swine short ribs.</p> <code><pre><p class="msg msg-error"><strong>Error!</strong&gt Bacon meatball meatloaf hamburger. Porchetta turkey leberkas, ball tip fatback sirloin beef ribs.</p></pre></code> </section> <section id="footer"> <h2 class="header-with-rule">Footer</h2> <footer id="footer"> <p>A Footer</p> <code><pre> <footer class="max-width-content"> A Footer </footer></pre></code> </footer> </section> </div> </div> <footer> <div class="max-width-content"> <div class="text-center"> Pancake designed by <a href="http://www.thenounproject.com/jacob">Jacob Halton</a> from the <a href="http://www.thenounproject.com">Noun Project</a> </div> </div> </footer> <script> document.getElementById('jump').addEventListener('change', function() { window.location.hash = this.value; }); </script> </body> </html>