Nathan Jacobson edited this page Jan 20, 2015 · 16 revisions

Welcome to the WSU Spine framework.

Start with the standard markup.

Styles

<link href="//repo.wsu.edu/spine/1/spine.min.css" />

This single CSS file includes a CSS reset, default styles, responsive styles, and finally the styling for the spinal column itself.

Scripts

First, the Spine framework relies on jQuery and jQuery UI. For the time being, we're sticking with jQuery 1.x to preserve as much support for IE8 as possible. Additional scripts needed for a specific site can be added, including libraries like Modernizr.

Implementation

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

Secondly, we need the Spine-specific javascript.

<script src="//repo.wsu.edu/spine/1/spine.min.js"></script>

Thirdly, you may wish to alter how the spinal column loads. To do so you set the options before you call the spine packages. Look to the JavaScript Options wiki page for more information.

<script type="text/javascript">
	var spineoptions={};
</script>
<script src="//repo.wsu.edu/spine/1/spine.min.js"></script>

Lastly you may also extend the spine services by including a file/script, after the main spine package, in this format:

( function($) {
	$.extend($.ui.spine.prototype, {
		//your custom code
	});
} (jQuery) );

Read more in the JavaScript section or look at the Snippets for ideas.

Markup

In addition to these assets, the Spine requires some minimal markup.

	<html>
		<body>
			<div id="jacket">
			<div id="binder">
				<main>
					Content
				</main>
				<div id="spine" class="spine-column">
					<div id="glue" class="spine-glue">
						University Signature
						Tools
						Nav (Unordered List)
						Social Channels
						Global Footer
					</div>
				</div>
			</div>
			</div>
		</body>
	</html>

The #jacket is the outermost wrapper and fills the window width. The #binder is a container that serves to constrain the maximum width of content. Both are necessary for Spine positioning and responsive behavior.

And now for the spinal column...

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.