You are here

Responsive CSS for Self Service Banner

Submitted by gskinner on Thu, 11/20/2014 - 16:57

I know Lumdev is for Luminis, but many of our jobs (or our influences) extend beyond Luminis. With that in mind, I wanted to share the work we've done at Lehigh University to make Self Service Banner responsive. I have nothing but good news to share about it. The changes are simple, as we like many schools, don't like to change baseline if we can help it. Although the changes are minimial, it's been a HUGE win for us. I'm getting ready to present on this at our annual PA-BUG (www.pabug.org) conference on Monday, but I'm giving the Lumdev community a head start.

We have it in production and I've heard from two other schools who have it in a test environment and are planning production releases. The code is available on GitHub here: https://github.com/Lehigh-University-WMS/Responsive-CSS-Banner-8-SSB

Before:
https://github.com/Lehigh-University-WMS/Responsive-CSS-Banner-8-SSB/blo...

After:
https://github.com/Lehigh-University-WMS/Responsive-CSS-Banner-8-SSB/blo...
https://github.com/Lehigh-University-WMS/Responsive-CSS-Banner-8-SSB/blo...
https://github.com/Lehigh-University-WMS/Responsive-CSS-Banner-8-SSB/blo...

Luminis Version:

Thank you for posting this, this will be quite beneficial.

Thanks,
Mike

Thanks Mike. I'm glad it will be helpful. I also want to give a shout out to Jon Wheat of Messiah. He's a friend and our Lumdev founder, and he went and ran with the CSS for SSB concept further. Essentially, he added two more lines of code to twbkwbis to include jquery. With Jquery he was then able to turn the top tabs into the "hamburger" icon in the mobile view, and have it be a collapsible menu. It looks AWESOME!

I was never expecting mine to be the end all solution. It's the 'dip your toe in the water' solution. I love what Jon did, and for those schools that are comfortable with adding a bit more to the package, I highly recommend that route. He's perfecting his code, and then I believe he'll be sharing it.

Another idea I'll throw out there to schools... Right now, the toughest work involved with this mod is to rip out our Lehigh color codes and replace it with your own colors. Might take 30 minutes, but even that could be eliminated. If anyone is good at SASS, I could see a way to specify active tab color, inactive tab color, hover tab color, etc... and then have it build a css file for you. I could see Ellucian going this route (or something similar) if they were interested in running with this concept.

I just ran this approach past some of our Banner people, and they seemed responsive (no pun intended) to the idea.

If we do put this in place, we'll "sass'ify" it first and share the code.