Permalink
Browse files

Initial commit

  • Loading branch information...
0 parents commit abc8f29000df7827b32d92ce664ec4e9bec59de7 @matthewmueller committed Nov 19, 2012
Showing with 148 additions and 0 deletions.
  1. +2 −0 .gitignore
  2. 0 History.md
  3. +11 −0 Makefile
  4. +36 −0 Readme.md
  5. +55 −0 brewster-form.css
  6. +18 −0 component.json
  7. +26 −0 test.html
@@ -0,0 +1,2 @@
+components
+build
No changes.
@@ -0,0 +1,11 @@
+
+build: components brewster-form.css
+ @component build --dev
+
+components: component.json
+ @component install --dev
+
+clean:
+ rm -fr build components template.js
+
+.PHONY: clean
@@ -0,0 +1,36 @@
+
+# brewster-form
+
+ Really basic (incomplete) form based on the brewster iphone app.
+
+ ![brewster-form](http://f.cl.ly/items/181D0X2t2h0E0J2X0z1X/Screen%20Shot%202012-11-19%20at%201.27.44%20PM.png)
+
+## Installation
+
+ $ component install matthewmueller/brewster-form
+
+## Example
+
+```html
+<form class="brewster" action="/signup" method="post">
+ <div class="field">
+ <label for="__username">username</label>
+ <input name="username" type="text" id="__username">
+ <span class="validation valid"></span>
+ </div>
+ <div class="field">
+ <label for="__email">email</label>
+ <input name="email" type="text" id="__email">
+ <span class="validation valid"></span>
+ </div>
+ <div class="field">
+ <label for="__password">password</label>
+ <input name="password" type="password" id="__password">
+ <span class="validation invalid"></span>
+ </div>
+</form>
+```
+
+## License
+
+ MIT
@@ -0,0 +1,55 @@
+.brewster {
+ background-color: #F2F2F2;
+ border: 1px solid #E5E5E5;
+ border-radius: 2px;
+}
+
+.brewster div {
+ border-top: 1px solid #E5E5E5;
+ background-color: #FFFFFF;
+ padding: 21px 7px 7px 7px ;
+ height: 17px;
+ position: relative;
+}
+
+.brewster div:first-child {
+ border-top: none;
+}
+
+.brewster label {
+ position: absolute;
+ top: 5px;
+ font-size: 12px;
+ font-family: "Helvetica Neue";
+ color: #949494;
+}
+
+.brewster input {
+ width: 100%;
+ height: 20px;
+ outline: none;
+ border: none;
+ font-size: 14px;
+ font-weight: bold;
+}
+
+.brewster .validation:after {
+ position: absolute;
+}
+
+.brewster .validation.valid:after {
+ content: "\2714";
+ color: #59BA58;
+ right: 10px;
+ top: 13px;
+}
+
+.brewster .validation.invalid:after {
+ content: "\00D7";
+ font-weight: bold;
+ font-size: 20px;
+ right: 12px;
+ top: 10px;
+ color: #DD4E44;
+}
+
@@ -0,0 +1,18 @@
+{
+ "name": "brewster-form",
+ "repo": "matthewmueller/brewster-form",
+ "description": "form based on the brewster iphone app",
+ "version": "0.0.1",
+ "keywords": [],
+ "dependencies": {
+ "matthewmueller/form" : "*"
+ },
+ "development": {},
+ "license": "MIT",
+ "script": [
+ "index.js"
+ ],
+ "styles": [
+ "brewster-form.css"
+ ]
+}
@@ -0,0 +1,26 @@
+<html>
+<head>
+ <title>brewster-form component</title>
+ <link rel="stylesheet" href="../build/build.css">
+</head>
+<body>
+ <h1>brewster-form component</h1>
+ <form class="brewster" action="/signup" method="post">
+ <div class="field">
+ <label for="__username">username</label>
+ <input name="username" type="text" id="__username">
+ <span class="validation valid"></span>
+ </div>
+ <div class="field">
+ <label for="__email">email</label>
+ <input name="email" type="text" id="__email">
+ <span class="validation valid"></span>
+ </div>
+ <div class="field">
+ <label for="__password">password</label>
+ <input name="password" type="password" id="__password">
+ <span class="validation invalid"></span>
+ </div>
+ </form>
+</body>
+</html>

0 comments on commit abc8f29

Please sign in to comment.