Permalink
Browse files

Finished updating styles to new template

  • Loading branch information...
1 parent e701bb2 commit f4f73632ade587bcbfebffa979dab97184ed8ee8 @mreidsma mreidsma committed Sep 4, 2012
Showing with 93 additions and 27 deletions.
  1. +30 −9 css/libui.css
  2. +63 −18 index.html
View
@@ -102,16 +102,17 @@ i{font-style:italic;}
.lib-horizontal-list ul {font-size:.95em;margin-bottom:1em;}
.lib-horizontal-list ul li {float:left;margin:1em 1em 0 0;padding:0 .7em 0 0;}
-.copy ul,
-.copy ol,
-.copy dl {color:#555;font-size:.95em;margin-bottom:1.5em;line-height:1.4em;}
-.copy ul{list-style-type:disc;padding-left:1.8em;}
-.copy ol {list-style-type:decimal;padding-left:1.8em;}
+ul.bullet-list,
+ol.number-list,
+dl.def-list {color:#555;margin-bottom:1.5em;line-height:1.4em;}
+ul.bullet-list{list-style-type:disc;padding-left:1.8em;}
+ol.number-list {list-style-type:decimal;padding-left:1.8em;}
-.copy li {margin:.5em 0;}
+.ul.bullet-list li,
+.ol.number-list li {margin:.5em 0;}
-.copy dt {font-weight:bold;margin-top:.8em;color:#222;}
-.copy dd {margin-bottom:.7em;border-left:.3em solid #dedede;padding-left:.5em;}
+.def-list dt {font-weight:bold;margin-top:.8em;color:#222;}
+.def-list dd {margin-bottom:.7em;border-left:.3em solid #dedede;padding-left:.5em;}
.lib-tabs {height: 2.6em;margin-top:1.5em;border-bottom: 1px solid #bbb;font-size:1em;}
.lib-tabs ul {list-style-type: none;margin: 0 0 0 1em;padding: 0;width: 100%;}
@@ -144,6 +145,26 @@ i{font-style:italic;}
.lib-form input[type="radio"],
.lib-form input[type="checkbox"]{margin-top:.7em;}
+/* Simple Form Styles */
+
+.lib-simple-form { margin: auto;background: #fff; }
+form.lib-simple-form input[type="text"] {width: 98%;padding: .2em 1%;height: 1.8em;font-size: 1.2em;border: none; display: inline; }
+
+form.lib-book-form select { width: 25%; display: block; float: left;}
+
+form.lib-book-form input[type="text"] {
+ width: 71%;
+ margin-left: 1%;
+ border: 1px solid #ddd;
+ font-size: 1.4em;
+ padding: .333em 1%;
+}
+
+form.lib-simple-form input[type="submit"] {
+ position: relative;
+
+}
+
/* Status Message Styles */
.lib-success {display: block;line-height:1.5em;margin: -0.5em 0 1.6em 0;padding: 1em 1.6em;background: #b2ff7f; border: 1px solid #8acc66;text-align: left;color: #444;}
@@ -168,7 +189,7 @@ i{font-style:italic;}
@media screen and (min-width: 56.25em) {
h2, h3 { background-color: #fff; font-size: 2em; padding: 0; color: #004875; }
-.lib-button-wide { width: 80%; margin:auto; position: relative !important; top: 0 !important; bottom: .3em !important;font-size: 1.1em;}
+.lib-button-wide { width: 80%; margin:auto; font-size: 1.4em;}
}
View
@@ -79,7 +79,7 @@
</div><!-- End .codeblock .monospace -->
<h4>Writing readable code</h4>
- <ul>
+ <ul class="bullet-list">
<li>Use classes for <abbr title="Cascading Style Sheets">CSS</abbr> styles. Use ids for semantic purposes and for in-page navigation.</li>
<li>Alphabetize attributes within an element. For example: <code>&lt;div class="line" id="lib-access" title="Accessibility Information"&gt;</code>. The exception to this is the <code>&lt;a&gt;</code> element, which should start with the href attribute; alphabetize the attributes that follow.</li>
<li>Alphabetize multiple classes within the class attribute. For instance: <code>&lt;div class="accordion-body codeblock lib-button monospace"&gt;</code></li>
@@ -91,7 +91,7 @@
</div><!-- End .line #lib-basics -->
<div class="line" id="lib-colors">
- <div class="span2 unit">
+ <div class="span1 unit">
<h3>Colors</h3>
@@ -115,15 +115,17 @@
<p class="colorblock"style="background-color: #363636; color: #fff;">#363636</p>
</div>
- </div><!-- End .line -->
-
- <p>And, of course, white (#FFFFFF).</p>
-
- </div><!-- End .span2.unit -->
-
- <div class="last.span2 unit unit">
+ <div class="left span4 unit">
+ <p class="colorblock" style="background-color: #bbbbbb; color: #fff;">#BBBBBB</p>
+ </div>
+ <div class="left span4 unit">
+ <p class="colorblock"style="background-color: #dedede; color: #363636;">#DEDEDE</p>
+ </div>
+
+ </div>
</div><!-- End .lastUnit.span2.unit -->
+ <p>And, of course, white (#FFFFFF).</p>
</div><!-- End .line#lib-colors -->
<div class="line" id="lib-grid">
@@ -213,7 +215,7 @@
<p>Use the following tips when writing <abbr title="HyperText Markup Language">HTML</abbr> to improve accessibility (as a federally funded institution, we must adhere to the <abbr title="Americans with Disabilities Act">ADA</abbr>).</p>
- <ul>
+ <ul class="bullet-list">
<li>All images must have <a href="http://www.w3schools.com/tags/att_img_alt.asp">alt attributes</a>. Describe the image, don&#8217;t just repeat the filename.</li>
<li>For navigation items and forms, if possible, use the <a href="http://www.w3.org/TR/html4/interact/forms.html#h-17.11.1">tabindex attribute</a> to make it easy to navigate without a mouse.</p>
<li>Use the <a href="http://www.w3schools.com/tags/tag_abbr.asp"><code>&lt;abbr&gt;</code> element</a> for all abbreviations and acronyms!</li>
@@ -227,11 +229,11 @@
<h3>Typography</h3>
<p>Use standard <abbr title="HyperText Markup Language">HTML</abbr> elements without any inline styles. A few notes:</p>
- <ol>
+ <ol class="number-list">
<li>Don&#8217;t use <code>&lt;h1&gt;</code>.</li>
<li><code>&lt;h2&gt;</code> is reserved for the page title at the top of the #page-content div. Please do not repeat it.</li>
<li>When possible, please use typographically correct punctuation:
- <ul>
+ <ul class="bullet-list">
<li>Apostophe: &#8217; <code>&amp;#8217;</code></li>
<li>Single Quotes: &#8216;&nbsp;&#8217; <code>&amp;#8216; &amp;#8217;</code></li>
<li>Double Quotes: &#8220;&nbsp;&#8221; <code>&amp;#8220; &amp;#8221;</code></li>
@@ -283,13 +285,13 @@
<hr />
- <ul>
- <li>Here&#8217;s a <code>&lt;ul&gt;</code></li>
+ <ul class="bullet-list">
+ <li>Here&#8217;s a <code>&lt;ul class="bullet-list"&gt;</code></li>
<li>There can be a bunch of lines.</li>
</ul>
- <ol>
- <li>Here&#8217;s a <code>&lt;ol&gt;</code></li>
+ <ol class="number-list">
+ <li>Here&#8217;s a <code>&lt;ol class="number-list"&gt;</code></li>
<li>There can be a bunch of lines.</li>
</ol>
@@ -477,15 +479,58 @@
<div class="span1 unit">
<h4>Simple Forms</h4>
- <p>When a single text input and a single submit button are all you need for a form, use the .lib-simple-form pattern. If you need a select box, a text input, and a submit, use the .lib-book-form pattern. (We use these on our "Find Articles" and "Find Books" pages, for instance.)</p>
+ <p>When a single text input and a single submit button are all you need for a form, use the .lib-simple-form pattern. If you need a select box, a text input, and a submit, use the .lib-book-form pattern. (We use these on our "Find Articles" and "Find Books" pages, for instance.) Use the grid patterns to make layout work for your implementation.</p>
+
+ <hr />
+
+ <form class="lib-simple-form">
+ <div class="line">
+ <div class="left span2of3 unit">
+ <input readonly="readonly" style="border: 1px solid #bbb;" type="text" value="form.lib-simple-form" />
+ </div>
+ <div class="lastUnit left span3 unit">
+ <input class="lib-button-wide" type="submit" value="Find It" />
+ </div>
+ </div>
+ </form>
+
+ <hr />
+
+ <form class="lib-book-form">
+ <div class="line">
+ <div class="left span2of3 unit">
+ <select name="searchtype">
+ <option selected="selected" value="X">Keyword</option>
+ <option value="t">Title</option>
+ <option value="a">Author</option>
+ <option value="c">Call No.</option>
+ <option value="i">ISBN</option>
+ <option value="d">Subject</option>
+ <option value="g">Gov. Doc. No.</option>
+ </select>
+ <input readonly="readonly" style="border: 1px solid #bbb;" type="text" value="form.lib-book-form" />
+ </div>
+ <div class="lastUnit left span3 unit">
+ <input class="lib-button-wide" type="submit" value="Find It" />
+ </div>
+ </div>
+ </form>
<div class="accordion-head lib-button-small-grey">Sample Markup</div>
<div class="accordion-body codeblock monospace">
<pre><code>
&lt;form class="lib-simple-form"&gt;
-
+ &lt;div class="line"&gt;
+ &lt;div class="left span2of3 unit"&gt;
+ &lt;input readonly="readonly" style="border: 1px solid #bbb;" type="text" value="form.lib-simple-form" /&gt;
+ &lt;/div&gt;
+ &lt;div class="lastUnit left span3 unit"&gt;
+ &lt;input class="lib-button-wide" type="submit" value="Find It" /&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+&lt;/form&gt;
</code></pre>
</div>

0 comments on commit f4f7363

Please sign in to comment.