From e034d73d11281f00097997f63d4a04d44f43d7ee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 May 2014 01:29:27 -0700 Subject: [PATCH 01/14] rock only the compile docs in master --- CNAME | 1 - _config.yml | 8 -- _includes/checkbox.html | 5 - _includes/file.html | 3 - _includes/footer.html | 22 ---- _includes/header.html | 17 --- _includes/js.html | 15 --- _includes/radio.html | 10 -- _includes/select.html | 8 -- _includes/syntax.css | 66 ------------ _includes/tweet-button.html | 3 - _layouts/default.html | 40 ------- docs.css | 72 ++++++++++++- index.html | 209 ++++++++++++++++++++++++++++++++++++ index.md | 77 ------------- 15 files changed, 276 insertions(+), 280 deletions(-) delete mode 100644 CNAME delete mode 100644 _config.yml delete mode 100644 _includes/checkbox.html delete mode 100644 _includes/file.html delete mode 100644 _includes/footer.html delete mode 100644 _includes/header.html delete mode 100644 _includes/js.html delete mode 100644 _includes/radio.html delete mode 100644 _includes/select.html delete mode 100644 _includes/syntax.css delete mode 100644 _includes/tweet-button.html delete mode 100644 _layouts/default.html create mode 100644 index.html delete mode 100644 index.md diff --git a/CNAME b/CNAME deleted file mode 100644 index 4af6a08..0000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -wtfforms.com \ No newline at end of file diff --git a/_config.yml b/_config.yml deleted file mode 100644 index 526c3fc..0000000 --- a/_config.yml +++ /dev/null @@ -1,8 +0,0 @@ -name: "WTF, forms?" -url: http://wtfforms.com -repo: https://github.com/mdo/wtf-forms -twitter: https://twitter.com/mdo - -markdown: redcarpet -permalink: pretty -pygments: true diff --git a/_includes/checkbox.html b/_includes/checkbox.html deleted file mode 100644 index 269693d..0000000 --- a/_includes/checkbox.html +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/_includes/file.html b/_includes/file.html deleted file mode 100644 index 4152681..0000000 --- a/_includes/file.html +++ /dev/null @@ -1,3 +0,0 @@ - \ No newline at end of file diff --git a/_includes/footer.html b/_includes/footer.html deleted file mode 100644 index e9b283f..0000000 --- a/_includes/footer.html +++ /dev/null @@ -1,22 +0,0 @@ - diff --git a/_includes/header.html b/_includes/header.html deleted file mode 100644 index 13df1ac..0000000 --- a/_includes/header.html +++ /dev/null @@ -1,17 +0,0 @@ -
-
- ✈ -

{{ site.name }}

-

Friendlier HTML form controls with a little CSS margic. Designed for IE9+, as well as the latest Chrome, Safari, and Firefox.

-

Created by @mdo.

- -

- - - - - - -

-
-
diff --git a/_includes/js.html b/_includes/js.html deleted file mode 100644 index 531643e..0000000 --- a/_includes/js.html +++ /dev/null @@ -1,15 +0,0 @@ - - - diff --git a/_includes/radio.html b/_includes/radio.html deleted file mode 100644 index b1c3a85..0000000 --- a/_includes/radio.html +++ /dev/null @@ -1,10 +0,0 @@ - - \ No newline at end of file diff --git a/_includes/select.html b/_includes/select.html deleted file mode 100644 index 22c4f51..0000000 --- a/_includes/select.html +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/_includes/syntax.css b/_includes/syntax.css deleted file mode 100644 index 1b3c92c..0000000 --- a/_includes/syntax.css +++ /dev/null @@ -1,66 +0,0 @@ -.hll { background-color: #ffffcc } - /*{ background: #f0f3f3; }*/ -.c { color: #999; } /* Comment */ -.err { color: #AA0000; background-color: #FFAAAA } /* Error */ -.k { color: #006699; } /* Keyword */ -.o { color: #555555 } /* Operator */ -.cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */ -.cp { color: #009999 } /* Comment.Preproc */ -.c1 { color: #999; } /* Comment.Single */ -.cs { color: #999; } /* Comment.Special */ -.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */ -.ge { font-style: italic } /* Generic.Emph */ -.gr { color: #FF0000 } /* Generic.Error */ -.gh { color: #003300; } /* Generic.Heading */ -.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */ -.go { color: #AAAAAA } /* Generic.Output */ -.gp { color: #000099; } /* Generic.Prompt */ -.gs { } /* Generic.Strong */ -.gu { color: #003300; } /* Generic.Subheading */ -.gt { color: #99CC66 } /* Generic.Traceback */ -.kc { color: #006699; } /* Keyword.Constant */ -.kd { color: #006699; } /* Keyword.Declaration */ -.kn { color: #006699; } /* Keyword.Namespace */ -.kp { color: #006699 } /* Keyword.Pseudo */ -.kr { color: #006699; } /* Keyword.Reserved */ -.kt { color: #007788; } /* Keyword.Type */ -.m { color: #FF6600 } /* Literal.Number */ -.s { color: #d44950 } /* Literal.String */ -.na { color: #4f9fcf } /* Name.Attribute */ -.nb { color: #336666 } /* Name.Builtin */ -.nc { color: #00AA88; } /* Name.Class */ -.no { color: #336600 } /* Name.Constant */ -.nd { color: #9999FF } /* Name.Decorator */ -.ni { color: #999999; } /* Name.Entity */ -.ne { color: #CC0000; } /* Name.Exception */ -.nf { color: #CC00FF } /* Name.Function */ -.nl { color: #9999FF } /* Name.Label */ -.nn { color: #00CCFF; } /* Name.Namespace */ -.nt { color: #2f6f9f; } /* Name.Tag */ -.nv { color: #003333 } /* Name.Variable */ -.ow { color: #000000; } /* Operator.Word */ -.w { color: #bbbbbb } /* Text.Whitespace */ -.mf { color: #FF6600 } /* Literal.Number.Float */ -.mh { color: #FF6600 } /* Literal.Number.Hex */ -.mi { color: #FF6600 } /* Literal.Number.Integer */ -.mo { color: #FF6600 } /* Literal.Number.Oct */ -.sb { color: #CC3300 } /* Literal.String.Backtick */ -.sc { color: #CC3300 } /* Literal.String.Char */ -.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */ -.s2 { color: #CC3300 } /* Literal.String.Double */ -.se { color: #CC3300; } /* Literal.String.Escape */ -.sh { color: #CC3300 } /* Literal.String.Heredoc */ -.si { color: #AA0000 } /* Literal.String.Interpol */ -.sx { color: #CC3300 } /* Literal.String.Other */ -.sr { color: #33AAAA } /* Literal.String.Regex */ -.s1 { color: #CC3300 } /* Literal.String.Single */ -.ss { color: #FFCC33 } /* Literal.String.Symbol */ -.bp { color: #336666 } /* Name.Builtin.Pseudo */ -.vc { color: #003333 } /* Name.Variable.Class */ -.vg { color: #003333 } /* Name.Variable.Global */ -.vi { color: #003333 } /* Name.Variable.Instance */ -.il { color: #FF6600 } /* Literal.Number.Integer.Long */ - -.css .o, -.css .o + .nt, -.css .nt + .nt { color: #999; } diff --git a/_includes/tweet-button.html b/_includes/tweet-button.html deleted file mode 100644 index d69fcf0..0000000 --- a/_includes/tweet-button.html +++ /dev/null @@ -1,3 +0,0 @@ -
- -
diff --git a/_layouts/default.html b/_layouts/default.html deleted file mode 100644 index bdf5101..0000000 --- a/_layouts/default.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - - - - - {{ site.name }} - - - - - - - - - - - - - {% include header.html %} - -
- {{ content }} -
- - {% include footer.html %} - - {% include js.html %} - - diff --git a/docs.css b/docs.css index d29fb56..a9bb673 100644 --- a/docs.css +++ b/docs.css @@ -1,7 +1,3 @@ ---- -layout: nil ---- - /* * Fonts */ @@ -233,4 +229,70 @@ pre code { * Syntax highlighting */ -{% include syntax.css %} +.hll { background-color: #ffffcc } + /*{ background: #f0f3f3; }*/ +.c { color: #999; } /* Comment */ +.err { color: #AA0000; background-color: #FFAAAA } /* Error */ +.k { color: #006699; } /* Keyword */ +.o { color: #555555 } /* Operator */ +.cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */ +.cp { color: #009999 } /* Comment.Preproc */ +.c1 { color: #999; } /* Comment.Single */ +.cs { color: #999; } /* Comment.Special */ +.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */ +.ge { font-style: italic } /* Generic.Emph */ +.gr { color: #FF0000 } /* Generic.Error */ +.gh { color: #003300; } /* Generic.Heading */ +.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */ +.go { color: #AAAAAA } /* Generic.Output */ +.gp { color: #000099; } /* Generic.Prompt */ +.gs { } /* Generic.Strong */ +.gu { color: #003300; } /* Generic.Subheading */ +.gt { color: #99CC66 } /* Generic.Traceback */ +.kc { color: #006699; } /* Keyword.Constant */ +.kd { color: #006699; } /* Keyword.Declaration */ +.kn { color: #006699; } /* Keyword.Namespace */ +.kp { color: #006699 } /* Keyword.Pseudo */ +.kr { color: #006699; } /* Keyword.Reserved */ +.kt { color: #007788; } /* Keyword.Type */ +.m { color: #FF6600 } /* Literal.Number */ +.s { color: #d44950 } /* Literal.String */ +.na { color: #4f9fcf } /* Name.Attribute */ +.nb { color: #336666 } /* Name.Builtin */ +.nc { color: #00AA88; } /* Name.Class */ +.no { color: #336600 } /* Name.Constant */ +.nd { color: #9999FF } /* Name.Decorator */ +.ni { color: #999999; } /* Name.Entity */ +.ne { color: #CC0000; } /* Name.Exception */ +.nf { color: #CC00FF } /* Name.Function */ +.nl { color: #9999FF } /* Name.Label */ +.nn { color: #00CCFF; } /* Name.Namespace */ +.nt { color: #2f6f9f; } /* Name.Tag */ +.nv { color: #003333 } /* Name.Variable */ +.ow { color: #000000; } /* Operator.Word */ +.w { color: #bbbbbb } /* Text.Whitespace */ +.mf { color: #FF6600 } /* Literal.Number.Float */ +.mh { color: #FF6600 } /* Literal.Number.Hex */ +.mi { color: #FF6600 } /* Literal.Number.Integer */ +.mo { color: #FF6600 } /* Literal.Number.Oct */ +.sb { color: #CC3300 } /* Literal.String.Backtick */ +.sc { color: #CC3300 } /* Literal.String.Char */ +.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */ +.s2 { color: #CC3300 } /* Literal.String.Double */ +.se { color: #CC3300; } /* Literal.String.Escape */ +.sh { color: #CC3300 } /* Literal.String.Heredoc */ +.si { color: #AA0000 } /* Literal.String.Interpol */ +.sx { color: #CC3300 } /* Literal.String.Other */ +.sr { color: #33AAAA } /* Literal.String.Regex */ +.s1 { color: #CC3300 } /* Literal.String.Single */ +.ss { color: #FFCC33 } /* Literal.String.Symbol */ +.bp { color: #336666 } /* Name.Builtin.Pseudo */ +.vc { color: #003333 } /* Name.Variable.Class */ +.vg { color: #003333 } /* Name.Variable.Global */ +.vi { color: #003333 } /* Name.Variable.Instance */ +.il { color: #FF6600 } /* Literal.Number.Integer.Long */ + +.css .o, +.css .o + .nt, +.css .nt + .nt { color: #999; } + diff --git a/index.html b/index.html new file mode 100644 index 0000000..ee6617f --- /dev/null +++ b/index.html @@ -0,0 +1,209 @@ + + + + + + + + + + WTF, forms? + + + + + + + + + + + + +
+
+ ✈ +

WTF, forms?

+

Friendlier HTML form controls with a little CSS margic. Designed for IE9+, as well as the latest Chrome, Safari, and Firefox.

+

Created by @mdo.

+ +

+ + + + + + +

+
+
+ + +
+

Checkboxes and radios

+ +
+ +
+
<label class="control checkbox">
+  <input type="checkbox">
+  <span class="control-indicator"></span>
+  Check this custom checkbox
+</label>
+
+
+ + +
+
<label class="control radio">
+  <input type="radio" id="radio1" name="radio">
+  <span class="control-indicator"></span>
+  Toggle this custom radio
+</label>
+<label class="control radio">
+  <input type="radio" id="radio2" name="radio">
+  <span class="control-indicator"></span>
+  Or toggle this other custom radio
+</label>
+
+

Each checkbox and radio is wrapped in a <label> for three reasons:

+ +
    +
  1. It provides a larger hit areas for checking the control.
    2. +
  2. It provides a helpful and semantic wrapper to help us replace the default <input>s.
    3. +
  3. It triggers the state of the <input> automatically, meaning no JavaScript is required.
    4. +
+ +

We hide the default <input> with opacity and instead use the <span class="control-indicator"> within the <label> to build a new custom form control.

+ +

With the sibling selector (~), we use the :checked state to trigger a makeshift checked state on the custom control.

+ +

Select menu

+ +
+ +
+
<label class="select">
+  <select>
+    <option checked>Open this select menu</option>
+    <option value="1">One</option>
+    <option value="2">Two</option>
+    <option value="3">Three</option>
+  </select>
+</label>
+
+

Similar to the checkboxes and radios, we wrap the <select> in a <label> as a semantic wrapper that we can generate custom styles on with CSS's generated content.

+ +

The <select> has quite a few styles to override and includes a few hacks to get things done. Here's what's happening:

+ + + +

Heads up! This one comes with some quirks right now:

+ + + +

Any ideas on improving these are most welcome.

+ +

File browser

+ +
+ +
+
<label class="file">
+  <input type="file">
+</label>
+
+

The file input is the most gnarly of the bunch. Here's how it works:

+ + + +

In other words, it's an entirely custom element, all generated via CSS.

+ +
+ + + + + + + + + + diff --git a/index.md b/index.md deleted file mode 100644 index fca99d5..0000000 --- a/index.md +++ /dev/null @@ -1,77 +0,0 @@ ---- -layout: default ---- - -### Checkboxes and radios - -
- {% include checkbox.html %} -
-```html -{% include checkbox.html %} -``` - -
- {% include radio.html %} -
-```html -{% include radio.html %} -``` - -Each checkbox and radio is wrapped in a `