User:Lakelimbo/Sandbox
Image whitespace issue
Bulbapedia has a lot of images with a ton of whitespace, which is used to keep an uniform size between them. However I'm going to show that this is not necessary and not a good web practice, as images should not dictate layout.
Firstly, the images without whitespace are displayed here using MediaWiki's $wgAllowExternalImages, which allows me to display an external image (aka not on Bulbagarden) by just placing the link. So the resizes on the direct images are just how the images would look like if they were trimmed.
Ok let's just compare the amount of whitespace around the icons. The gray background is the actual whitespace of the image.
Now let's see that on a smaller scale, let's say the images can only have 80px:
And now with just 20px:
Considering that almost all images automatically resize on smaller screens, having tons of whitespace will badly affect the UX on mobile and any container that has a limited free space (such as the navigation bar on Pokémon Species pages). Let's use a table to mimic the PokéPrevNext templates, both with a fixed height of 46px (more or less the height of the row of the actual template).
With whitespace:
| ← | 
|
Wailord | Pokémon | Diancie | 
|
→ |
Without whitespace:
| ← | 
|
Wailord | Pokémon | Diancie | 
|
→ |
In this case we could simply specify the height rather than width, like this: [[File:image.png|x40px]]. And as you can see, the example without the whitespace looks much clearer, despite Wailord being much more horizontal while Diancie being more vertical.
Pokémon Infobox
Using only grid elements! I will continue working on this later.
Wish Pokémon
Jirachi
Images on the Bulbagarden Archives
Egg not obtainable
Gen III-IV
Gen V+
HP
ATK
DEF
SpA
SpD
SPE
- Link
- Link
- Link
typebattle
Now it fills the horizontal blank area around it and it's more-or-less responsive. It uses a bit of a complex grid-template-columns style. The only annoying thing is that I couldn't figure it out how to stretch the height when one of the group of panels ("Offensive" and "Defensive") is taller than the other on some medium-sized screens (where the responsive trigger from grid does not respond).
Sprite grid
Making this responsive was not the issue, but rather keeping everything aligned. Due to the variable sizes of the sprites, I thought keeping this as flex would work better, but I may redo this again using grid instead.
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Front
Back
Side-by-side elements
Pseudo-legendary Pokémon
"Tutorial"
Instead of a table inside a table, take each Pokémon panel and wrap around a div, then wrap all the div with another div. In the "master" div, insert the following CSS:
{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, auto));
gap: .5rem;
place-content: center
}
Also, remove the margin: auto from the Pokémon tables, place-content: center takes care of that automatically. IMO, it's also preferable to give each table width: 100%.
Red Gyarados
Using this page as an example with the same previous method.
Multiple panels
This one uses multiple tables because Template:ActivePoké and Template:InactivePoké are just cells for tables. Now, instead of a table with multiple cells, each panel (ActivePoké or InactivePoké) has its own table with a single cell. Using Wild Area as an example:
 Braviary |
 Maractus |
 Wooloo |
 Ribombee |
 Grubbin |
 Phantump |
 Seedot |
 Goomy |
 Hippopotas |
 Tympole |
 Frillish |
 Flygon |
 Snorlax ↔ Gigantamax Snorlax |
 Rookidee |
 Budew |
 Butterfree |
 Joltik |
Ditto |
Caught Pokémon:
Code
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, auto));">
{|
|{{ActivePoké|Wild Area|Braviary|Wild Area Braviary.png|Normal|Flying|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Maractus|Wild Area Maractus.png|Grass|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Wooloo|Wild Area Wooloo.png|Normal|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Ribombee|Wooloo anime.png|Bug|Fairy|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Grubbin|Wild Area Grubbin.png|Bug|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Phantump|Wild Area Phantump.png|Ghost|Grass|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Seedot|Wild Area Seedot.png|Grass|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Goomy|Wild Area Goomy.png|Dragon|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Hippopotas|Wild Area Hippopotas.png|Ground|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Tympole|Wild Area Tympole.png|Water|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Frillish|Wild Area Frillish.png|Water|Ghost|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Flygon|Wild Area Flygon.png|Ground|Dragon|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Snorlax|Wild Area Snorlax.png|Normal|nick=Snorlax ↔ Gigantamax Snorlax|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Rookidee|Wild Area Rookidee.png|Flying|nick=Rookidee|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Budew|Wild Area Budew.png|Grass|Poison|nick=Budew|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Butterfree|Wild Area Maractus Butterfree.png|Bug|Flying|nick=Butterfree|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Joltik|Wild Area Joltik Ditto.png|Bug|Electric|nick=Joltik|link=no}}
|}
{|
|{{ActivePoké|Wild Area|Ditto|Wild Area Joltik Ditto.png|Normal|nick=Ditto|link=no}}
|}
</div>
Caught Pokémon:
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, auto));">
{|
|{{InactivePoké|Goh|Scorbunny|Goh Scorbunny.png|fire|link=Goh's Cinderace}}
|}
{|
|{{InactivePoké|Goh|Boldore|Goh Boldore.png|Rock|link=List of Goh's Pokémon#Boldore}}
|}
{|
|{{InactivePoké|Ash|Dracovish|Ash Dracovish.png|Water|Dragon}}
|}
{|
|{{InactivePoké|Goh|Arctozolt|Goh Arctozolt.png|Electric|Ice|link=List of Goh's Pokémon#Arctozolt}}
|}
Headers/sections
It's also possible to make multiple sections side-by-side. Section 5 span 2 columns.
This is very useful for a lot of elements, but for sections (unless it's only 2 sections), it will need a media query.
Section 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Section 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Section 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Section 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Section 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
Code
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(33%, auto))"> <div> ==== Section 1 ==== Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> <div> ==== Section 2 ==== Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> <div> ==== Section 3 ==== Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> <div> ==== Section 4 ==== Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> <div style="grid-column: span 2"> ==== Section 5 ==== Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> </div>
Pokéathlon stats
Gallery alternative
Pretty straightforward. The outer container uses a max-width of 1279px, but depending on the size of the images you set you should adapt this to avoid having very large gaps.
If you like more a dynamic positioning though, you could also switch the max-width to justify-content and choose between space-around (will spread the items around, relative to the container's width), space-between (similar to the previous one but will try to force the elements to start at the very beggining of the container) or space-evenly (will try to calculate a distance width depending on the width of the element, so if all elements have a equal width it will behave just like space-around).
NIWA template
Very similar to the original, but of course using flexbox. I also removed the icons as they were pretty much pointless. Text color contrast has also been fixed.
Anmov
| Move | First used in |
|---|---|
| String Shot | Ash Catches a Pokémon! |
| Tackle† | Ash Catches a Pokémon! |
| Harden | Ash Catches a Pokémon! |
| Sleep Powder† | Ash Catches a Pokémon! |
| Whirlwind† | Ash Catches a Pokémon! |
| Stun Spore† | Ash Catches a Pokémon! |
