Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Updated to new styles for new CMS template

  • Loading branch information...
commit e701bb2d378b68f578a981ef03db93c151da370f 1 parent 514b0c1
Matthew Reidsma mreidsma authored
Showing with 415 additions and 251 deletions.
  1. +70 −23 css/libui.css
  2. +339 −228 index.html
  3. +6 −0 js/respond.js
93 css/libui.css
View
@@ -1,24 +1,51 @@
table {border-collapse: collapse;border-spacing: 0; }
.codeblock{ background: #464646;border: solid #121212;border-radius: .366em;color: white;padding: 1.25em;
border-width: 2px 0 2px;}
-pre {white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;}
+pre {white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;line-height:1.5em;}
/* Grid styles : Based on Nicole Sullivan's OOCSS grids */
-.line{overflow:hidden;*overflow:visible;*zoom:1;clear:both;}
-.size1of1{float:none;width:100%;}
+.line{overflow:hidden;*overflow:visible;*zoom:1;clear:both;}
+.span1{width:99%;}
+.span2,.span3,.span4,.span2of3,.span3of4{width:99%;}
+.unit{padding:.5em 0;}
+.left,
+.right{float:none;}
+/* Begin erase */
+.size1of1{float:none;width:99%;}
.size1of2,.size1of4,.size3of4 {width:100%;}
-.unit{padding:.5em 1% .5em 0;}
+.size1of3,.size2of3{width:100%;}
+/* End erase */
+
+@media screen and (min-width: 450px) {
+.span4{width:49%;padding:.5em 1% .5em 0;}
+.left{float:left;}
+.right{float:right;}
+}
@media screen and (min-width:550px) {
-.unit{float:left;}
+.span3{width:32%;padding:.5em 1% .5em 0;}
+.span2of3{width:65%;padding:.5em 1% .5em 0;}
+
+
+/* Begin erase */
.size1of4,.size1of4{width:49%;}
+.size1of3{width:32%;}
+.size2of3{width:65%;}
+/* End erase */
}
@media screen and (min-width:900px) {
+
+.span2{width:49%;padding:.5em 1% .5em 0;}
+.span4{width:24%;}
+.span3of4{width:74%;padding:.5em 1% .5em 0;}
+
+/* Begin erase */
.size1of2{width:49%;}
.size1of4{width:24%;}
.size3of4{width:74%;}
+/* End erase */
}
/* Typography styles */
@@ -26,15 +53,15 @@ pre {white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;whi
p {font-size:100%;line-height:150%;}
-h2,h3,h4,h5,h6 { color:#093A6D;margin:.8em 0;}
+h2,h3,h4,h5,h6 { color: #004875;margin:.8em 0;}
-h2{font-family:"Gill Sans", "Century Gothic", Lucida, "Trebuchet MS", "Myriad Pro", Helvetica, Verdana, Arial, sans-serif;font-size:150%;font-weight: normal;text-transform: uppercase;}
+h2,h3{font-family: 'AlternateGothicFSNo3', Arial, sans-serif;font-size: 1.5em;font-weight: normal;margin: .3em 0; }
-h3{font-size: 120%;font-weight:bold;}
+h3 {color: #fff;padding: .2em .5em;background-color: #004875;}
h4{font-size:110%;}
-h5{font-size:105%;padding:.5em .8em;background-color:#dedede;}
+h5{font-size:105%;}
h6{font-size:105%;font-weight:bold;}
@@ -56,7 +83,8 @@ i{font-style:italic;}
/* Button styles */
.lib-button,
-.lib-button-small {background: #0090D2; background: -webkit-gradient(linear, left top, left bottom, color-stop(.2, #52a8e8), color-stop(1, #2e76cf));background: -moz-linear-gradient(center top, #52a8e8 20%, #2e76cf 100%);border: 1px solid #4081af; border-bottom-color: #20559a;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 2px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.29); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 2px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.29); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 2px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.29);color: white;display: inline-block;font-weight:normal;text-decoration:none;cursor: pointer;font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;}
+.lib-button-small,
+.lib-button-wide {background: #0090D2; background: -webkit-gradient(linear, left top, left bottom, color-stop(.2, #52a8e8), color-stop(1, #2e76cf));background: -moz-linear-gradient(center top, #52a8e8 20%, #2e76cf 100%);border: 1px solid #4081af; border-bottom-color: #20559a;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 2px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.29); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 2px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.29); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 2px rgba(255,255,255,.3), 0 1px 2px rgba(0,0,0,.29);color: white;display: inline-block;font-weight:normal;text-decoration:none;cursor: pointer;font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;}
.lib-button-grey,
.lib-button-small-grey{background:#eee;background:-moz-linear-gradient(top, rgba(255, 255, 255, .2) 0%, rgba(0, 0, 0, .2) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255, 255, 255, .2)), color-stop(100%,rgba(0, 0, 0, .2)));background: -webkit-linear-gradient(top, rgba(255, 255, 255, .2) 0%,rgba(0, 0, 0, .2) 100%);background: -o-linear-gradient(top, rgba(255, 255, 255, .2) 0%,rgba(0, 0, 0, .2) 100%);background: -ms-linear-gradient(top, rgba(255, 255, 255, .2) 0%,rgba(0, 0, 0, .2) 100%);background: linear-gradient(top, rgba(255, 255, 255, .2) 0%,rgba(0, 0, 0, .2) 100%);border: 1px solid #aaa;border-top: 1px solid #ccc;border-left: 1px solid #ccc;-moz-border-radius:.25em;-webkit-border-radius:.25em;border-radius:.25em;color: #444;display: inline-block;font-weight:bold;text-decoration:none;text-shadow: 0 1px rgba(255, 255, 255, .75);cursor: pointer;margin-bottom:1.25em;font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;}
@@ -65,6 +93,8 @@ i{font-style:italic;}
.lib-button-grey{padding:.5em 1.4em;font-size:1.3em;line-height:1.7em;}
.lib-button-small,
.lib-button-small-grey{ padding: .333em .75em;font-size:1em;line-height:1.3125em;}
+.lib-button-wide { font-size: 1.2em; line-height: 1.3125em; padding: .333em 0; text-align:center;width: 100%;}
+
/* Navigation & List Styles */
@@ -74,7 +104,7 @@ i{font-style:italic;}
.copy ul,
.copy ol,
-.copy dl {color:#555;font-size:.95em;margin-bottom:1.5em;}
+.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;}
@@ -85,15 +115,16 @@ i{font-style:italic;}
.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%;}
-.lib-tabs ul li {font-size:display: inline;float: left;width: 25%;padding:.75em 0;margin-right: 1em;border: 1px solid #bbb;background-color: #ddd;}
+.lib-tabs ul li {display: inline;float: left;width: auto;padding:.78em 1%;margin-right: 1em;border: 1px solid #bbb;background-color: #ddd;}
.lib-tabs ul li a {color: #069;text-decoration: none !important;margin: 0;display: inline-block;width: 100%;text-align: center;}
.lib-tabs ul li.active {background-color: white;border-bottom: 1px solid white !important;}
.lib-tabs ul li:hover {background-color:#bbb;}
+.lib-tabs a span { display: none; }
-.lib-letters {margin-top:2em;padding:.45em;height: 2.5em;clear: left;}
-.lib-letters li{display: inline;float: left;margin-right: .33333em;height: 1.66667em;text-align: center;padding: .1666667em .45em;border: 1px solid #D9D5CA;background-color:#fff;}
-.lib-letters li:hover{background-color:#bbb;}
-.lib-letters li a {vertical-align: middle;line-height: 1.66667em;color: #1F65A0;text-decoration: none;}
+.lib-letter {margin-top:2em;padding:.45em;height: 2.5em;clear: left;}
+.lib-letter li{display: inline;float: left;margin-right: .33333em;height: 1.66667em;text-align: center;padding: .1666667em .45em;border: 1px solid #D9D5CA;background-color:#fff;}
+.lib-letter li:hover{background-color:#bbb;}
+.lib-letter li a {vertical-align: middle;line-height: 1.66667em;color: #1F65A0;text-decoration: none;}
/* Tables styles */
@@ -109,19 +140,35 @@ i{font-style:italic;}
.lib-form label{font-size:.8em;margin: .6em 0;display:inline-block;color: #333;font-weight: bold;text-transform: uppercase;}
.lib-form input[type="text"],
-.lib-form textarea{width:100%;border:1px solid #ddd;font-size:1.1em;padding:.4em .2em;display:block;}
+.lib-form textarea{width:98%;border:1px solid #ddd;font-size:1.1em;padding:.4em 1%;display:block;}
.lib-form input[type="radio"],
.lib-form input[type="checkbox"]{margin-top:.7em;}
/* Status Message Styles */
-.lib-success {display: block;margin: -0.5em 0 1.6em 0;padding: 1em 1.6em;background: #b2ff7f; border: 1px solid #8acc66;text-align: left;color: #444;}
-.lib-alert {display: block;margin: -0.5em 0 1.6em 0;padding: 1em 1.6em;background: #ffff7f; border: 1px solid #cc6;text-align: left;color: #444;}
-.lib-error {display: block;margin: -0.5em 0 1.6em 0;padding: 1em 1.6em;background: #ff7f7f;border: 1px solid #cc6666;text-align: left;color: #444;}
+.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;}
+.lib-alert {display: block;line-height:1.5em;margin: -0.5em 0 1.6em 0;padding: 1em 1.6em;background: #ffff7f; border: 1px solid #cc6;text-align: left;color: #444;}
+.lib-error {display: block;line-height:1.5em;margin: -0.5em 0 1.6em 0;padding: 1em 1.6em;background: #ff7f7f;border: 1px solid #cc6666;text-align: left;color: #444;}
.lib-error a {color:#841b1b;}
-.lib-note {display: block;margin: -0.5em 0 1.6em 0;padding: 1em 1.6em;background: #7fc1ff;border: 1px solid #6694cc;text-align: left;color: #444;}
-lib-error a {color:#154e96;}
+.lib-note {display: block;line-height:1.5em;margin: -0.5em 0 1.6em 0;padding: 1em 1.6em;background: #7fc1ff;border: 1px solid #6694cc;text-align: left;color: #444;}
+.lib-error a {color:#154e96;}
/* Interaction Styles */
-.accordion-head{margin:1.5em 0;}
+.accordion-head{margin:1.5em 0;}
+
+/* Media Queries */
+
+@media screen and (min-width: 40.625em) {
+
+.lib-tabs a span { display: inline; }
+
+}
+
+@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;}
+
+
+}
567 index.html
View
@@ -16,14 +16,20 @@
body {font-family: Arial, Helvetica, sans-serif;color: #363636;font-size:100%;}
.monospace{font-family:courier,monospace;font-size:.8em}
- .demogrid {margin-bottom:1em;}
+ p.demogrid{margin-bottom:0 !important;}
+ .colorblock{padding: 1em 0;margin: .25em 5%;text-align:center;width: 90%; }
.grey{background-color:#eee;padding:inherit;}
- .blue{background-color:#069;;padding:inherit;}
+ .blue{background-color:#069;color:#fff;padding:inherit;}
.clear { clear: both;}
a {color: #1F65A0;}
+ @media screen and (min-width: 900px) {
+ .colorblock{padding:3em 0;}
+ }
+
+
</style>
<link rel="stylesheet" type="text/css" href="css/libui.css">
@@ -33,33 +39,38 @@
<body>
<div class="line">
- <div class="size1of1 unit">
+ <div class="span1 unit">
<h2><abbr title="User Interface">UI</abbr> Pattern Library</h2>
<div class="lib-horizontal-list">
<ul>
- <li>Show me:</li>
+ <li><b>Show me:</b></li>
+ <li><a href="#lib-colors">Colors</a></li>
<li><a href="#lib-grid">Grid Units</a></li>
<li><a href="#lib-typography">Typography</a></li>
+ <li><a href="#lib-forms">Forms</a></li>
<li><a href="#lib-buttons">Buttons</a></li>
<li><a href="#lib-navigation-elements">Navigation</a></li>
<li><a href="#lib-tables">Tables</a></li>
- <li><a href="#lib-forms">Forms</a></li>
<li><a href="#lib-icons">Icons</a></li>
<li><a href="#lib-status-messages">Status Messages</a></li>
<!--li><a href="#lib-voice-tone">Copy Examples</a></li>
<li><a href="#lib-microcopy">Microcopy Examples</a></li-->
</ul>
</div><!-- End .lib-horizontal-list -->
- </div><!-- End .size1of1 .unit -->
+ </div><!-- End span1 .unit -->
</div><!-- End .line -->
<div class="line" id="lib-basics">
- <div class="size1of1 unit copy">
+ <div class="span1 unit copy">
<h3>Using the Pattern Library</h3>
- <p>Just include the pattern library style sheet on any page with the <code>&lt;link&gt;</code> element below and the use the appropriate <abbr title="HyperText Markup Language">HTML</abbr> element/class structure (as indicated in the examples). It should be the last stylesheet to load, if possible.</p>
+ <p>The pattern library is baked into pages in the University CMS, so just use the markup in your content. On other pages, include the pattern library style sheet on any page with the <code>&lt;link&gt;</code> element below and the use the appropriate <abbr title="HyperText Markup Language">HTML</abbr> element/class structure (as indicated in the examples). It should be the last stylesheet to load, if possible.</p>
+
+ <h4>A word on fonts</h4>
+
+ <p>The GVSU website uses webfonts for headings. If you are creating content for the CMS, your fonts will be fine. If you are building outside the CMS, you may need to add the webfonts and font <abbr title="Cascading Style Sheets">CSS</abbr> to the server you are working on. See the <a href="#lib-webfonts">Typography section</a> for more details.</p>
<div class="codeblock monospace">
<pre><code>
@@ -69,21 +80,59 @@
<h4>Writing readable code</h4>
<ul>
- <li>Use classes for <abbr title="Cascading Style Sheets">CSS</abbr> styles. Use ids for semantic purposes and for in-page navigation. Ids and classes should have a &#8220;lib-&#8221; prefix.</li>
+ <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>
<li>It&#8217;s nice to follow <a href="http://www.w3schools.com/html/html_xhtml.asp">XHTML syntax</a>, but not required.</li>
</ul>
- </div><!-- End .size1of1 .unit -->
+ </div><!-- End .span1 .unit -->
</div><!-- End .line #lib-basics -->
+ <div class="line" id="lib-colors">
+ <div class="span2 unit">
+
+ <h3>Colors</h3>
+
+ <!-- Grid of colors used on the website -->
+
+ <div class="line">
+
+ <div class="left span4 unit">
+ <p class="colorblock" style="background-color: #88B3DA; color: #363636;">#88B3DA</p>
+ </div>
+
+ <div class="left span4 unit">
+ <p class="colorblock" style="background-color: #0065A4; color: #fff;">#0065A4</p>
+ </div>
+
+ <div class="left span4 unit">
+ <p class="colorblock" style="background-color: #004875; color: #fff;">#004875</p>
+ </div>
+
+ <div class="left span4 unit">
+ <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><!-- End .lastUnit.span2.unit -->
+ </div><!-- End .line#lib-colors -->
+
<div class="line" id="lib-grid">
- <div class="size1of1 unit">
+ <div class="span1 unit">
<h3>Grid Units</h3>
- <p>The flexible grid that underlies the library website is based on Nicole Sullivan&#8217;s <a href="https://github.com/stubbornella/oocss/wiki/Grids"><abbr title="Object-Oriented Cascading Style Sheets">OOCSS</abbr></a> grid structure. Below are the ways how you can layout content horizontally. (The colors are just for looks.) Please remember that the grid changes depending on screen size (resize this window to see how that works).</p>
+ <p>The flexible grid that underlies the library website is based on Nicole Sullivan&#8217;s <a href="https://github.com/stubbornella/oocss/wiki/Grids"><abbr title="Object-Oriented Cascading Style Sheets">OOCSS</abbr></a> grid structure. Below are the ways how you can lay out content horizontally. (The colors are just for looks.) Please remember that the grid changes depending on screen size (resize this window to see how that works).</p>
+
+ <p>To float items, use the classes .left and .right, depending on the direction you want.</p>
<div class="lib-button-small-grey accordion-head">Sample Markup</div>
@@ -91,7 +140,7 @@
<pre><code>
&lt;div class="line"&gt;
- &lt;div class="unit size1of4"&gt;
+ &lt;div class="left span4 unit"&gt;
&lt;ul id="navigation"&gt;
&lt;li&gt;&lt;a href="/library/find" class="navparent"&gt;Find&lt;/a&gt;
&lt;ul&gt;
@@ -104,14 +153,14 @@
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
- &lt;div class="unit size1of4 "&gt;
+ &lt;div class="left span4 unit"&gt;
&lt;h3&gt;Get Help with Citations&lt;/h3&gt;
&lt;div class="lib_help_video"&gt;
&lt;a href="http://www.slideshare.net/gvsulib/apa-9324354"&gt;Using APA Style&lt;/a&gt;&lt;br&gt;
&lt;a href="http://www.slideshare.net/gvsulib/apa-9324354"&gt;&lt;img alt="Using APA Style" src="/cms3/assets/741ECAAE-BD54-A816-71DAF591D1D7955C/apastyle.png"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
- &lt;div class="unit size1of2"&gt;
+ &lt;div class="lastUnit left .span2 unit"&gt;
&lt;h2&gt;Citation Tools&lt;/h2&gt;
&lt;p&gt;For help with how to cite sources or create a bibliography, visit <abbr title="Grand Valley State University">GVSU</abbr>&#8217;s Writing Center. We have a number of tools to help you track, organize, and cite sources in your research:&lt;/p&gt;
@@ -122,65 +171,65 @@
&lt;/div&gt;
</code></pre>
</div><!-- End .accordion-body -->
- </div><!-- End .size1of1 .unit -->
+ </div><!-- End .span1 .unit -->
</div><!-- End .line #lib-grid -->
<div class="line">
- <div class="unit size1of4 demogrid grey">.unit .size1of4</div>
- <div class="unit size1of4 demogrid blue">.unit .size1of4</div>
- <div class="unit size1of4 demogrid grey">.unit .size1of4</div>
- <div class="unit size1of4 demogrid blue">.unit .size1of4</div>
+ <div class="left span4 unit"><p class="demogrid grey">.unit .span4</p></div>
+ <div class="left span4 unit"><p class="demogrid blue">.unit .span4</p></div>
+ <div class="left span4 unit"><p class="demogrid grey">.unit .span4</p></div>
+ <div class="left span4 unit"><p class="demogrid blue">.unit .span4</p></div>
</div>
<div class="line">
- <div class="unit size1of4 demogrid grey">.unit .size1of4</div>
- <div class="unit size1of4 demogrid blue">.unit .size1of4</div>
- <div class="unit size1of2 demogrid grey">.unit .size1of2 </div>
+ <div class="left span4 unit"><p class="demogrid grey">.unit .span4</p></div>
+ <div class="left span4 unit"><p class="demogrid blue">.unit .span4</p></div>
+ <div class="left span2 unit"><p class="demogrid grey">.unit .span2</p></div>
</div>
<div class="line">
- <div class="unit size1of2 demogrid blue">.unit .size1of2</div>
- <div class="unit size1of4 demogrid grey">.unit .size1of4</div>
- <div class="unit size1of4 demogrid blue">.unit .size1of4 </div>
+ <div class="left span2 unit"><p class="demogrid blue">.unit .span2</p></div>
+ <div class="left span4 unit"><p class="demogrid grey">.unit .span4</p></div>
+ <div class="left span4 unit"><p class="demogrid blue">.unit .span4</p></div>
</div>
<div class="line">
- <div class="unit size1of4 demogrid grey">.unit .size1of4</div>
- <div class="unit size3of4 demogrid blue">.unit .size3of4 </div>
+ <div class="left span4 unit"><p class="demogrid grey">.unit .span4</p></div>
+ <div class="left span3of4 unit"><p class="demogrid blue">.unit .span3of4</p></div>
</div>
<div class="line">
- <div class="unit size3of4 demogrid blue">.unit .size3of4</div>
- <div class="unit size1of4 demogrid grey">.unit .size1of4 </div>
+ <div class="left span3of4 unit"><p class="demogrid blue">.unit .span3of4</p></div>
+ <div class="left span4 unit"><p class="demogrid grey">.unit .span4</p></div>
</div>
<div class="line">
- <div class="unit size1of1 demogrid blue">.unit .size1of1 .</div>
+ <div class="left span1 unit"><p class="demogrid blue">.unit .span1</p></div>
</div>
<div class="line" id="lib-access">
- <div class="unit size1of1 copy">
+ <div class="copy left span1 unit">
<h3>Accessibility</h3>
<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>
<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, 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>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>
<li>All elements in forms should have a corresponding <code>&lt;label&gt;</code> (except submit buttons).</li>
</ul>
- </div><!-- End .size1of1 .unit -->
+ </div><!-- End .span1 .unit -->
</div><!-- End .line #lib-access -->
<div class="line" id="lib-typography">
- <div class="unit size1of1 copy">
+ <div class="copy left span1 unit">
<h3>Typography</h3>
<p>Use standard <abbr title="HyperText Markup Language">HTML</abbr> elements without any inline styles. A few notes:</p>
<ol>
- <li><code>&lt;h1&gt;</code> is reserved for the "University Libraries" in the header. Please do not repeat it.</li>
- <li><code>&lt;h2&gt;</code> is reserved for the page title at the top of the content div. Please do not repeat it.</li>
+ <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>
<li>Apostophe: &#8217; <code>&amp;#8217;</code></li>
@@ -192,7 +241,7 @@
</ul>
</li>
</ol>
- </div><!-- End .size1of1 .unit -->
+ </div><!-- End .span1 .unit -->
</div><!-- End .line #lib-typography -->
<div class="lib-button-small-grey accordion-head">Show Typographic Styles</div>
@@ -200,7 +249,7 @@
<div class="accordion-body aside">
<div class="line">
- <div class="size1of4 unit">
+ <div class="copy left span4 unit">
<h4>Headings:</h4>
@@ -211,9 +260,10 @@
<h4>This is an <code>&lt;h4&gt;</code></h4>
<h5>This is an <code>&lt;h5&gt;</code></h5>
<h6>This is an <code>&lt;h6&gt;</code></h6>
- </div><!-- End .size1of4 .unit -->
+
+ </div><!-- End .span4 .unit -->
- <div class="size1of4 unit">
+ <div class="copy left span4 unit">
<h4>Text Elements:</h4>
@@ -223,11 +273,13 @@
<blockquote><p>Here is a <code>&lt;blockquote&gt;</code>, where I&#8217;m citing something by someone else!</p><cite>Here is a <code>&lt;cite&gt; element</code></cite></blockquote>
- </div><!-- End .size1of4 .unit -->
+ </div><!-- End .span4 .unit -->
- <div class="size1of4 unit copy">
+ <div class="copy left span4 unit">
<h4>Lists:</h4>
+
+ <p>Use the .copy class on an ordered, unordered, or definition list's container, since the reset styles strip out default styling on all lists.</p>
<hr />
@@ -248,8 +300,8 @@
<dt>Oh here&#8217;s another term.</dt>
<dd><p>How many definitions are there? Sheesh.</p></dd>
</dl>
- </div><!-- End .size1of4 .unit -->
- <div class="size1of4 unit ">
+ </div><!-- End .span4 .unit -->
+ <div class="copy lastUnit left span4 unit">
<h4>Styling:</h4>
@@ -264,17 +316,189 @@
<p><i>Use <code>&lt;i&gt;</code> if you just want italics without any semantic value.</i></p>
<p>Use a <code>&lt;span class="ftype"&gt;</code> to indicate a file type, such as <span class="ftype">PDF</span></p>
- </div><!-- End .size1of4 .unit -->
+ </div><!-- End .span4 .unit -->
</div><!-- End .line -->
</div><!-- End .accordion-body .aside -->
+ <div class="line" id="lib-webfonts">
+ <div class="left span1 unit">
+
+ <h4>Adding Webfonts to your non-<abbr title="Content Management System">CMS</abbr> Page</h4>
+
+ <p><abbr title="Grand Valley State University">GVSU</abbr> uses the web font Alternate Gothic 3 for many of its headings. If you are building a new page or site on a non-GVSU server, you'll need to include the font stylesheet and webfonts on the server.
+
+ <p>You should have the files for the web fonts. If not, ask <a href="mailto:reidsmam@gvsu.edu" title="Email Matthew to ask him for the webfonts">Matthew</a> for them.</p>
+
+ <p>Upload the fonts and the stylesheet to the same folder on the server your page will be on. Then update the path and include the following &lt;link&gt; element in the &lt;head&gt; of your page:</p>
+
+ <div class="codeblock monospace">
+
+<pre><code>&lt;link rel="stylesheet" type="text/css" href="PATH/TO/FONT/DIRECTORY/gvsu-fonts.css"&gt;</code></pre>
+
+ </div><!-- End .codeblock.monospace -->
+
+ </div><!-- End .span1.unit -->
+ </div><!-- End .line -->
+
+ <div class="line" id="lib-forms">
+ <div class="copy left span1 unit">
+
+ <h3>Forms</h3>
+
+ <p>Forms are the backbone of the library website. Every system that our users have to create an account with or input data into is a potential place we will lose them. Make them simple. <strong>Never</strong> use Clear or Reset buttons. They confuse users and lead to errors.</p>
+
+ <div class="accordion-head lib-button-small-grey">Sample Markup</div>
+
+ <div class="accordion-body codeblock monospace">
+
+<pre><code>
+&lt;div class="lib-form"&gt;
+ &lt;form action="" method="post" name="my-form"&gt;
+ &lt;input name="hidden-field" type="hidden" value="Secret" /&gt;
+
+ &lt;div class="line"&gt;
+ &lt;div class="left span2 unit"&gt;
+ &lt;label for="name"&gt;Name&lt;/label&gt;
+ &lt;input name="name" type="text" /&gt;
+ &lt;/div&gt;
+ &lt;div class="left span4 unit"&gt;
+ &lt;input name="awesomeness" type="checkbox" /&gt; &lt;label class="lib-inline" for="awesomeness"&gt;Are you awesome?&lt;/label&gt;
+ &lt;/div&gt;
+ &lt;div class="lastUnit left span4 unit "&gt;
+ &lt;label class="lib-inline"&gt;Your favorite food:&lt;/label&gt;
+ &lt;select name="favorite-food"&gt;
+ &lt;option value="#"&gt;----------&lt;/option&gt;
+ &lt;optgroup label="Meats"&gt;
+ &lt;option value="Chicken"&gt;Chicken&lt;/option&gt;
+ &lt;option value="Beef"&gt;Beef&lt;/option&gt;
+ &lt;option value="Pork"&gt;Pork&lt;/option&gt;
+ &lt;/optgroup&gt;
+ &lt;optgroup label="Vegetables"&gt;
+ &lt;option value="Carrots"&gt;Carrots&lt;/option&gt;
+ &lt;option value="Potatoes"&gt;Potatoes&lt;/option&gt;
+ &lt;option value="Pizza"&gt;Pizza&lt;/option&gt;
+ &lt;/optgroup&gt;
+ &lt;/select&gt;
+
+ &lt;input class="lib-button" name="submit" type="submit" value="Submit" /&gt;
+ &lt;/div&gt;
+ &lt;/div&gt;
+ &lt;/form&gt;
+&lt;/div&gt;
+
+&lt;div class="lib-form"&gt;
+ &lt;form action="" method="get" name="search-form"&gt;
+ &lt;input name="search" type="text" /&gt;
+ &lt;input class="lib-button" name="find" type="submit" value="Find it" /&gt;
+ &lt;/form&gt;
+&lt;/div&gt;
+</code></pre>
+
+ </div><!-- End .accordion-body .codeblock .monospace -->
+
+ </div><!-- End .span1 .unit -->
+ </div><!-- End .line #lib-form -->
+
+ <div class="line lib-form">
+ <div class="left span1 unit">
+ <label>This is a <code>&lt;Label&gt;</code></label>
+ <input type="text" placeholder="Text field" />
+ </div>
+ </div>
+
+ <div class="line lib-form">
+ <div class="left span2 unit">
+ <label>If you need to span multiple</label>
+ <input type="text" />
+ </div>
+
+ <div class="left span2 unit ">
+ <label>columns use grid units</label>
+ <input type="text" />
+ </div>
+ </div>
+
+ <div class="line lib-form">
+ <div class="span1 unit">
+ <label>Textarea</label>
+ <textarea></textarea>
+ </div>
+ </div>
+
+ <div class="line lib-form">
+ <div class="left span4 unit">
+ <h4>Checkboxes</h4>
+
+ <input type="checkbox" /> <label class="lib-inline">label.lib-inline</label><br />
+ <input type="checkbox" /> <label class="lib-inline">Option 2</label><br />
+ <input type="checkbox" /> <label class="lib-inline">Option 3</label><br />
+ <input type="checkbox" /> <label class="lib-inline">Option 4</label><br />
+ <input type="checkbox" /> <label class="lib-inline">Option 5</label><br />
+ </div><!-- End .span4 .unit -->
+
+ <div class="left span4 unit">
+ <h4>Radio Buttons</h4>
+
+ <input type="radio" /> <label class="lib-inline">Option 1</label><br />
+ <input type="radio" /> <label class="lib-inline">Option 2</label><br />
+ <input type="radio" /> <label class="lib-inline">Option 3</label><br />
+ <input type="radio" /> <label class="lib-inline">Option 4</label><br />
+ <input type="radio" /> <label class="lib-inline">Option 5</label><br />
+ </div><!-- End .span4 .unit -->
+
+ <div class="left span4 unit">
+ <h4>Select Menus</h4>
+
+ <label class="lib-inline">Choose One:</label>&nbsp;
+ <select>
+ <option selected>----------</option>
+ <optgroup label="Group One">
+ <option>Option 1</option>
+ <option>Option 2</option>
+ <option>Option 3</option>
+ </optgroup>
+ <optgroup label="Group Two">
+ <option>Option 4</option>
+ <option>Option 5</option>
+ <option>Option 6</option>
+ </optgroup>
+ </select>
+ </div><!-- End .span4 .unit -->
+
+ <div class="left span4 unit ">
+ <h4>Notes</h4>
+
+ <p>Use placeholders with text fields if you cannot have a label, but do not supply examples as placeholders. Instead, use the label as the placeholder. Still include a label in the markup but use javascript or CSS to hide it. (<a href="http://matthew.reidsrow.com/articles/14">Read more about this</a>.)</p>
+ <p>Also, use columns when possible to make forms appear shorter. Make sure to <a href="#lib-access">use tabindexes</a> as well.</p>
+ </div><!-- .End .span4 .unit -->
+ </div><!-- End .line -->
+
+ <div class="line" id="lib-simple-form">
+ <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>
+
+ <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;
+
+</code></pre>
+
+ </div>
+ </div>
+ </div>
+
<div class="line" id="lib-buttons">
- <div class="size1of1 unit">
+ <div class="left span1 unit">
<h3 id="lib-buttons">Buttons</h3>
<p>The button classes <code>.lib-button*</code> and <code>.lib-button-small*</code> can be applied to <code>&lt;a&gt;</code>, <code>&lt;span&gt;</code>, and <code>&lt;input type="submit"&gt;</code>s. Buttons that make a server request (submit buttons, links to new pages) should all get blue buttons <code>.lib-button</code> or <code>.lib-button-small</code>. Buttons that trigger actions within a page (accordions etc.) should get the grey buttons (<code>.lib-button-grey</code> or <code>.lib-button-small-grey</code>). When you have two buttons, make the preferred button blue.</p>
- <div class="lib-button-small-grey accordion-head">Sample Markup</div>
+ <div class="accordion-head lib-button-small-grey">Sample Markup</div>
<div class="accordion-body codeblock monospace">
@@ -283,23 +507,33 @@ <h3 id="lib-buttons">Buttons</h3>
</code></pre>
</div><!-- End .accordion-body .codeblock .monospace -->
- </div><!-- End .size1of1 .unit -->
+ </div><!-- End .span1 .unit -->
</div><!-- End .line #lib-buttons -->
<div class="line">
- <div class="size1of2 unit">
+ <div class="left span2 unit">
<span class="lib-button-small">.lib-button-small</span>
<span class="lib-button-small-grey">.lib-button-small-grey</span>
</div>
- <div class="size1of2 unit">
+ <div class="left span2 unit">
<span class="lib-button">.lib-button</span>
<span class="lib-button-grey">.lib-button-grey</span>
</div>
</div><!-- End .line -->
+
+ <p>Use this class when you want a submit button to be the width of the viewport on small screens, but enclose it in a grid column so that it sizes properly on larger screens.</p>
+
+ <div class="line">
+
+ <div class="span4 unit">
+ <span class="lib-button-wide">.lib-button-wide</span>
+ </div>
+
+ </div>
<div class="line" id="lib-navigation-elements">
- <div class="unit size1of1">
+ <div class="span1 unit">
<h3>Tabs &amp; Navigation Elements</h3>
@@ -317,12 +551,12 @@ <h3 id="lib-buttons">Buttons</h3>
<li><a href="">Third Link etc...</a></li>
</ul>
</div>
- </div><!-- End .size1of1 .unit -->
+ </div><!-- End .span1 .unit -->
</div><!-- End .line -->
<div class="line">
- <div class="size1of1 unit">
- <div class="lib-button-small-grey accordion-head clear">Sample Markup</div>
+ <div class="span1 unit">
+ <div class="accordion-head clear lib-button-small-grey">Sample Markup</div>
<div class="accordion-body codeblock monospace">
@@ -337,26 +571,28 @@ <h3 id="lib-buttons">Buttons</h3>
</code></pre>
</div><!-- End .accordion-body .codeblock .monospace -->
- </div><!-- End .size1of1 .unit -->
+ </div><!-- End .span1 .unit -->
</div><!-- End .line -->
<div class="line">
- <div class="size1of1 unit">
+ <div class="span1 unit">
<h4>Tabs</h4>
+
+ <p>Wrap non-essential text in spans within the tab links to hide from smaller screens.</p>
<div class="lib-tabs">
<ul>
<li class="active"><a href="#">.lib-tabs ul li.active</a></li>
<li><a href="#">.lib-tabs ul li</a></li>
- <li><a href="#">.lib-tabs ul li</a></li>
+ <li><a href="#"><span>A Very, Very </span>Long Title</a></li>
</ul>
</div>
- </div><!-- End .size1of1 .unit -->
+ </div><!-- End .span1 .unit -->
</div><!-- End .line -->
<div class="line">
- <div class="size1of1 unit">
- <div class="lib-button-small-grey accordion-head clear">Sample Markup</div>
+ <div class="span1 unit">
+ <div class="accordion-head clear lib-button-small-grey">Sample Markup</div>
<div class="accordion-body codeblock monospace">
@@ -370,14 +606,14 @@ <h3 id="lib-buttons">Buttons</h3>
&lt;/div&gt;
</code></pre>
</div><!-- End .accordion-body .codeblock .monospace -->
- </div><!-- End .size1of1 .unit -->
+ </div><!-- End .span1 .unit -->
</div><!-- End .line -->
<div class="line">
- <div class="size1of1 unit">
+ <div class="span1 unit">
<h4>Alphabetic Navigation</h4>
- <div class="lib-letters">
+ <div class="lib-letter">
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
@@ -392,17 +628,17 @@ <h3 id="lib-buttons">Buttons</h3>
<li><a href="#">K</a></li>
</ul>
</div>
- </div><!-- End .size1of1 .unit -->
+ </div><!-- End .span1 .unit -->
</div><!-- End .line -->
<div class="line">
- <div class="size1of1 unit">
+ <div class="span1 unit">
<div class="accordion-head clear lib-button-small-grey ">Sample Markup</div>
<div class="accordion-body codeblock monospace">
<pre><code>
-&lt;div class="lib-letters"&gt;
+&lt;div class="lib-letter"&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;/li&gt;
@@ -420,21 +656,25 @@ <h3 id="lib-buttons">Buttons</h3>
</code></pre>
</div><!-- End .accordion-body .codeblock .monospace -->
- </div><!-- End .size1of1 .unit -->
+ </div><!-- End .span1 .unit -->
</div><!-- End .line #lib-navigation-elements -->
<div class="line" id="lib-tables">
- <div class="size1of1 unit copy">
+ <div class="span1 unit copy">
<h3>Tables</h3>
- <p>Please don&#8217;t use tables for layout. Puppies die when you do that. If you can&#8217;t avoid using tables (for instance, for tabular data!), make sure you look at the examples so your tables don&#8217;t look terrible on small screens.</p>
+ <p>Please don&#8217;t use tables for layout. Puppies die when you do that. If you can&#8217;t avoid using tables (for instance, for tabular data!), use inline media queries to hide non-essential columns on smaller screens, depending on your table's content.</p>
<div class="lib-button-small-grey accordion-head">Sample Markup</div>
<div class="accordion-body codeblock monospace">
<pre><code>
+&lt;style&gt;
+.col2 { display: none; }
+@media screen and (min-width: 45em) { .col2 { display: table-cell; }}
+&lt;/style&gt;
&lt;div class="lib-table"&gt;
&lt;table&gt;
&lt;thead&gt;
@@ -443,20 +683,20 @@ <h3 id="lib-buttons">Buttons</h3>
&lt;/tr&gt;
&lt;tr class="lib-row-headings"&gt;
&lt;th&gt;tr.lib-row-headings th&lt;/th&gt;
- &lt;th&gt;Column 2&lt;/th&gt;
+ &lt;th class="col2&gt;Column 2&lt;/th&gt;
&lt;th&gt;Column 3&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;One&lt;/td&gt;
- &lt;td&gt;One&lt;/td&gt;
+ &lt;td class="col2"&gt;One&lt;/td&gt;
&lt;td&gt;One&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Two&lt;/td&gt;
- &lt;td&gt;Two&lt;/td&gt;
+ &lt;td class="col2"&gt;Two&lt;/td&gt;
&lt;td&gt;Two&lt;/td&gt;
&lt;/tr&gt;
@@ -468,7 +708,10 @@ <h3 id="lib-buttons">Buttons</h3>
</div><!-- End .accordion-body .codeblock .monospace -->
<div class="lib-table">
-
+ <style>
+ .col2 { display: none;}
+ @media screen and (min-width: 45em) { .col2 {display: table-cell;}}
+ </style>
<table>
<thead>
<tr>
@@ -476,213 +719,81 @@ <h3 id="lib-buttons">Buttons</h3>
</tr>
<tr class="lib-row-headings">
<th>tr.lib-row-headings th</th>
- <th>Column 2</th>
- <th>Column 3</th>
+ <th class="col2">Non-Essential Data</th>
+ <th>Essentail Data</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
- <td>One</td>
+ <td class="col2">One</td>
<td>One</td>
</tr>
<tr>
<td>Two</td>
- <td>Two</td>
+ <td class="col2">Two</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
- <td>Three</td>
+ <td class="col2">Three</td>
<td>Three</td>
</tr>
<tr>
<td>Four</td>
- <td>Four</td>
+ <td class="col2">Four</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
- <td>Five</td>
+ <td class="col2">Five</td>
<td>Five</td>
</tr>
</tbody>
</table>
</div><!-- End .lib-table -->
- </div><!-- End .size1of1 .unit -->
+ </div><!-- End .span1 .unit -->
</div><!-- End .line -->
- <div class="line" id="lib-forms">
- <div class="copy size1of1 unit">
-
- <h3>Forms</h3>
-
- <p>Forms are the backbone of the library website. Every system that our users have to create an account with or input data into is a potential place we will lose them. Make them simple. <strong>Never</strong> use Clear or Reset buttons. They confuse users and lead to errors.</p>
-
- <div class="accordion-head lib-button-small-grey">Sample Markup</div>
-
- <div class="accordion-body codeblock monospace">
-
-<pre><code>
-&lt;div class="lib-form"&gt;
- &lt;form action="" method="post" name="my-form"&gt;
- &lt;input name="hidden-field" type="hidden" value="Secret" /&gt;
- &lt;div class="line"&gt;
- &lt;div class="size1of2 unit"&gt;
- &lt;label for="name"&gt;Name&lt;/label&gt;
- &lt;input name="name" type="text" /&gt;
- &lt;/div&gt;
- &lt;div class="size1of4 unit"&gt;
- &lt;input name="awesomeness" type="checkbox" /&gt; &lt;label class="lib-inline" for="awesomeness"&gt;Are you awesome?&lt;/label&gt;
- &lt;/div&gt;
- &lt;div class="size1of4 unit "&gt;
- &lt;label class="lib-inline"&gt;Your favorite food:&lt;/label&gt;
- &lt;select name="favorite-food"&gt;
- &lt;option value="#"&gt;----------&lt;/option&gt;
- &lt;optgroup label="Meats"&gt;
- &lt;option value="Chicken"&gt;Chicken&lt;/option&gt;
- &lt;option value="Beef"&gt;Beef&lt;/option&gt;
- &lt;option value="Pork"&gt;Pork&lt;/option&gt;
- &lt;/optgroup&gt;
- &lt;optgroup label="Vegetables"&gt;
- &lt;option value="Carrots"&gt;Carrots&lt;/option&gt;
- &lt;option value="Potatoes"&gt;Potatoes&lt;/option&gt;
- &lt;option value="Pizza"&gt;Pizza&lt;/option&gt;
- &lt;/optgroup&gt;
- &lt;/select&gt;
-
- &lt;input class="lib-button" name="submit" type="submit" value="Submit" /&gt;
- &lt;/div&gt;
- &lt;/div&gt;
- &lt;/form&gt;
-&lt;/div&gt;
-
-&lt;div class="lib-form"&gt;
- &lt;form action="" method="get" name="search-form"&gt;
- &lt;input name="search" type="text" /&gt;
- &lt;input class="lib-button" name="find" type="submit" value="Find it" /&gt;
- &lt;/form&gt;
-&lt;/div&gt;
-</code></pre>
-
- </div><!-- End .accordion-body .codeblock .monospace -->
-
- </div><!-- End .size1of1 .unit -->
- </div><!-- End .line #lib-form -->
-
- <div class="line lib-form">
- <div class="size1of1 unit">
- <label>This is a <code>&lt;Label&gt;</code></label>
- <input type="text" placeholder="Text field" />
- </div>
- </div>
-
- <div class="line lib-form">
- <div class="size1of2 unit">
- <label>If you need to span multiple</label>
- <input type="text" />
- </div>
-
- <div class="size1of2 unit ">
- <label>columns use grid units</label>
- <input type="text" />
- </div>
- </div>
-
- <div class="line lib-form">
- <div class="size1of1 unit">
- <label>Textarea</label>
- <textarea></textarea>
- </div>
- </div>
-
- <div class="line lib-form">
- <div class="size1of4 unit">
- <h4>Checkboxes</h4>
-
- <input type="checkbox" /> <label class="lib-inline">label.lib-inline</label><br />
- <input type="checkbox" /> <label class="lib-inline">Option 2</label><br />
- <input type="checkbox" /> <label class="lib-inline">Option 3</label><br />
- <input type="checkbox" /> <label class="lib-inline">Option 4</label><br />
- <input type="checkbox" /> <label class="lib-inline">Option 5</label><br />
- </div><!-- End .size1of4 .unit -->
-
- <div class="size1of4 unit">
- <h4>Radio Buttons</h4>
-
- <input type="radio" /> <label class="lib-inline">Option 1</label><br />
- <input type="radio" /> <label class="lib-inline">Option 2</label><br />
- <input type="radio" /> <label class="lib-inline">Option 3</label><br />
- <input type="radio" /> <label class="lib-inline">Option 4</label><br />
- <input type="radio" /> <label class="lib-inline">Option 5</label><br />
- </div><!-- End .size1of4 .unit -->
-
- <div class="size1of4 unit">
- <h4>Select Menus</h4>
-
- <label class="lib-inline">Choose One:</label>&nbsp;
- <select>
- <option selected>----------</option>
- <optgroup label="Group One">
- <option>Option 1</option>
- <option>Option 2</option>
- <option>Option 3</option>
- </optgroup>
- <optgroup label="Group Two">
- <option>Option 4</option>
- <option>Option 5</option>
- <option>Option 6</option>
- </optgroup>
- </select>
- </div><!-- End .size1of4 .unit -->
-
- <div class="size1of4 unit ">
- <h4>Notes</h4>
-
- <p>Use placeholders with text fields if you cannot have a label, but do not supply examples as placeholders. Instead, use the label as the placeholder. Still include a label in the markup but use javascript or CSS to hide it. (<a href="http://matthew.reidsrow.com/articles/14">Read more about this</a>.)</p>
- <p>Also, use columns when possible to make forms appear shorter. Make sure to <a href="#lib-access">use tabindexes</a> as well.</p>
- </div><!-- .End .size1of4 .unit -->
- </div><!-- End .line -->
<div class="line">
- <div class="unit size1of1">
+ <div class="span1 unit">
<h3 id="lib-icons">Icons</h3>
- <p>We use a series of icons throughout the site to signify common actions.</p>
+ <p>We use a series of icons throughout the site to signify common actions. If used as images, the alt attribute should match the action rather than describe the image. You can move these to another server if needed to avoid secure protocol issues with fussy browsers.</p>
<div class="lib-horizontal-list">
<ul>
- <li><img src="http://gvsu.edu/icon/pencil.png" alt="Edit Icon" /> <a href="http://gvsu.edu/icon/pencil.png">Edit</a></li>
- <li><img src="http://gvsu.edu/icon/delete.png" alt="Delete Icon" /> <a href="http://gvsu.edu/icon/delete.png">Delete</a></li>
- <li><img src="http://gvsu.edu/icon/add.png" alt="Add Icon" /> <a href="http://gvsu.edu/icon/add.png">Add</a></li>
- <li><img src="http://gvsu.edu/icon/help.png" alt="Help Icon" /> <a href="http://gvsu.edu/icon/help.png">Help</a></li>
+ <li><img src="http://gvsu.edu/icon/pencil.png" alt="Edit" /> <a href="http://gvsu.edu/icon/pencil.png">Edit</a></li>
+ <li><img src="http://gvsu.edu/icon/delete.png" alt="Delete" /> <a href="http://gvsu.edu/icon/delete.png">Delete</a></li>
+ <li><img src="http://gvsu.edu/icon/add.png" alt="Add" /> <a href="http://gvsu.edu/icon/add.png">Add</a></li>
+ <li><img src="http://gvsu.edu/icon/help.png" alt="Help" /> <a href="http://gvsu.edu/icon/help.png">Help</a></li>
</ul>
</div>
- </div><!-- End .size1of1 .unit -->
+ </div><!-- End .span1 .unit -->
</div><!-- End .line -->
<div class="line">
- <div class="size1of1 unit">
+ <div class="span1 unit">
<div class="accordion-head lib-button-small-grey">Sample Markup</div>
<div class="accordion-body codeblock monospace">
<pre><code>
&lt;img src="http://gvsu.edu/icons/pencil.png" alt="Edit" /&gt;
- &lt;li class="editlink"&gt;Edit&lt;/li&gt;
</code></pre>
</div><!-- End .accordion-body .codeblock .monospace -->
- </div><!-- End .size1of1 .unit -->
+ </div><!-- End .span1 .unit -->
</div><!-- End .line -->
<div class="line" id="lib-status-messages">
- <div class="size1of1 unit">
+ <div class="span1 unit">
<h3>Status Messages</h3>
@@ -698,7 +809,7 @@ <h3 id="lib-icons">Icons</h3>
&lt;/div&gt;
&lt;div class="lib-success"&gt;
- &lt;p&gt;All right! Your Document Delivery request has been placed. We'll let you know as soon as it arrives. Thanks!&lt;/p&gt;
+ &lt;p&gt;All right! Your Document Delivery request has been placed. We'll let you know as soon as it arrives.&lt;/p&gt;
&lt;/div&gt;
</code></pre>
@@ -713,7 +824,7 @@ <h3 id="lib-icons">Icons</h3>
<div class="lib-error"><strong>.lib-error</strong> Something has gone horribly wrong. This might include <a href="#">a link</a>.</div>
- </div><!-- End .size1of1 .unit -->
+ </div><!-- End .span1 .unit -->
</div><!-- End .line -->
<!--h3 id="lib-voice-tone">Copy Examples</h3>
@@ -721,7 +832,7 @@ <h3 id="lib-icons">Icons</h3>
<h3 id="lib-microcopy">Microcopy Examples</h3>
<div class="line">
- <div class="size1of1 unit">
+ <div class="span1 unit">
<p>Use these examples as a way to phrase Tweets, chat responses, or short snippets of copy on the GVSU Library website. (See the Mary Idema Pew voice and tone document for tips on the /newbuilding website.) Some tips:</p>
@@ -739,7 +850,7 @@ <h3 id="lib-microcopy">Microcopy Examples</h3>
<footer>
<div class="line">
- <div class="size1of1 unit">
+ <div class="span1 unit">
<hr />
<p>A <a href="http://gvsu.edu/library/labs"><abbr title="Grand Valley State University">GVSU</abbr> Library Labs</a> project. Written by <a href="http://matthewreidsma.com">Matthew Reidsma</a>, 2012. Released under the <a href="http://www.gnu.org/copyleft/gpl.html"><abbr title="Gnu Public License">GPL</abbr></a>. Source code available on <a href="https://github.com/gvsulib/UI-Patterns">Github</a>.</p>
6 js/respond.js
View
@@ -0,0 +1,6 @@
+/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
+/*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */
+window.matchMedia=window.matchMedia||(function(e,f){var c,a=e.documentElement,b=a.firstElementChild||a.firstChild,d=e.createElement("body"),g=e.createElement("div");g.id="mq-test-1";g.style.cssText="position:absolute;top:-100em";d.style.background="none";d.appendChild(g);return function(h){g.innerHTML='&shy;<style media="'+h+'"> #mq-test-1 { width: 42px; }</style>';a.insertBefore(d,b);c=g.offsetWidth==42;a.removeChild(d);return{matches:c,media:h}}})(document);
+
+/*! Respond.js v1.1.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
+(function(e){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=e.matchMedia&&e.matchMedia("only all").matches;if(respond.mediaQueriesSupported){return}var w=e.document,s=w.documentElement,i=[],k=[],q=[],o={},h=30,f=w.getElementsByTagName("head")[0]||s,g=w.getElementsByTagName("base")[0],b=f.getElementsByTagName("link"),d=[],a=function(){var D=b,y=D.length,B=0,A,z,C,x;for(;B<y;B++){A=D[B],z=A.href,C=A.media,x=A.rel&&A.rel.toLowerCase()==="stylesheet";if(!!z&&x&&!o[z]){if(A.styleSheet&&A.styleSheet.rawCssText){m(A.styleSheet.rawCssText,z,C);o[z]=true}else{if((!/^([a-zA-Z:]*\/\/)/.test(z)&&!g)||z.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:z,media:C})}}}}u()},u=function(){if(d.length){var x=d.shift();n(x.href,function(y){m(y,x.href,x.media);o[x.href]=true;u()})}},m=function(I,x,z){var G=I.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),J=G&&G.length||0,x=x.substring(0,x.lastIndexOf("/")),y=function(K){return K.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+x+"$2$3")},A=!J&&z,D=0,C,E,F,B,H;if(x.length){x+="/"}if(A){J=1}for(;D<J;D++){C=0;if(A){E=z;k.push(y(I))}else{E=G[D].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&y(RegExp.$2))}B=E.split(",");H=B.length;for(;C<H;C++){F=B[C];i.push({media:F.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:k.length-1,hasquery:F.indexOf("(")>-1,minw:F.match(/\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:F.match(/\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}}j()},l,r,v=function(){var z,A=w.createElement("div"),x=w.body,y=false;A.style.cssText="position:absolute;font-size:1em;width:1em";if(!x){x=y=w.createElement("body");x.style.background="none"}x.appendChild(A);s.insertBefore(x,s.firstChild);z=A.offsetWidth;if(y){s.removeChild(x)}else{x.removeChild(A)}z=p=parseFloat(z);return z},p,j=function(I){var x="clientWidth",B=s[x],H=w.compatMode==="CSS1Compat"&&B||w.body[x]||B,D={},G=b[b.length-1],z=(new Date()).getTime();if(I&&l&&z-l<h){clearTimeout(r);r=setTimeout(j,h);return}else{l=z}for(var E in i){var K=i[E],C=K.minw,J=K.maxw,A=C===null,L=J===null,y="em";if(!!C){C=parseFloat(C)*(C.indexOf(y)>-1?(p||v()):1)}if(!!J){J=parseFloat(J)*(J.indexOf(y)>-1?(p||v()):1)}if(!K.hasquery||(!A||!L)&&(A||H>=C)&&(L||H<=J)){if(!D[K.media]){D[K.media]=[]}D[K.media].push(k[K.rules])}}for(var E in q){if(q[E]&&q[E].parentNode===f){f.removeChild(q[E])}}for(var E in D){var M=w.createElement("style"),F=D[E].join("\n");M.type="text/css";M.media=E;f.insertBefore(M,G.nextSibling);if(M.styleSheet){M.styleSheet.cssText=F}else{M.appendChild(w.createTextNode(F))}q.push(M)}},n=function(x,z){var y=c();if(!y){return}y.open("GET",x,true);y.onreadystatechange=function(){if(y.readyState!=4||y.status!=200&&y.status!=304){return}z(y.responseText)};if(y.readyState==4){return}y.send(null)},c=(function(){var x=false;try{x=new XMLHttpRequest()}catch(y){x=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return x}})();a();respond.update=a;function t(){j(true)}if(e.addEventListener){e.addEventListener("resize",t,false)}else{if(e.attachEvent){e.attachEvent("onresize",t)}}})(this);
Please sign in to comment.
Something went wrong with that request. Please try again.