-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
92 lines (72 loc) · 4.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>forms.css – Consistent looking forms across all major browsers</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700">
<link rel="stylesheet" href="default.css">
</head>
<body>
<header id="header">
<hgroup>
<h1>forms.css</h1>
<h2>Consistent looking forms across all major browsers</h2>
</hgroup>
</header>
<p class="fork"><a href="https://github.com/isellsoap/forms.css"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a></p>
<p><a class="button" href="demo.html">Demo</a></p>
<h2>Other demo states</h2>
<ul>
<li><a href="demo_unstyled.html">Unstyled</a></li>
<li><a href="demo_disabled.html">Disabled</a></li>
<li>To be continued …</li>
</ul>
<h2>How to use it</h2>
<ul>
<li>Simply include the <code>forms.css</code> file in your web project.</li>
<li>Read carefully through the heavily documented <a href="https://github.com/isellsoap/forms.css/blob/gh-pages/assets/css/forms.css"><abbr>CSS</abbr> file</a> and learn form it.</li>
<li>Rip the code apart, change it according to your needs, customize it!</li>
<li>Feel free to <a href="https://github.com/isellsoap/forms.css/issues">file issues</a> and <a href="https://twitter.com/#!/isellsoap">tell me</a> what you like or don’t like about the code.</li>
</ul>
<h2>Browser support</h2>
<ul>
<li>Chrome 16+</li>
<li>Firefox 9+</li>
<li>IE 9+</li>
<li>Opera 11+</li>
<li>Safari 5+</li>
</ul>
<h2>Source code</h2>
<ul>
<li>Available as a <a href="https://github.com/isellsoap/forms.css">GitHub repository</a>.</li>
<li>Download the project either in <a href="https://github.com/isellsoap/forms.css/zipball/gh-pages">zip</a> or <a href="https://github.com/isellsoap/forms.css/tarball/gh-pages">tar</a> format.</li>
<li>Clone the project with <a href="http://git-scm.com/">Git</a> by using
<pre>$ git clone git://github.com/isellsoap/forms.css.git</pre>
</li>
<li>Confused about all the files in the folder? In order to run the demo you just need two things: the <code>demo.html</code> file and the <code>assets</code> folder. You can remove anything else.</li>
</ul>
<h2>Things to keep in mind</h2>
<ul>
<li>This is a work in progress.</li>
<li>I’ll try to extend the browser support. Yes, IE 8, I’m looking at you!</li>
<li>I completely go along with the makers of <a href="http://necolas.github.com/normalize.css/">normalize.css</a> when they say about their project that it <q>is not intended to be a mysterious ‘black box’ that is included in a project and then ignored. It should be used as a customisable starting point on any project.</q> This applies also to forms.css.</li>
<li>Elements like <code>input[type='file']</code> and <code>input[type='range']</code> are just to hard to manage or not manageable at all. I left those out.</li>
<li><abbr>CSS</abbr> documentation will be enhanced step by step.</li>
</ul>
<h2>License</h2>
<p>forms.css is published under the <a href="http://www.opensource.org/licenses/mit-license"><abbr>MIT</abbr> license</a> and <a href="http://opensource.org/licenses/GPL-3.0"><abbr>GPL</abbr> v3</a>.</p>
<h2>Acknowledgements</h2>
<ul>
<li>This project is massively inspired by <a href="http://sonspring.com/">Nathan Smith</a>’s awesome <a href="http://formalize.me/">formalize</a>. I learned a lot from it. Go check it out!</li>
<li><a href="http://nicolasgallagher.com/">Nicolas Gallagher</a>’s and <a href="https://twitter.com/#!/jon_neal">Jonathan Neal</a>’s project <a href="http://necolas.github.com/normalize.css/">normalize.css</a> has some worth reading and well documented <abbr>CSS</abbr> rule sets regarding forms.</li>
<li>Button design above by <a href="http://lab.simurai.com/css/buttons/">simurai</a>.</li>
<li>To be continued …</li>
</ul>
<p id="github-watch"><a href="https://github.com/isellsoap/forms.css" class="gitwatch">forms.css Github repository</a></p>
<script src="https://raw.github.com/addyosmani/github-watchers-button/master/github-watchers.min.js"></script>
<footer id="footer">
<p>A project by <a href="https://twitter.com/#!/isellsoap">Francesco Schwarz</a>.</p>
</footer>
</body>
</html>