Template specific styles
This page demonstrates some styles that are specifically available in “fhs-simple”.
Responsive Tables
Using tables in respeonsive layouts is considered as a problem often. I found one of many possible solutions at maddesign. The corresponding code can be found at codepen. If the browser windows is resized to a viewport width of 480px significant changes occur.
Template spezifische Styles
Diese Seite demonstriert einige Styles, die speziell in „fhs-simple“ verfügbar sind.
Responsive Tabellen
Dass Tabellen in responsive Layouts ein echtes Problem sind, dürfte bekannt sein. Eine der vielen möglichen Lösungen fand ich bei maddesign. Der zugehörige Code ist bei codepen zu finden. Es lohnt sich, das Browserfenster mal zusammenzuschieben – ab einer Viewport-Breite von 480px tritt eine wesentliche Veränderung ein.
Sample Table / Beispiel-Tabelle
| Name | First name | Street | Postcode | Location |
|---|---|---|---|---|
| Shannon | Cheyenne | Ap #239-2170 Phasellus Av. | 94075 | Berlin |
| Lindsey | Tanner | 511-635 Malesuada Rd. | 77791 | Beaconsfield |
| Luna | Xanthus | 771-4058 Et Rd. | 61855 | Pontypridd |
| Donaldson | Anika | 2821 Orci. Road | 71078 | Oosterhout |
| Langley | Bruce | Ap #376-2978 Diam. Avenue | 05691 | Ravenstein |
| Leon | Petra | 776-8330 Sem St. | 72540 | Cervinara |
| Everett | Ulla | P.O. Box 786, 1462 Id, St. | 06815 | Banff |
| Bishop | Wayne | Ap #619-6021 Aliquet, Road | 47719 | Saint-Mard |
| Mccullough | Audra | 4758 Vel, St. | 22972 | Leipzig |
| Nelson | Jillian | P.O. Box 548, 7968 Quis St. | 30075 | Vernole |
To use a responsive table layout like the one above each table cell has to get a data-label. Unfortunately, most editors do not automatically support adding data attributes. That’s why you’ll have to paste them into the source code manually. The CSS-class responsive has to be assigned to the table.
Voraussetzung für diese responsive Lösung ist allerdings, dass jede Tabellenzelle ein data-label erhält. Leider unterstützen die meisten Editoren das Hinzufügen von data-Attributen nicht automatisch. Man muss diese also händisch im Quellcode einfügen. Leider. Die Tabelle muss die CSS-Klasse responsive erhalten.
Images / Bilder
Image responsive full width
DIV class "imgR"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit.
Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Fusce imperdiet, augue at dignissim ultricies, tortor libero vehicula neque, ac malesuada lorem dolor et arcu. Quisque accumsan metus vel diam. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien.
Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. <span class="orange"> ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Fusce imperdiet, augue at dignissim ultricies, tortor libero vehicula neque, ac malesuada lorem dolor et arcu. Quisque accumsan metus vel diam. <span class="underline"> Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis.
DIV class "imgL"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit. Sed a leo. Suspendisse nisl tellus, volutpat vel, vehicula nec, venenatis eu, erat. Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien.
Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Fusce imperdiet, augue at dignissim ultricies, tortor libero vehicula neque, ac malesuada lorem dolor et arcu. Quisque accumsan metus vel diam. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis.
Code & Blockquote
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque cursus, mauris nec sagittis dictum, <code>inline text</code> nunc pede facilisis nisl, id mattis nunc nulla in ipsum. Donec ullamcorper, nulla eu faucibus sagittis, wisi risus ultrices metus, a ornare purus metus eget elit.
<p class="code">Hello World!</p>
Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor.
The following text is <blockquote>.
Dumme Gedanken hat jeder, aber der Weise verschweigt sie.
Wilhelm Busch
Maecenas vulputate laoreet lectus. Fusce pulvinar ante non sapien. Aliquam iaculis, wisi ac tristique ornare, ante est lacinia urna, quis tempor neque dui id tortor. Vivamus posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec facilisis. Fusce imperdiet, augue at dignissim ultricies, tortor libero vehicula neque, ac malesuada lorem dolor et arcu. Quisque accumsan metus vel diam.