Template:ResponsiveList/h/doc

This template creates a container that lists items in a dynamic (responsive/freely sizable) list. Any div elements listed between this and the footer will be treated as list items and automatically fit as space allows.

Parameters

Unnamed

1: a color for the main background/border of the list (such as bulba for Template:bulba color)
2 (optional): the minimum width of items in the list (defaults to 175px)
- This may often need to be customized so that different sizes of the container do not lead to text or images spilling into adjacent items (padding does not prevent this), or conversely so that individual items are not much wider than they need to be, depending on the case.

Named

color (optional): overrides the template-based color of parameter 1 to allow a completely custom color (such as #BBBBBB)
color-dark (optional): overrides the template-based border color of parameter 1 to allow a completely custom color (such as #BBBBBB); if you make parameter 1 empty when using color, you also need to use this to prevent an invalid color template from being called (for the border) based on the empty parameter 1
maxwidth (optional): the maximum width of the whole list (defaults to 1012px)

TemplateData

Header template for creating a responsive list

Template parameters
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Color	`1`	Color template name for the main background and border Default bulba	Line	required
Background color override	`color`	Overrides the background color template, to allow for hexcode. Needs the # Default #{{<1> color}}	Line	optional
Border color Override	`color-dark`	Overrides the border color template, to allow for hexcode. Needs the # Default #{{<1> color dark}}	Line	optional
Item min-width	`2`	Minimum item width Default 175px	Line	optional
Container max-width	`maxwidth`	Maximum width for the container Default 1012px	Line	optional

Examples

This first example is a simple illustration of how list items are added to the container. You can create templates that will allow you to easily add more complicated items.

{{ResponsiveList/h|fire}}
<div>lorem</div>
<div>ipsum</div>
<div>lorem</div>
<div>ipsum</div>
<div>lorem</div>
<div>ipsum</div>
{{ResponsiveList/f}}

lorem

ipsum

lorem

ipsum

lorem

ipsum

Above, you may notice that, with the default 175px item width, each word has a lot of space around it. You can solve this by using the second parameter, as in the example below. If you can change your browser's window width, you should be able to see how the items here can be much closer before making new rows.

{{ResponsiveList/h|fire|50px}}
<div>lorem</div>
<div>ipsum</div>
<div>lorem</div>
<div>ipsum</div>
<div>lorem</div>
<div>ipsum</div>
{{ResponsiveList/f}}

lorem

ipsum

lorem

ipsum

lorem

ipsum

The example below uses a template to add Pokémon as the list items. Also note that you can mix list items if you so wish, as the "lorem ipsum" space in the middle shows.

You may also note that this shows how text can "spill" outside of its position, if you adjust the window width carefully (watch Charmander's name). The solution is to use the second parameter to increase the minimum item width; padding the individual items does not help here.

{{ResponsiveList/h|fire|150px}}
{{Pokeli|0004|Charmander}}
{{Pokeli|0006|Charizard|-Mega X|Mega Charizard X}}
{{Pokeli|0004|Charmander}}
{{Pokeli|0006|Charizard|-Mega X|Mega Charizard X}}
{{Pokeli|0004|Charmander}}
<div style="align-self: center;">lorem ipsum</div>
{{Pokeli|0006|Charizard|-Mega X|Mega Charizard X}}
{{Pokeli|0004|Charmander}}
{{Pokeli|0006|Charizard|-Mega X|Mega Charizard X}}
{{Pokeli|0004|Charmander}}
{{Pokeli|0006|Charizard|-Mega X|Mega Charizard X}}
{{ResponsiveList/f}}