[projectaon] Re: Responsive Design (was: Re: Re: The Skull of Agarash)

  • From: Jonathan Blake <jonathan@xxxxxxxxxxxxx>
  • To: projectaon@xxxxxxxxxxxxx
  • Date: Thu, 29 Oct 2015 16:43:17 +0000

On Wed, 28 Oct 2015 at 11:02 Ingo Kloecker <projectaon@xxxxxxxxxxxxxxxx>
wrote:

Hi Jon,

On Wednesday 28 October 2015 15:51:38 Jonathan Blake wrote:
At the moment, I'm getting familiar with the basics of responsive web
design in preparation for redesigning the website and the books.

I suggest to use one of the existing CSS frameworks for this. I
recommend Twitter's Bootstrap [1] which I'm using at work and which is
really easy to use.


Thanks for the tip! This looks very promising, especially for a redesign of
the books. Integrating it with the markup PmWiki generates might be a
challenge for the main website, but this should make revamping the book
designs and adding interactive elements much simpler.

I've scanned through a couple of tutorials, but one thing I haven't
discovered is how to change the styling of a page element based on the size
of the viewport. For example, if I want to use a smaller version of the
logo and decrease the height of the header on small devices, how would I do
that? It seems that the .visible-* and .hidden-* classes can manage some of
this, but how would I change the header background image based on the
viewport size?

--
Jon

Other related posts: