Construction kit for CSS-driven responsive navigation patterns

slendr is a yet-to-be-published, experimental development project providing several mainly CSS-driven navigation patterns for modern responsive multi-device websites. It is mainly based on CSS (respectively Sass), but has also some minor HTML and JavaScript parts. A little portion of slendr is incorporated into this website.

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 solution should be feature rich and, at best, work without any JavaScript in all modern browsers. JavaScript should only be used for getting the not-so-modern browsers on board as well.
  • 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 longer I worked on slendr and the more devices I took into account, the more complicated the project became. At a certain point I had to interrupt the development of slendr due to lack of time. Parts of it, however, had proven rather stable, so we incorporated them into several projects in the meantime. As an example, the navigation of this website is based on parts of slendr and doesn't involve any JavaScript.

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.