Displaying responsive content
In a responsive web page with constrained screen width, you may want to hide or show different content depending on the screen width. Woof! facilitates this by defining CSS classes that show or hide content depending on screen width. These classes are shown in the table below.
| Class | Description |
|---|---|
| wf-r-sm- | Display if width is less than the sm threshold. |
| wf-r-sm | Display if width is greater than or equal to the sm threshold. |
| wf-r-md- | Display if width is less than the md threshold. |
| wf-r-md | Display if width is greater than or equal to the sm threshold. |
| wf-r-lg- | Display if width is less than the lg threshold. |
| wf-r-lg | Display if width is greater than or equal to the sm threshold. |
| wf-r-xl- | Display if width is less than the xl threshold. |
| wf-r-xl | Display if width is greater than or equal to the sm threshold. |
These classes can be used in combination to generate pages with different content for different screen widths. This is illustrated in the example below. If you are using a desktop browser and maximize the browser window width, then narrow it down continuously, you will see the displayed content below the example change.
<p> This line will always display. <div class='wf-r-lg'>This will only show up in a very wide window.</div> <div class='wf-r-sm'>This content will only display on a window that is not too narrow.</div> <div class='wf-r-sm-'>This content will only display on a narrow window.</div> </p>
This line will always display.
You can even see this effect for this user guide. As you narrow the window, the sidebar containing the table of contents will disappear.