namey 0.0.2 → 0.0.5

data/api/public/lib/type.less

@@ -0,0 +1,187 @@
+/* Typography.less
+ * Headings, body text, lists, code, and more for a versatile and durable typography system
+ * ---------------------------------------------------------------------------------------- */
+
+
+// BODY TEXT
+// ---------
+
+p {
+  #font > .shorthand(normal,@basefont,@baseline);
+  margin-bottom: @baseline / 2;
+  small {
+    font-size: @basefont - 2;
+    color: @grayLight;
+  }
+}
+
+
+// HEADINGS
+// --------
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: bold;
+  color: @grayDark;
+  small {
+    color: @grayLight;
+  }
+}
+h1 {
+  margin-bottom: @baseline;
+  font-size: 30px;
+  line-height: @baseline * 2;
+  small {
+    font-size: 18px;
+  }
+}
+h2 {
+  font-size: 24px;
+  line-height: @baseline * 2;
+  small {
+    font-size: 14px;
+  }
+}
+h3, h4, h5, h6 {
+  line-height: @baseline * 2;
+}
+h3 {
+  font-size: 18px;
+  small {
+    font-size: 14px;
+  }
+}
+h4 {
+  font-size: 16px;
+  small {
+    font-size: 12px;
+  }
+}
+h5 {
+  font-size: 14px;
+}
+h6 {
+  font-size: 13px;
+  color: @grayLight;
+  text-transform: uppercase;
+}
+
+
+// COLORS
+// ------
+
+// Unordered and Ordered lists
+ul, ol {
+  margin: 0 0 @baseline 25px;
+}
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin-bottom: 0;
+}
+ul {
+  list-style: disc;
+}
+ol {
+  list-style: decimal;
+}
+li {
+  line-height: @baseline;
+  color: @gray;
+}
+ul.unstyled {
+  list-style: none;
+  margin-left: 0;
+}
+
+// Description Lists
+dl {
+  margin-bottom: @baseline;
+  dt, dd {
+    line-height: @baseline;
+  }
+  dt {
+    font-weight: bold;
+  }
+  dd {
+    margin-left: @baseline / 2;
+  }
+}
+
+// MISC
+// ----
+
+// Horizontal rules
+hr {
+  margin: 20px 0 19px;
+  border: 0;
+  border-bottom: 1px solid #eee;
+}
+
+// Emphasis
+strong {
+  font-style: inherit;
+  font-weight: bold;
+}
+em {
+  font-style: italic;
+  font-weight: inherit;
+  line-height: inherit;
+}
+.muted {
+  color: @grayLight;
+}
+
+// Blockquotes
+blockquote {
+  margin-bottom: @baseline;
+  border-left: 5px solid #eee;
+  padding-left: 15px;
+  p {
+    #font > .shorthand(300,14px,@baseline);
+    margin-bottom: 0;
+  }
+  small {
+    display: block;
+    #font > .shorthand(300,12px,@baseline);
+    color: @grayLight;
+    &:before {
+      content: '\2014 \00A0';
+    }
+  }
+}
+
+// Addresses
+address {
+  display: block;
+  line-height: @baseline;
+  margin-bottom: @baseline;
+}
+
+// Inline and block code styles
+code, pre {
+  padding: 0 3px 2px;
+  font-family: Monaco, Andale Mono, Courier New, monospace;
+  font-size: 12px;
+  .border-radius(3px);
+}
+code {
+  background-color: lighten(@orange, 40%);
+  color: rgba(0,0,0,.75);
+  padding: 1px 3px;
+}
+pre {
+  background-color: #f5f5f5;
+  display: block;
+  padding: (@baseline - 1) / 2;
+  margin: 0 0 @baseline;
+  line-height: @baseline;
+  font-size: 12px;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.15);
+  .border-radius(3px);
+  white-space: pre;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+
+}

data/api/public/lib/variables.less

@@ -0,0 +1,60 @@
+/* Variables.less
+ * Variables to customize the look and feel of Bootstrap
+ * ----------------------------------------------------- */
+
+
+// Links
+@linkColor:         #0069d6;
+@linkColorHover:    darken(@linkColor, 15);
+
+// Grays
+@black:             #000;
+@grayDark:          lighten(@black, 25%);
+@gray:              lighten(@black, 50%);
+@grayLight:         lighten(@black, 75%);
+@grayLighter:       lighten(@black, 90%);
+@white:             #fff;
+
+// Accent Colors
+@blue:              #049CDB;
+@blueDark:          #0064CD;
+@green:             #46a546;
+@red:               #9d261d;
+@yellow:            #ffc40d;
+@orange:            #f89406;
+@pink:              #c3325f;
+@purple:            #7a43b6;
+
+// Baseline grid
+@basefont:          13px;
+@baseline:          18px;
+
+// Griditude
+// Modify the grid styles in mixins.less
+@gridColumns:       16;
+@gridColumnWidth:   40px;
+@gridGutterWidth:   20px;
+@extraSpace:        (@gridGutterWidth * 2); // For our grid calculations
+@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+// Color Scheme
+// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
+@baseColor:         @blue;                  // Set a base color
+@complement:        spin(@baseColor, 180);  // Determine a complementary color
+@split1:            spin(@baseColor, 158);  // Split complements
+@split2:            spin(@baseColor, -158);
+@triad1:            spin(@baseColor, 135);  // Triads colors
+@triad2:            spin(@baseColor, -135);
+@tetra1:            spin(@baseColor, 90);   // Tetra colors
+@tetra2:            spin(@baseColor, -90);
+@analog1:           spin(@baseColor, 22);   // Analogs colors
+@analog2:           spin(@baseColor, -22);
+
+
+
+// More variables coming soon:
+// - @basefont to @baseFontSize
+// - @baseline to @baseLineHeight
+// - @baseFontFamily
+// - @primaryButtonColor
+// - anything else? File an issue on GitHub

data/api/public/ui.js

@@ -0,0 +1,42 @@
+$(document).ready(function() {
+  $("input[name=frequency]").change(function() {
+	console.log("HI!");
+	if ( $("input[name=frequency]:checked").val() == "custom" ) {
+	  $("#min_freq,#max_freq").removeClass("disabled").removeAttr("disabled"); 
+	}
+	else {
+	  $("#min_freq,#max_freq").addClass("disabled").attr("disabled", true); ;
+	}
+
+  });
+
+  $('#name-params').submit(function() {
+
+	var opts = {  
+      count:  $("select[name=count]").val(),
+      with_surname:  $("input[name=with_surname]:checked").val() === "true"
+	};
+
+    var frequency = $("input[name=frequency]:checked").val();
+	if ( frequency == "custom" ) {
+	  opts.min_freq = $("input[name=min_freq]").val();
+	  opts.max_freq = $("input[name=max_freq]").val();
+	}
+	else {
+	  opts.frequency = frequency;
+	}
+
+
+	var type =  $("input[name=type]:checked").val();
+	if ( type != "both" ) {
+	  opts.type = type;
+	}
+
+	opts.callback = function(r) {
+		$("#nameList").val(r);
+	  }
+	namey.get(opts);
+
+	return false;
+  });
+});

data/api/views/index.erb

@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html lang="en">
+  <!-- shamelessly stolen from view-source:http://twitter.github.com/bootstrap/examples/hero.html -->
+  <head>
+    <meta charset="utf-8">
+    <title>Namey</title>
+    <meta name="description" content="">
+    <meta name="author" content="">
+
+    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
+    <!--[if lt IE 9]>
+    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
+	<script>
+	  google.load("jquery", "1.6.4");
+	</script>
+	<script type="text/javascript" src="/api.js"></script>
+	<script type="text/javascript" src="/ui.js"></script>
+
+    <!-- Le styles -->
+    <link href="/bootstrap.css" rel="stylesheet">
+    <style type="text/css">
+      body {
+padding-top: 10px;
+      }
+.hero-unit {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.hero-unit h1 {
+ font-size: 48px;
+}
+.hero-unit p {
+ font-size: 16px;
+ line-height: 18px;
+ font-weight: 100;
+}
+
+    </style>
+
+	<!---
+       <link rel="shortcut icon" href="images/favicon.ico">
+	   --->
+  </head>
+
+  <body>
+    <div class="container">
+
+      <!-- Main hero unit for a primary marketing message or call to action -->
+      <div class="hero-unit">
+        <h1>Namey!</h1>
+		<h2>A random name generator</h1>
+		<p>Welcome to Namey, the random name generator, powered by the ruby
+		  gem of the same name. It uses the 
+		  <a href="http://www.census.gov/genealogy/names/">US Census
+			Bureau database</a> of first and last names to generate random
+		  names. You can specify gender, whether you want a common or
+			rare name, and so on. It's pretty easy, so...</p>
+      </div>
+
+	  <section id="forms">
+		<div class="page-header">
+		  <h1>Lets make some names!</h1>
+		</div>
+		<div class="row">
+		  <div>
+			<form id="name-params">
+			  <fieldset>
+				<div class="clearfix">
+				  <label id="type-opts">Name Type</label>
+				  <div class="input">
+					<ul class="inputs-list">
+					  <li>
+						<label>
+						  <input type="radio" checked name="type" value="both" />
+						  <span>Any Gender</span>
+						</label>
+					  </li>
+					  <li>
+						<label>
+						  <input type="radio" name="type" value="female" />
+						  <span>Female</span>
+						</label>
+					  </li>
+					  <li>
+						<label>
+						  <input type="radio" name="type" value="male" />
+						  <span>Male</span>
+						</label>
+					  </li>
+					  <li>
+						<label>
+						  <input type="radio" name="type" value="surname" />
+						  <span>Just a surname</span>
+						</label>
+					  </li>
+					</ul>
+				  </div>
+				</div><!-- /clearfix -->
+
+				<div class="clearfix">
+				  <div class="input">
+					<ul class="inputs-list">
+					  <li>
+						<label>
+						  <input type="checkbox" name="with_surname" value="true" checked />
+						  <span>Include a surname?</span>
+						</label>
+					  </li>
+					</ul>
+					<span class="help-block">
+					  <strong>Note:</strong> If you uncheck this, you'll only get a first name.
+					</span>
+				  </div>
+				</div><!-- /clearfix -->
+
+				<div class="clearfix">
+				  <label id="optionsRadio">Name Frequency</label>
+				  <div class="input">
+					<ul class="inputs-list">
+					  <li>
+						<label>
+						  <input type="radio" checked name="frequency" value="common" />
+						  <span>'Common' names</span>
+						</label>
+					  </li>
+					  <li>
+						<label>
+						  <input type="radio" name="frequency" value="rare" />
+						  <span>Rare names</span>
+						</label>
+					  </li>
+					  <li>
+						<label>
+						  <input type="radio" name="frequency" value="all" />
+						  <span>All names</span>
+						</label>
+					  </li>
+					  <li>
+						<label>
+						  <input type="radio" name="frequency" value="custom" />
+						  <span>Custom range: </span>
+						  From: <input class="span2 disabled" id="min_freq" name="min_freq" type="text" placeholder="(0-100)" disabled />
+						  To: <input class="span2 disabled" id="max_freq" name="max_freq" type="text" placeholder="(0-100)" disabled />
+						</label>
+					  </li>
+					</ul>
+				  </div>
+				</div><!-- /clearfix -->
+
+
+				<div class="clearfix">
+				  <label for="count">How many names to generate?</label>
+				  <div class="input">
+					<select name="count" id="count">
+					  <option>1</option>
+					  <option>2</option>
+					  <option>3</option>
+					  <option>4</option>
+					  <option>5</option>
+					</select>
+				  </div>
+				</div><!-- /clearfix -->
+
+				<div class="clearfix">
+				  <label for="disabledInput">Results:</label>
+				  <div class="input">
+					<textarea class="xxlarge" name="nameList" id="nameList" rows="5"></textarea>
+				  </div>
+				</div><!-- /clearfix -->
+
+				<div class="actions">
+				  <input type="submit" class="btn primary" value="Gimme a name!">
+				</div>
+			  </fieldset>
+			</form>
+		  </div>
+		</div><!-- /row -->
+
+	  </section>
+
+      <!-- Example row of columns -->
+      <div class="row">
+        <div class="span5">
+          <h2>Open Source</h2>
+          <p>The code for namey is totally open source, do what you
+          like with it! <a href="https://github.com/muffinista/namey">Check it out on github</a></p>
+		</div>
+        <div class="span6">
+          <h2>API Available</h2>
+          <p>Are you a nerd? Do you like APIs? You're in luck! Namey
+          has a <a href="/api.js">Javascript API</a> available so
+          you can generate names however you would like.</p>
+        </div>
+        <div class="span5">
+          <h2>Muffinlabs</h2>
+          <p>Namey is
+          a <a href="http://muffinlabs.com">muffinlabs</a>
+          production. Please visit!</p>
+        </div>
+      </div>
+
+      <footer>
+        <p>&copy; Colin Mitchell 2011, <a href="http://muffinlabs.com">http://muffinlabs.com</a></p>
+      </footer>
+
+    </div> <!-- /container -->
+
+  </body>
+</html>