Bootstrap, jQuery Mobile, AngularJS, Durandal, Backbone, React…So many frameworks, so little time. Each of these has a place and many are used frequently in the construction of modern mobile sites, particularly those that are being developed in a single page architecture. But what if we really want to simplify the page and not use a framework for page routing and navigation at all? There are those in the developer community who would rather hang up their typing fingers than use something pre-built and to them I say…hey, do what you want. In the case you want to try and build it, it can be done with some HTML5 and CSS and a minimum of JS. Actually it’s kind of pretty…read on for more.
Heydon Pickering (2015) of SmashingMagazine discusses how to simplify and demonstrates so we will borrow from him a little bit. The idea is that you create a container, as is the custom with HTML5 with different IDs for each view. Think of the <main> as the parent and each of the views’ IDs as one of its children. As long as the IDs are developed and utilized in the navigation, you can use the # style of linking to move within the page. As Pickering points out, this type of navigation works even when JavaScript is turned off and it’s REALLY FAST!
Now we get into using some CSS to start hiding the views we are not looking at:
main > * {
display: none;
}
main > *:target {
display: block;
}
There is additional wizardly for ordering and also some other examples that Danny Markov(2015) demonstrates on his page. The ability to utilize your own JS and use modern CSS that browsers will read is important for those who do not need the massive overhead of a framework and all the unused code.
simplysinglepage.wordpress.com 
Nice post, Michael! I do think that there is much value in coding from scratch, however, using a framework also has its perks! Like you said, what if you don’t want either of these options! I like the approach that you have provided. I had not thought of doing that, but it does seem very simple to implement! Thanks for the information.
LikeLike
You’re welcome, I’m always happy to oblige my online fans. I’m a big fan of KISS and really keeping it simple. Sometimes the complexity I have seen is truly so someone’s ego can grow by saying…hey, hey, hey look at what I built!” It’s like buying a full china set when all you need is a red plastic beer pong cup.
LikeLike
Michael, you write so well, it’s almost conversational and more to the point, you enable us to appreciate the technical aspects without overwhelming us!
LikeLike
The sad part is I don’t even like to talk, so I type. I really just type out the words in my head so it’s kind of like a conversation anyway. When I’m at work, I do a lot of “explain it like I’m five” so I think I naturally just shift toward that. Being a nurse, we have to educate a wide range of the population and being able to adjust to your audience is very important. I have tried to bring that to the IT world.
LikeLike
Mike… Fantastic information! I like the first product page option very much! Looks really nice
LikeLike
I tried to find some simple examples that would work in almost any circumstance. These will work in every modern browser even with JavaScript enabled. You can run into some of the issues seen in your post on tracking though…no bueno!
LikeLike
This idea is really interesting and even makes SPA concept a diverse one. thanks for sharing Mike !
LikeLike
Interestingly enough, I have another single page app ready to launch for the GDoT project, that one is based on a really neat template that is quite responsive and fun to play with. It does use JavaScript and Bootstrap so I sort of broke my own rules in the interest of time and flexibility. It just proves that there really is a time and a place for all options.
LikeLike