Skip to main content Skip to navigation
Web Communication The Spine

Share your feedback on the WSU Spine

Hello! WSU Web Communication is working on the next generation of a web framework for use as a base throughout the University. This framework will be made up of several different pieces, including the WSU identity, WSU web identity, and a general toolkit for working on the web at WSU.

In many ways this will be similar to what is now the WSU Spine, which has been the central framework for University sites since June of 2014. The Spine provides the vertical navigation, WSU identity, and mobile friendly framework that is behind much of the web at WSU.

We have a lot of great ideas for where we want to take the new WSU Web Framework, and we’ll be sharing and developing those in the open. First, we want to take a look back and apply the lessons we’ve learned from the WSU Spine project over the last several years.

It would be extremely helpful to have your feedback. If you’re a WSU web reader, editor, developer, or have any interest at all in the future of the web at WSU, please consider completing the WSU Spine Feedback form.

WSU Spine 1.4.3 Released

The latest version of the WSU Spine framework has been released as 1.4.3.

As always, if you are using a manual build of the WSU Spine, we recommend updating as soon as possible.

To automatically receive the benefits of bug fixes like this, we recommend using the latest version of the Spine from the centrally hosted repo.wsu.edu server. A full explanation of the hosted repository is in the project’s readme file.

https://repo.wsu.edu/spine/1/spine.min.js

https://repo.wsu.edu/spine/1/spine.min.css

Here’s a recap of the changes from this release.

Enhancements

  • Adjust Spine colors for various themes and nav elements. See #353 for the discussion and #381
  • Allow multiple nav sections to be open at the same time in the Spine. See #367
  • Allow the current nav section to be toggled closed. See #386
  • Several adjustments to test HTML markup to help better describe expected conditions of the Spine.

Bug Fixes

  • Only apply box shadow to #glue on .spine-mobile-open. See #374
  • Remove spine-mobile-open from html on resize to full screen. See #375
  • Apply a max width of 100% to figure. See #382
  • Allow other HTML tags inside anchor elements in the Spine navigation. See #385

If you run into any issues with the Spine or have suggestions, please feel free to open a new issue on the GitHub repository, stop by Open Labs on Friday morning, or bring it up on the WSU Web Slack.

WSU Spine 1.4.1 Released

The latest version of the WSU Spine framework has been released as 1.4.1.

An initial release with the most major changes went out as 1.4.0 and then a bug fix went out about an hour later to correct a regression.

As always, if you are using a manual build of the WSU Spine, we recommend updating as soon as possible.

To automatically receive the benefits of updates like this, we recommend using the latest version of the Spine from the centrally hosted repo.wsu.edu server. A full explanation of the hosted repository is in the project’s readme file.

https://repo.wsu.edu/spine/1/spine.min.js

https://repo.wsu.edu/spine/1/spine.min.css

Please visit the WSU Spine 1.4.0 release notes for a list of all changes made in this release.

Spine 1.4.0 Release Notes

As promised a week and a half ago, a new version of the Spine is pending release. We were originally hoping to get it out the door last Wednesday, but decided to let it soak a bit longer. We’re now looking at deploying the new version in the morning on Wednesday, March 30th.

In the meantime, check out the changes included with that new release below. We’ll send out another notification when the release is actually deployed.

Enhancements

This release refactors how the Spine is handled on mobile devices. Previously, we shared the logic used on larger views for calculating the heights of and resizing #glue and main as the browser resized or the document scrolled. Not using aposition: fixed header had a tendency to cause issues when scrolling through the menu on both iOS and Android devices. Android devices had troubles scrolling at all.

We now move elements in the DOM around a bit when a mobile view is detected. The Spine’s header becomes a fixed element at the top of the screen. The #glue is moved into its own #scroll element that is allowed to scroll separately from the document as a whole. The navigation appears and disappears smoothly and is much more useable on iOS and Android devices.

This is all handled in JavaScript, yet significantly reduces the amount of Spine JavaScript necessary on mobile devices. No change in markup is necessary on individual pages, it will just work.

See #314, #318, #332, #333, #334, and #337 for the majority of mobile related changes.

Framework Fixes

  • Treat mobile navigation the same in Fluid, Hybrid, and Fixed grid layouts. 990px is the mark at which we show mobile navigation. See #338.
  • Refactor how #glue positioning is handled on scroll. This fixes a bug where the navigation could appear jumpy at certain spots depending on the size of the document and the size of the window. See #342.
  • Along with that, simplify how min-height is calculated for main. See #343.
  • Calculate the height of the area exposed by the Spine action links based on window, not main so that things don’t disappear in a strange way. See #341.
  • Improve the focus state of Spine action items. Previously they would get lost if navigated through by keyboard. See#340.
  • Provide explicit button types for button elements added to the DOM by the Spine. See #347.
  • Remove a line-height: 1em rule applied to figcaption that squashed text in captions.
  • Simplify and document scripting to add active, dogeared to nav. See #328.

Removed

  • Remove unused implementation of Spine analytics in favor of jTrack. See #326.
  • Remove the dump function that was provided to aid in code debugging. This was not in use anywhere in the Spine. See #327.
  • Remove a series of unused SVG assets. See #325.
  • Remove our custom Open Sans fonts. This font should be loaded via Google’s CDN instead. See #309.

Development Changes

  • Apply an initial JSCS configuration based on the jQuery style guide. All JavaScript code must now conform to these standards. See #348.
  • Introduce CSS linting. The configuration file explains this best.
  • Use PostCSS to apply vendor prefixes. See the configuration file.
  • Replace the Ruby based grunt-contrib-sass with the much faster grunt-sass. See #322.
  • Revisit and clarify JSHint rules. See #335.

Pending Spine release available for testing

A new version of the Spine (1.4.0) is being prepped for release on Wednesday, March 23d. This is a release for enhancements and bug fixes only. We do not expect anything to break backward compatibility. 🙂

It would be great if you could spend a few minutes testing things out over the next several days. If you are an admin on the WSUWP Platform, you can change the version of the Spine that your site uses through the Customizer.

We’re still working on a full changelog to share, and will post a preliminary one soon. In the meantime, here are the primary areas to focus on:

  • Mobile navigation has been completely refactored. All modern smartphones and tablets are now expected to work. The interaction in general should be much smoother and reliable.
  • Several bugs in the Spine navigation area on all sizes have been addressed.
  • Open Sans font files are no longer being hosted as part of the Spine on repo.wsu.edu. Instead, please load Open Sans from Google Fonts in your templates. If you’re running WordPress outside of our WSUWP Platform, please make sure you’re using the latest version of the Spine Parent Theme. If your site is in the platform, you’re already good.

If you notice any bugs, please reach out through our community Slack or by filing an issue on GitHub. Thanks!

WSU Spine 1.3.0 Released

The latest version of the WSU Spine framework has been released as 1.3.0.

As always, if you are using a manual build of the WSU Spine, we recommend updating as soon as possible.

To automatically receive the benefits of bug fixes like this, we recommend using the latest version of the Spine from the centrally hosted repo.wsu.edu server. A full explanation of the hosted repository is in the project’s readme file.

https://repo.wsu.edu/spine/1/spine.min.js

https://repo.wsu.edu/spine/1/spine.min.css

Please visit the WSU Spine release page for a list of all changes made in this release. Thanks!

Styling around the WSU Spine with custom CSS

The WSU Spine was built to provide a consistent brand framework for use throughout the University. It exists in sort of a balancing act trying to allow great flexibility while maintaining a familiar look and feel for visitors to WSU web properties.

The Spine is structured as such:

Screen Shot 2015-06-05 at 5.46.58 PM

The primary site navigation and brand elements are inserted as part of the #spine container. All content appears in the main element.

It is important to keep this page structure in mind when styling a page through CSS. The Spine provides default styles for many different elements to establish the initial consistent look and feel. It also relies on some of these styles to properly display a consistent experience in the Spine area itself.

Screen Shot 2015-06-05 at 6.00.36 PM

If you look at anchor (a) elements specifically, you’ll see a few default styles in the Spine. The above two are pulled directly from spine.css. All anchors are set by default to have no text decoration and to be crimson. Anchors inside the #spine container are set to be gray, but they retain the other default property applied to all anchors on the page of text-decoration: none.

A common custom style here is to add underlines or other properties with the intent of changing the anchor elements in the page content. When dealing with general elements such as anchor, some specificity is required to make sure only the intended styles are modified.

Screen Shot 2015-06-05 at 5.58.06 PM

Prefixing the rule with main applies the intended style and leaves the #spine container as is. Not prefixing the container causes the Spine to lose its default display properties with unintended consequences.

If you’re targeting a specific page, let’s say this current post, you can still use main in addition to other body classes.

Screen Shot 2015-06-05 at 6.07.53 PM

Anchors in the Spine will remain without underline, those in the main content area will have an underline, and those in the main content area of single pages will have a dashed underline and a lighter font.

Being aware of the Spine structure and targeting elements with the appropriate specificity will go a long way in maintaining the consistent look and feel that visitors expect. We’ll also continue working to provide more explicit defaults for crucial parts of the Spine to help prevent accidental overrides.

If you’d like to dive any deeper on this or have thoughts to share, we meet weekly on Friday mornings for open lab where this discussion would be perfect. 🙂

WSU Spine 1.2.4 Released

The latest version of the WSU Spine framework has been released as 1.2.4.

As always, if you are using a manual build of the WSU Spine, we recommend updating as soon as possible.

To automatically receive the benefits of bug fixes like this, we recommend using the latest version of the Spine from the centrally hosted repo.wsu.edu server. A full explanation of the hosted repository is in the project’s readme file.

https://repo.wsu.edu/spine/1/spine.min.js

https://repo.wsu.edu/spine/1/spine.min.css

Please visit the WSU Spine release page for a list of all changes made in this release. Thanks!

WSU Spine 1.2.3 Released

The latest version of the WSU Spine framework has been released as 1.2.3. This is a much smaller release than usual, a practice we hope to continue.

As always, if you are using a manual build of the WSU Spine, we recommend updating as soon as possible.

To automatically receive the benefits of bug fixes like this, we recommend using the latest version of the Spine from the centrally hosted repo.wsu.edu server. A full explanation of the hosted repository is in the project’s readme file.

https://repo.wsu.edu/spine/1/spine.min.js

https://repo.wsu.edu/spine/1/spine.min.css

Please visit the WSU Spine release page for a list of all changes made in this release. Thanks!

WSU Spine 1.2.2 Released

The latest version of the WSU Spine framework has been released as 1.2.2. Over the last several weeks since 1.2.1, we’ve been able to focus on several minor bugs related to various layout issues in both cropped and mobile views.

As always, if you are using a manual build of the WSU Spine, we recommend updating as soon as possible.

To automatically receive the benefits of bug fixes like this, we recommend using the latest version of the Spine from the centrally hosted repo.wsu.edu server. A full explanation of the hosted repository is in the project’s readme file.

https://repo.wsu.edu/spine/1/spine.min.js

https://repo.wsu.edu/spine/1/spine.min.css

This specific release is available and cached for 120 days at these URLs:

https://repo.wsu.edu/spine/1.2.2/spine.min.js

https://repo.wsu.edu/spine/1.2.2/spine.min.css

Please visit the WSU Spine release page for a list of all changes made in this release. Thanks!