You are here

README.txt in AT Tools 8.3

## Content Priority Source Ordered 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 "threecol-source-ordered-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 another example using the "threecol-source-ordered-2-2-8" layout, it has
the same source order as above, but the visual order changes:

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


### Why do this?

1. We need a system that is consistent 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 "threecol-split-row-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.

File

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