Construction kit for CSS-driven responsive navigation patterns
I started the slendr project during my holidays in early 2013 when I needed a highly responsive, multi-device compatible navigation solution for my OGAFP website. These were my objectives:
- The navigation should be highly responsive, featuring several layouts for different breakpoints, and provide a user experience that feels as native to the device as possible.
- As I wanted to use the solution for several projects, it would be nice if you could easily “switch” the intermediate layout stages on and off so that the number of stages is flexible. Also, it would be nice if you could substitute a specific layout stage with an alternative one, making it a “construction kit” for responsive navigation stacks.
- The navigation should be as multi-device compatible as possible. It must support touch screen devices of course (including Windows based tablets).
The most complicated aspect of slendr is that it requires a certain HTML base structure on the one hand, and some mandatory CSS properties on the other. Additionally you would, of course, want to apply a project specific styling (and most likely extra HTML as well), so there must be a possibility of easy customizing. As long as I worked actively on the project, I could not establish a really fool proof customization layer. This is where I have left off and where I have to continue once I pick up the project again.