How does the U3A Tauranga website use CSS? Tap or click here.

Thank you Joomla CSS for a very informative website no longer available. Part of the text about Bootstrap is reproduced here.

Joomla 3 has integrated the Twitter Bootstrap framework. With the Twitter Bootstrap framework you can build websites with Joomla for desktop computers, but also for mobile devices like mobile smart phones and tablets. You can find the website of Twitter Bootstrap on http://twitter.github.com/bootstrap/.

The Bootstrap files (version 2.3.2) in Joomla 3 are located in the folder media/jui. It is a collection of CSS files, fonts, images and javascript files. The Bootstrap files are not exactly the same files as from the Twitter Bootstrap framework. Some are customized and some files are added to work with Joomla 3. The Bootstrap framework is activated by the template of Joomla.

The Bootstrap framework responds to various screen resolutions of devices. Mobile devices have screen sizes from about 320 pixels (mobile phone) to 1280 pixels (tablets). The Bootstrap CSS uses media queries for various screen sizes to render the website accordingly. This means a much better layout and usability of your website on mobile devices. The Bootstrap framework uses the following media queries.

Up to and including 480 pixels;

Up to and including 767 pixels;

Up to and including 979 pixels;

From 768 pixels up to and including 979 pixels;

From 980 pixels;

From 1200 pixels.

How does the U3A Tauranga website use CSS?

 The Joomla / Twitter Bootstrap files remain untouched. Cascading Style Sheets means the last found entry overrides any prior formating.

This means that a copy and paste that includes any formating will over-ride the CSS in any file, a common cause of the web site losing layout, as well as not retaining the planned consistant look.


 

An example of how CSS affects an article.

The Next Meeting article is within a <div class = "nextmeeting"> tag.

css article5

 

The Next Meeting article when viiewed in the edit screen appears left justified.

css article (2)

 

The Next Meeting article when viiewed in the front end is now centre justified..

css article (3)