1. State of the Front End
2017 – Chris Hallberg

2. 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 October 9 & 10

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

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

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

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

7. 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 October 9 & 10

8. 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 October 9 & 10

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

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

11. 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 October 9 & 10

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

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

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

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

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

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

18. Future JS: Offline First
VuFind Summit October 9 & 10

19. Future JS: Offline First
VuFind Summit October 9 & 10

20. Future JS: Offline First
VuFind Summit October 9 & 10

21. Future JS: Progressive Web Apps
VuFind Summit October 9 & 10

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

23. Future: Web Components
VuFind Summit October 9 & 10

24. VuFind Summit 2017 - October 9 & 10
Questions?
Comments? Concerns? Font suggestions? (I love fonts)
on Twitter
Special thanks to caniuse.com
VuFind Summit October 9 & 10