forked from jonezy/html-starter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
messages.html
80 lines (71 loc) · 2.83 KB
/
messages.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Html Starter - Messages</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/site.css" media="screen" />
<link href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold" rel="stylesheet" type="text/css">
</head>
<body>
<header class="clearfix">
<a href="index.html" id="logo"><h1>html starter</h1></a>
<nav>
<ul>
<li><a href="index.html">Layout</a></li>
<li><a href="messages.html" class="selected">Messages</a></li>
<li><a href="forms.html">Forms</a></li>
</ul>
</nav>
</header>
<section>
<h2>messages.css</h2>
<p>
One of the defining aspects of a web app is how it interacts with the humans that use it. For as long as I can remember
I've had a fascination with this, i've loosely used the term 'User Messages' to define it over the years, I'll continue to do
that i think
</p>
<p>
Like the term, I've also been kicking around the same basic set of classes for years that have helped me with presenting
information from my applications to the users using them. They follow a basic pattern that you have probably seen, and to be
perfectly honest I didn't come up with my original idea out of the blue either, I was inspired by Mark O'Sullivan's o8 (later vanilla)
software and the way it dealt with the 'User Message' problem.
</p>
<h3>examples</h3>
<p>
Here are the straight goods. The 4 basic message types that you deal with when building a web app.
</p>
<div class="Message_Error">
<p>This is an Error Message</p>
</div>
<footer>useful for form validation errors, application errors</footer>
<div class="Message_Success">
<p>This is a Success Message</p>
</div>
<footer>useful for indicating that an action was successfull.</footer>
<div class="Message_Warning">
<p>This is a Warning Message</p>
</div>
<footer>useful for indicating a potential problem</footer>
<div class="Message_Info">
<p>This is an Info Message</p>
</div>
<footer>useful for indicating useful information</footer>
<p></p>
<h3>details</h3>
<p>
The css that drives this is actually pretty simple at heart, you can view the source of this page to see the whole thing as
I'm just going to talk about specific points of interest here (like colours, and icons, ohhhhh the time i spent fucking around
picking just the right icons).
</p>
<p></p>
<h3>extensions</h3>
<p>
There is a useful extension class included in messages.css called Message_Flash. If you append an existing message box with this class
it will position the message at the top left of the viewport and fill the width
</p>
</section>
<footer></footer>
</body>
</html>