Testing Floaty Grid Resizes

Responsiveness To Resizing

In certain viewports it is better to reduce/increase the number of columns and move tooltips to card descriptions. For this reason I wrote some additional javascript to make this possible. The following should demonstrate this - to test the functionality, resize the window or open the developer console.

Red 1

Black 1

Yellow 1

Red 2

Black 2

Yellow 2

Red 3

Black 3

Yellow 3

Red 4

Black 4

Yellow 4

Red 5

Black 5

Yellow 5

Red 6

Black 6

Yellow 6

Number of columns to expect for various window widths.

Boostrap Breakpoint Size	Start of Range	End of Range	Columns
xs	-	576px	1
sm	576px	768px	1
md	768px	992px	2
lg	992px	1200px	3
xl	1200px	1400px	5
xxl	1400px	-	5

Warning

When a floaty has a number of items that is not nicely divisible by the number of columns, some empty cards are inserted to make the final row of cards even.

Filter Configuration: Responsive Resizing

The following configuration will enable resizing. In particular, $.container.resize should map breakpoint sizes as in to a number of columns. It can also be set to true which will cause it to use the defaults specified by the javascript module. Similarly, $.container.tooltipsToggle can be set to a particular bootstrap breakpoint size or use the default by setting it to true. Once the window width is within the bounds for the specified size, it should turn tooltips into descriptions.

  floaty-with-resize:
    classes:
      classes_red: &resize-classes-red
        - bg-red
        - text-black
      classes_black: &resize-classes-black
        - bg-black
        - text-yellow
      classes_yellow: &resize-classes-yellow
        - bg-yellow

    content:
      yellow: &resize-content-yellow
        tooltip: This text should show up in the card body when the window is small.
        image:
          bootstrap:
            name: egg-fried
        classes: *resize-classes-yellow

      black: &resize-content-black
        tooltip: This text should show up in the card body when the window is small.
        image:
          bootstrap:
            name: box
        classes: *resize-classes-black

      red: &resize-content-red
        tooltip: This text should show up in the card body when the window is small.
        image:
          bootstrap:
            name: bricks
        classes: *resize-classes-red

The following anchors are used in the above:

  floaty-with-resize:
    classes:
      classes_red: &resize-classes-red
        - bg-red
        - text-black
      classes_black: &resize-classes-black
        - bg-black
        - text-yellow
      classes_yellow: &resize-classes-yellow
        - bg-yellow

    content:
      yellow: &resize-content-yellow
        tooltip: This text should show up in the card body when the window is small.
        image:
          bootstrap:
            name: egg-fried
        classes: *resize-classes-yellow

      black: &resize-content-black
        tooltip: This text should show up in the card body when the window is small.
        image:
          bootstrap:
            name: box
        classes: *resize-classes-black

      red: &resize-content-red
        tooltip: This text should show up in the card body when the window is small.
        image:
          bootstrap:
            name: bricks
        classes: *resize-classes-red