We have moved at community.getvera.com

Author Topic: ALTUI: Customizing bootstrap screen size break points  (Read 2838 times)

Offline amg0

  • Moderator
  • Master Member
  • *****
  • Posts: 3174
  • Karma: +210/-8
ALTUI: Customizing bootstrap screen size break points
« on: September 29, 2015, 02:12:19 pm »
[EDIT: warning this applies to bootstrap3, expect some changes with bootstrap4]

as you know ALTUI is based on bootstrap and that is the fundation of the responsive ability of the screen to adjust to various client device screen sizes.

Bootstrap implements a grid system which basically seperate the world into 4 kind of screens : extra small (xs) , small (sm),  medium (md) and large (lg ) and developpers can use the CSS classes of bootstrap to control how the screen layout will change according to the client screen size

The system is powerful but there is one gotcha which is, bootstrap CSS has defined the "break points" between these 4 screen sizes as: extra small (up to 480px)  , small (up to 768px ), medium (992px) , large (1200px) and there are no 2 mobile device screens similar in size :-(

A friend of mine was testing ALTUI on a iPHone6 plus and he showed me what happened when he moved from portrait mode to landscape mode and ALTUI was not reacting. After investigation, we found that iPhone6 plus screen width in landscape mode is 736px which , per default bootstrap is in the small category.
( cf http://viewportsizes.com/ for various device screens )

Then came the idea of customizing bootstrap breakpoints , but this requires regenerating bootstrap css file and including it in ALTUI instead of the default one. so here is the method in case you have similar needs.
But careful , if you do this, and if bootstrap evolves and I include a newer version, you will have to redo this customization. Nevertheless, here is the method:

1- go to boostrap customize page http://getbootstrap.com/customize/
2- change what you want to change and in particular the "Media queries breakpoints" section
3- click compile and download
4- get the .Zip file downloaded and open it locally
5- in js and css folder, you can keep only the .min (minified) version of the files, keep the tree structure and font folders ( see screenshot of tree structure )
6- copy the tree structure somewhere under /www on your vera so that it is accessible to the VERA web server
7- determine the url to point to the bootstrap.min.css. should be something like
8- in ALTUI version >= v757, the ALTUI device has a new variable called "LocalBootstrap", add into it the relative path to the boostrap.min.css file.   so in the previous example it is /localcdn/css
9- save, reload, refresh browser

This does not change your ability to add a theming CSS on top of it using the ThemeCSS variable ( except that if you did use a complete customized themed bootstrap.css like you can find on internet, you ll need to fix the breakpoints as well, and here there is no method, it is manual...)

once all this done, it should now use the customized bootstrap.css, and sure enough, moving a iPhone6+ in landscape mode changes the device display from one column to 2 column layout. Bingo !

attached the bootstrap 3.3.5 version, customized for iPhone6. the statements "max-width:734px" are the changes , by default it is max-width:768px in the original bootstrap.min.css
« Last Edit: January 05, 2018, 08:29:21 am by amg0 »