Using the Pattern Library

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 <link> element below and the use the appropriate HTML element/class structure (as indicated in the examples). It should be the last stylesheet to load, if possible.

Writing readable code

  • Use classes for CSS styles. Use ids for semantic purposes and for in-page navigation.
  • Alphabetize attributes within an element. For example: <div class="row row-gutter" id="lib-access" title="Accessibility Information">. The exception to this is the <a> element, which should start with the href attribute; alphabetize the attributes that follow.
  • Alphabetize multiple classes within the class attribute. For instance: <div class="accordion-body codeblock lib-button monospace">

Colors

#093a6d

#0065a4

#1b6ec2

#383838

#222222

#CECDCD

And, of course, white (#FFFFFF).

Grid Units

The flexible grid that underlies the library website is based on the Bootstrap grid. Below are some of 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).

The grid is based on 12 columns. The col-* class applies to viewports larger than 1000px. col-md-* is for viewports from about 760px to 1000px. And col-sm-* is for viewports smaller than 760px.

Sample Markup

<div class="row row-gutter">
	<div class="col-3 col-md-6 col-sm-12">
		<ul id="navigation">
			<li><a href="/library/find" class="navparent">Find</a>
				<ul>
					<li><a href="/library/findarticles">Articles</a></li>
					<li><a href="/library/findbooks">Books</a></li>
				
					etc...

				</ul>
			</li>
		</ul>
	</div>
	<div class="col-3 col-md-6 col-sm-12">
		<h1 class="padding-none h2">Get Help with Citations</h1>
	
		<div class="lib_help_video">
				<a href="http://www.slideshare.net/gvsulib/apa-9324354">Using APA Style</a><br>
				<a href="http://www.slideshare.net/gvsulib/apa-9324354"><img alt="Using APA Style" src="/cms3/assets/741ECAAE-BD54-A816-71DAF591D1D7955C/apastyle.png"></a></div>
	</div>
	<div class="col-6 col-sm-12">
		<h1 class="padding-none h2">Citation Tools</h1>
	
		<p>For help with how to cite sources or create a bibliography, visit GVSU’s Writing Center. We have a number of tools to help you track, organize, and cite sources in your research:</p>
	
		etc...
	
	</div>
</div>	

.col-3 .col-md-6 .col-sm-12

.col-3 .col-md-6 .col-sm-12

.col-3 .col-md-6 .col-sm-12

.col-3 .col-md-6 .col-sm-12

.col-4 .col-sm-12

.col-4 .col-sm-12

.col-4 .col-sm-12

.col-3 .col-sm-12

.col-3 .col-sm-12

.col-6

.col-6

.col-3 .col-sm-12

.col-3 .col-sm-12

.col-3 .col-sm-12

.col-9 .col-sm-12

.col-9 .col-sm-12

.col-3 .col-sm-12

.col-6 .col-sm-12

.col-6 .col-sm-12

.col-12

Accessibility

See the Content Style Guide for information on creating accessible HTML and content.

Typography

Headings:


This is an <h1>

This is an <h2>

This is an <h3>

This is an <h4>

This is an <h5>
This is an <h6>

Text Elements:


This is a paragraph (<p>), which has a readable line height and a nice font size. I enjoy reading words on a screen.

Lists:


  • Here’s a <ul>
  • There can be a bunch of lines.
  1. Here’s a <ol>
  2. There can be a bunch of lines.

Styling:


This is <strong> text. Use this to visually and semantically place strong emphasis on text. (Do not use <b>

This is <em> -phasized text. It’s used for emphasizing text. (Do not use <i>

You can also style a <p> element or any heading level to look like any heading level. For instance, <h1 class="h2"> will semantically be an h1 but will look like an h2. Use the class .padding-none to remove padding from headings. Read more on the Bootstrap documentation.

Forms

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. Never use Clear or Reset buttons. They confuse users and lead to errors.

Sample Markup

	<form action="" method="post" name="my-form">
		<input name="hidden-field" type="hidden" value="Secret" />
	
		<div class="row row-gutter">
			<div class="col-6 col-sm-12">
				<label for="name">Name</label> 
				<input name="name" id="name" type="text" />
			</div>
			<div class="col-3 col-sm-12">
				<input name="awesomeness" id="awesomeness" type="checkbox" /> <label for="awesomeness">Are you awesome?</label>
			</div>
			<div class="col-3 col-sm-12">
				<label for="favorite-food">Your favorite food:</label>
				<select name="favorite-food" id="favorite-food">
					<option value="#">----------</option>
					<optgroup label="Meats">
						<option value="Chicken">Chicken</option>
						<option value="Beef">Beef</option>
						<option value="Pork">Pork</option>
					</optgroup>
					<optgroup label="Vegetables">
						<option value="Carrots">Carrots</option>
						<option value="Potatoes">Potatoes</option>
						<option value="Pizza">Pizza</option>
					</optgroup>
				</select>
			
				<input class="btn btn-primary" name="submit" type="submit" value="Submit" />
			</div>	
		</div>
	</form>	



	<form action="" method="get" name="search-form">
	    /* .sr-only class hides label from sighted users, reads for screen readers */
	    <label for="search" class="sr-only">Search our collection<</label>

	    /* Use only in conjunction with placeholder for sighted users */
		<input name="search" id="search" type="text" placeholder="Search our collection" />
		<input class="btn btn-primary" name="find" type="submit" value="Find it" />
	</form>

Simple Form

 

Complex Forms

Checkboxes






Radio Buttons






Select Menus

 

Notes

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 the .sr-only class to hide it from sighted users.

Also, use columns when possible to make forms appear shorter.

Buttons

The button classes .btn must be applied to all buttons. You can customize buttons with the following classes:

  • Use .btn-sm to make the button smaller
  • Use .btn-primary to make the button blue. Use this only for actions that take you to a new page (like orm submission, etc.)
  • Use .btn-default to make the button gray. Use this for buttons that trigger action on the page.
  • Read more about buttons at the Bootstrap documentation.
Sample Markup
			
	<input class="btn btn-primary" name="post" type="submit" value="Find It" />
	
.btn .btn-sm .btn-primary .btn .btn-sm .btn-default
.btn .btn-primary .btn .btn-default

Status Messages

Success, warning, and error messages give feedback to the user. You can read more at the Bootstrap documentation.

Sample Markup

	<div class="alert alert-danger">
		<p>The library is closed due to the weather. Please check the <abbr title="Grand Valley State University">GVSU</abbr> weather hotline for updates, and we'll reopen as soon as we can dig the door out.</p>
	</div>

	<div class="alert alert-success">
		<p>All right! Your Document Delivery request has been placed. We'll let you know as soon as it arrives.</p>
	</div>
	
.alert .alert-info Just a little information we want to highlight. This might include a link.
.alert .alert-success Something went well, like a request was placed or the user won the lotto. This might include a link.
.alert .alert-warning We want to tell the user something important, like the library is closed or the ASRS is down. This might include a link.
.alert .alert-danger Something has gone horribly wrong. This might include a link.

A GVSU Library Labs project. Written by Matthew Reidsma, 2018. Released under the GPL. Source code available on Github.