[projectaon] Re: Responsive Design (was: Re: Re: The Skull of Agarash)
- From: Ingo Kloecker <projectaon@xxxxxxxxxxxxxxxx>
- To: <projectaon@xxxxxxxxxxxxx>
- Date: Thu, 29 Oct 2015 20:21:23 +0100
On Thursday 29 October 2015 16:43:17 Jonathan Blake wrote:
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?
You'd use media queries for this. For example:
=====
/* small background image as default (-> mobile first) */
.header { background-image: url(background-small.jpg); }
/* larger background image for larger viewport sizes (768px and up) */
@media (min-width: @screen-sm-min) {
.header { background-image: url(background.jpg); }
}
/* huge background image for huge viewport sizes (1200px and up) */
@media (min-width: @screen-lg-min) {
.header { background-image: url(background-huge.jpg); }
}
=====
See
https://getbootstrap.com/css/#grid-media-queries for details.
To use the constants like @screen-sm-min, @screen-lg-min that are
defined by Bootstrap you'd write the CSS in Less and then compile the
Less files to normal CSS. In the compiled CSS the above would then look
more or less as follows:
.header { background-image: url(background-small.jpg); }
@media (min-width: 768px) {
.header { background-image: url(background.jpg); }
}
@media (min-width: 1200px) {
.header { background-image: url(background-huge.jpg); }
}
The .visible-* and .hidden-* classes
(
https://getbootstrap.com/css/#responsive-utilities) can be used to make
certain parts of the website visible or hidden depending on the viewport
size. For example, on large viewports we would show the character sheet
next to the book sections, but on small viewports the character sheet
would be hidden (and would need to be opened explicitly). Of course,
this could also be solved dynamically with a bit of JavaScript.
Especially, if we anyway want to show/hide the character sheet
dynamically. The default visibility of the character sheet could still
be controlled with a .visible-lg-block to avoid flickering before the
JavaScript has been loaded and initialized.
Alternatively, we could use a fluid container together with suitable
col-*-# classes to show text and character sheet side-by-side for large
viewports and text above the character sheet for smaller viewports.
See
https://getbootstrap.com/css/#grid-options for several examples how
to make use of Bootstrap's grid system (which is really at the core of
Bootstrap's responsive design capabilities).
Regards,
Ingo
~~~~~~
Manage your subscription at
//www.freelists.org/list/projectaon
Other related posts:
