You are here

README.txt in AT Tools 8.3

## Content Priority Layouts Explained

In 3col region content priority layouts we consider the first region in the
source order to be the most important (highest priority), therefor this is
always the widest region in the visual layout.

For example in the layout "_three_cp-2-8-2" the "second" region in the visual
layout is the widest, however in the markup it will be the first region:

Source order:

  <div class="region-first"> ... </div>
  <div class="region-second"> ... </div>
  <div class="region-third"> ... </div>

Visual layout:

   ------------------------------------------------------
  |   second   |            first           |   third    |
   ------------------------------------------------------


Here is nother example using the "_three-cp-2-2-8" layout, same source
order as above, but the visual order changes:

   ------------------------------------------------------
  |   second   |   third    |           first            |
   ------------------------------------------------------


WHY?

1. We need a system that is consistant and predictable. We have to choose something
   and the widest region is probably the most likely candidate.
2. In mobile/small screens we want the most important content to bubble to the
   top of each row, because we consider it highest priority. This is particularly
   interesting in narrow layouts using split rows (first region becomes full width
   and the other two wrap below as width defined columns).

For example in a #narrow breakpoint it is very easy to bubble the highest priority
content to the top using a layout like "_three-sr-12--6-6":

   ------------------------------------------------------
  |                       first                          |
   ------------------------------------------------------
  |         second          |            third           |
   ------------------------------------------------------

Then in mobile, when there is effectively no layout at all:

   ------------------------------------------------------
  |                       first                          |
   ------------------------------------------------------
  |                       second                         |
   ------------------------------------------------------
  |                       third                          |
   ------------------------------------------------------


NOTE: if you don't want this to happen, i.e. you want the visual order to always
follow the source order, then use the standard layouts. For example "_three-2-8-2" as
opposed to "_three_cp-2-8-2" (the "cp") means the layout uses content prioritisation.

File

at_theme_generator/starterkits/starterkit/layout/page-layout-float/sass/threecol/README.txt
View source
  1. ## Content Priority Layouts Explained
  2. In 3col region content priority layouts we consider the first region in the
  3. source order to be the most important (highest priority), therefor this is
  4. always the widest region in the visual layout.
  5. For example in the layout "_three_cp-2-8-2" the "second" region in the visual
  6. layout is the widest, however in the markup it will be the first region:
  7. Source order:
  8. ...
  9. ...
  10. ...
  11. Visual layout:
  12. ------------------------------------------------------
  13. | second | first | third |
  14. ------------------------------------------------------
  15. Here is nother example using the "_three-cp-2-2-8" layout, same source
  16. order as above, but the visual order changes:
  17. ------------------------------------------------------
  18. | second | third | first |
  19. ------------------------------------------------------
  20. WHY?
  21. 1. We need a system that is consistant and predictable. We have to choose something
  22. and the widest region is probably the most likely candidate.
  23. 2. In mobile/small screens we want the most important content to bubble to the
  24. top of each row, because we consider it highest priority. This is particularly
  25. interesting in narrow layouts using split rows (first region becomes full width
  26. and the other two wrap below as width defined columns).
  27. For example in a #narrow breakpoint it is very easy to bubble the highest priority
  28. content to the top using a layout like "_three-sr-12--6-6":
  29. ------------------------------------------------------
  30. | first |
  31. ------------------------------------------------------
  32. | second | third |
  33. ------------------------------------------------------
  34. Then in mobile, when there is effectively no layout at all:
  35. ------------------------------------------------------
  36. | first |
  37. ------------------------------------------------------
  38. | second |
  39. ------------------------------------------------------
  40. | third |
  41. ------------------------------------------------------
  42. NOTE: if you don't want this to happen, i.e. you want the visual order to always
  43. follow the source order, then use the standard layouts. For example "_three-2-8-2" as
  44. opposed to "_three_cp-2-8-2" (the "cp") means the layout uses content prioritisation.