Help:TemplateStyles/examples: Difference between revisions
Jump to navigation
Jump to search
(Created page with "{{note|Expand Me}} == Advantage over inline CSS == The content below is styled using template styles (see Template:Stylish and Template:Stylish/styles.css). The tables below use CSS that uses the <code>:nth-child()</code> pseudo-class which cannot be used in inline CSS. {{Stylish}} <br clear="all"> == Responsive templates == Another good use case is making templates responsive. "Responsive", in this case, means that elements dynamically grow, shrink, move a...") |
No edit summary |
||
| Line 10: | Line 10: | ||
== Responsive templates == | == Responsive templates == | ||
Another good use case is making templates responsive. "Responsive", in this case, means that elements dynamically grow, shrink, move around or become hidden depending on a device's features, such as height or width. [[Template:ResponsiveAmbox]] is a modified version of [[Template:Ambox]] that uses [[Template:ResponsiveAmbox/styles.css]]. The styles will hide the image to the left if the browser window is narrow enough. Here's an example: | Another good use case is making templates responsive. "Responsive", in this case, means that elements dynamically grow, shrink, move around or become hidden depending on a device's features, such as height or width. [[Template:ResponsiveAmbox]] is a modified version of [[Template:Ambox]] that uses [[Template:ResponsiveAmbox/styles.css]]. The styles will hide the image to the left if the browser window is narrow enough. Here's an example: | ||
Latest revision as of 10:40, 31 August 2024
Advantage over inline CSS
The content below is styled using template styles (see Template:Stylish and Template:Stylish/styles.css). The tables below use CSS that uses the :nth-child() pseudo-class which cannot be used in inline CSS.
| The Zebra | Looks | Really | good |
| and | cute | With | lots |
| of stripes | That make | a horse | Jealous |
| The Zebra | Looks | Really | good |
| and | cute | With | lots |
| of stripes | That make | a horse | Jealous |
Responsive templates
Another good use case is making templates responsive. "Responsive", in this case, means that elements dynamically grow, shrink, move around or become hidden depending on a device's features, such as height or width. Template:ResponsiveAmbox is a modified version of Template:Ambox that uses Template:ResponsiveAmbox/styles.css. The styles will hide the image to the left if the browser window is narrow enough. Here's an example:
 | Lorem ipsum dolor sit amet, consectetur adipisicing 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. |
Just like with the previous example, this cannot be done using inline styles.
See also
- beta:de:TemplateStyles - demo compiled for introducing TemplateStyles to the German Wikipedia.