Fork me on GitHub
Syrup

Syrup is a collection of shared UI utilities and libraries leveraged by AI2 when developing interfaces.
It is opinionated, simple and based upon LESS and AngularJS.

Setup

Installation:

npm install syrup

Usage:

Gulp

var gulp = require('gulp');
var syrup = require('syrup');
syrup.gulp.tasks(gulp)

LESS

@import '../node_modules/syrup/less/syrup.less'

HTML

Take a look at the example components below!

Headers

Header 1

<h1>Header 1</h1>

Header 2

<h2>Header 2</h2>

Header 3

<h3>Header 3</h3>

Header 4

<h4>Header 4</h4>
Header 5
<h5>Header 5</h5>
Header 6
<h6>Header 6</h6>

Content Sections

A section.
A section in a section.
Another Section 
<section>
  A section.
  <section>
    A section in a section
  </section>
</section>
<section>
  Another Section
</section>

Rules

<hr>

Text

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.

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>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>

Floats

Take one step on the left.
And now two on the right.
<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

var foo = bar();
if(foo.isAwesome()) {
  foo.celebrate();
}
 
<code><pre>
var foo = bar();
if(foo.isAwesome()) {
  foo.celebrate();
}</pre></code>

Forms

<p><input type="text" placeholder="Enter Something"></p>
 

<p><input type="search" placeholder="Search for Something"></p>
 

<p><textarea placeholder="Enter lots of Something"></textarea></p>
 

<p><input type="text" id="radio"><label for="radio">Radio Option</label></p>
 

<p><input type="checkbox" id="checkbox"><label for="checkbox">Checkbox Option</label></p>
 

<select>
  <option>Select Something</option>
  <option value="this">Select This</option>
</select>
 

<button>Click Me</button>
 

<input type="submit" value="Submit Me">

Don't Click Me!

<a href="#forms" class="btn btn-red">Don't Click Me!</a>

Click Me!

<a href="#forms" class="btn btn-green">Click Me!</a>

Click Me!

<a href="#forms" class="btn btn-transparent">Click Me!</a>

Click Me!

<a href="#forms" class="btn btn-dark-blue">Click Me!</a>

Click Me!

<a href="#forms" class="btn btn-gray">Click Me!</a>

Click Me!

<a href="#forms" class="btn btn-light-gray">Click Me!</a>

Click Me!

<a href="#forms" class="btn btn-yellow">Click Me!</a>

Click Me!

<a href="#forms" class="btn btn-orange">Click Me!</a>

I'm Smaller, Click Me!

<a href="#forms" class="btn btn-sm btn-green">I'm Smaller, Click Me!</a>

Icons

<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>

Messaging

Success: Bacon ipsum dolor amet doner pork chop ham brisket.

<p class="msg msg-success"><strong>Success!</strong> Bacon ipsum dolor amet doner pork chop ham brisket.</p>

Warning: Bacon meatball meatloaf hamburger. Porchetta turkey leberkas, ball tip fatback sirloin beef ribs.

<p class="msg msg-warning"><strong>Warning:</strong> Bacon meatball meatloaf hamburger. Porchetta turkey leberkas, ball tip fatback sirloin beef ribs.</p>

Error: Pastrami filet mignon ham shank pork belly rump. Turkey leberkas prosciutto pork swine short ribs.

<p class="msg msg-error"><strong>Error!</strong> Bacon meatball meatloaf hamburger. Porchetta turkey leberkas, ball tip fatback sirloin beef ribs.</p>