Style-Framework

One of the problems we have to contend with today is the range of mobile devices that are replacing the desktop as the means of accessing the internet. The more normal path for accessing complex sites is to replace the browser altogether and the likes of 'facebook' and 'google+' applications are forced on us rather than using the traditional browser interface. For smaller websites, the creation of applications are not a practical path, and there is nothing wrong with using a browser which removes the need to worry about the different 'app' formats. We just produce pages that work on a desktop computer or laptop and fold down to work on tablets and mobile phones.

There are many ways of creating web pages and we start with PHP on the server side along with javascript providing client side facilities. While some sites still also rely on Flash for graphic elements these are slowly being phased out. The current Framework is built around styling from Bootstrap 3 enhanced with jQuery javascript tools to improve the client side operation. Browser side validation of form entries is a key element to make that element of a site work well, and switching from the traditional mouse-over actions on a desk top to touch activated interface on a tablet or phone adds aother layer of complexity to making a site flexible across all types of devices.

Bootstrap 3 starts from a 'mobile first' basis and provides four screen size switch points. Style-Main Layout provides an overview of the basic framework we work with on but still needs a bit more detail on the various device resolutions and orientation. I still use my phone horizontally as I find the emai client a lot more logical, but while it SHOULD just be a matter of rotating the phone, Smasung have fixed orientation for things like the phone app which is unusable when the phone is locked to landscape mode. So making sites that display in a usable manor across all devices can be something of a lottery. While not perfect across all the options, our current framewrk is more than practical across all the devices we test on, without the need to create different websites for each. As we add content it is available across all devices without further work.

Current versions of the core libraries are :-

• Bootstrap - 3.3.7
• jQuery - 2.2.4
• jQuery-ui - 1.12.0

Form operation and validation uses a secondary set of libraries which are listed on the Form package documentation page.

As part of the distribution process, the larger libraries are distributed via the CDN network. Currently we are using the cdnjs network which carries most of the libraries we use. The rest being provided via the local servers.