State of the Front End 2017 – Chris Hallberg

VuFind Summit 2017 - October 9 & 10 2017 in Review Sandal theme Bootstrap-reliance reduction Custom theme template Tokenized language strings AJAX firing on scroll Channels launched Searchbox simplification Remove jquerymobile Remove Google Maps Remove Statistics New grunt dev tools Increase hair 600% Improve mobile view Improve RTL VuFind Summit 2017 - October 9 & 10

VuFind Summit 2017 - October 9 & 10 Talking Philosophy 2017 was the year of the easier customization VuFind Summit 2017 - October 9 & 10

v4.0: Sandal Design Principles Font Update 16px base Native font stack Use of more font weights VuFind Summit 2017 - October 9 & 10

v4.0: Sandal Design Principles Improve Typography 16px base Native font stack Use of more font weights VuFind Summit 2017 - October 9 & 10

v4.0: Sandal Design Principles Demonstrate Common Advanced Features Full width header Image searchbox hero Unsplash is the best VuFind Summit 2017 - October 9 & 10

v4.0: Theme Template “Principles” Make obvious simple changes to lead the way. Demonstrate a template customization and css customization. Make just ugly enough to inspire change. VuFind Summit 2017 - October 9 & 10

VuFind Summit 2017 - October 9 & 10 v4.0: Trimming Bootstrap Goals Remove hard-coded Bootstrap classes Add more unique class names throughout HTML Expected Benefits Make everything customizable via CSS Most customizable version of VuFind to date Make VuFind’s HTML framework independent VuFind Summit 2017 - October 9 & 10

v4.0: Reducing Specificity VuFind Summit 2017 - October 9 & 10

v4.0: Reducing Specificity VuFind Summit 2017 - October 9 & 10

VuFind Summit 2017 - October 9 & 10 v4.0: Flex Columns Moves the column widths from the templates to the css. Flex is more stable and flexible than floats. flex: 0 1 % VuFind Summit 2017 - October 9 & 10

VuFind Summit 2017 - October 9 & 10 The Future VuFind Summit 2017 - October 9 & 10

Future: Imminent Pull Requests New Offscreen Sidebar Account AJAX Reports VuFind Summit 2017 - October 9 & 10

VuFind Summit 2017 - October 9 & 10 Future: Bootstrap 4… Probably not… VuFind Summit 2017 - October 9 & 10

VuFind Summit 2017 - October 9 & 10 Future CSS: CSS Grid This is amazing VuFind Summit 2017 - October 9 & 10

VuFind Summit 2017 - October 9 & 10 Future CSS: PostCSS Probably not… VuFind Summit 2017 - October 9 & 10

VuFind Summit 2017 - October 9 & 10 Future JS: prettier https://prettier.io/ Pros Opinionated formatting. No more failing tests due to eslint. Cons Opinionated formatting VuFind Summit 2017 - October 9 & 10

Future JS: Offline First VuFind Summit 2017 - October 9 & 10

Future JS: Offline First VuFind Summit 2017 - October 9 & 10

Future JS: Offline First VuFind Summit 2017 - October 9 & 10

Future JS: Progressive Web Apps VuFind Summit 2017 - October 9 & 10

VuFind Summit 2017 - October 9 & 10 Future JS: ES6 classes Probably not… VuFind Summit 2017 - October 9 & 10

Future: Web Components VuFind Summit 2017 - October 9 & 10

VuFind Summit 2017 - October 9 & 10 Questions? Comments? Concerns? Font suggestions? (I love fonts) challber@villanova.edu or @crhallberg on Twitter Special thanks to caniuse.com VuFind Summit 2017 - October 9 & 10