Module
Hier stelle ich Ihnen eine Auswahl meiner Web Module vor, die ich in eine Bootstrap Website integriert habe. Wie Sie sehen können, funktioniert das nahtlos und ohne Schwierigkeiten. Natürlich sind die Module auch responsive und passen sich automatisch unterschiedlichen Bildschirmgrößen an.
Modul Accordion
Das Modul Accordion wird ausschließlich mit den HTML-Elementen "details" und "summary" programmiert. Auf diese Weise kann man ein perfomantes und zugängliches Accordion schnell kreieren. CSS wird nur noch zur Gestaltung der Accordion-Elemente verwendet. JavaScript wird nicht benötigt.
1. Inhalt
Hier steht der erste Inhalt.
2. Inhalt
Hier steht der zweite Inhalt.
3. Inhalt
Hier steht der dritte Inhalt.
4. Inhalt
Hier steht der vierte Inhalt.
5. Inhalt
Hier steht der fünfte Inhalt.
Modul Slider – Hintergrundbilder
Das Modul Slider habe ich mit reinem CSS gestaltet. Es ist "CSS pur". Daher wird auch in diesem Fall kein JavaScript benötigt.
Die Hintergrundbilder wechseln und skalieren und erhalten somit einen "Bewegungs-Effekt".
Modul Tabellen
Das Modul Tabellen weist zwei Tabellen auf.
Die erste Tabelle habe ich mit CSS Flexbox gestaltet. Wird der Bildschirm zu klein, um die gesamte Tabelle zu zeigen, teilt sich die Tabelle in zwei Tabellen auf: Bei 767 Pixeln werden die drei rechten Spalten der Tabelle unter den drei ersten Spalten angezeigt.
Die zweite Tabelle habe ich mit CSS Grid Layout gestaltet. Sie passt sich der Bildschirmgröße automatisch an.
Gesplittete Responsive Tabelle
mit CSS Flexbox
| Titel | Titel | Titel |
|---|---|---|
| 7,492,000.00 | 1,200,300.00 | 4,504,937.98 |
| Webdesign | Usabitlity | Accessibility |
| Item | Item | Item |
| 2,075,100.00 | 1,200,300.00 | 4,504,937.98 |
| Item | Item | Item |
| Titel | Titel | Titel |
|---|---|---|
| 2,075,100.00 | 7,492,000.00 | 2,877,297.99 |
| Webdesign | Frontend | Backend |
| Item | Item | Item |
| 1,200,300.00 | 4,504,937.98 | 7,492,000.00 |
| Item | Item | Item |
Responsive Tabelle
mit CSS Grid Layout
| Titel | Titel | Titel | Titel | Titel | Titel |
|---|---|---|---|---|---|
| Topic | 1,200,300.00 | 4,504,937.98 | 2,075,100.00 | 7,492,000.00 | 2,877,297.99 |
| Topic | Webdesign | Usabitlity | Accessibility | Frontend | Backend |
| Topic | Item | Item | Item | Item | Item |
| Topic | 1,200,300.00 | 4,504,937.98 | 2,075,100.00 | 7,492,000.00 | 2,877,297.99 |
| Topic | Item | Item | Item | Item | Item |
Modul Modal
Das Modul Modal wird rein mit HTML und CSS gestaltet. Verschiedenen Animationen sind möglich, hier sehen Sie ein Modal mit der Animation "bounce": einfach auf den Button klicken.
Modale dienen dazu, Informationen anzubieten, die den Hauptinhalt ergänzen, oder können z. B. für ein Anmeldeformular genutzt werden.
Modale sollten also für Interaktionen verwendet werden, die nicht jeder User oder jede Userin benötigt.
Modal "bounce"
Sriracha XOXO master cleanse lomo blue bottle, banh mi fashion axe man braid flexitarian. Meggings pug ennui, chambray 8-bit celiac gentrify. Bitters direct trade chia semiotics. Synth fixie mixtape, health goth four dollar toast vinyl 3 wolf moon VHS schlitz. Drinking vinegar letterpress VHS poutine, venmo cronut distillery artisan. Everyday carry craft beer butcher DIY. Normcore affogato chillwave, thundercats banh mi fingerstache keytar pop-up four loko four dollar toast.
Modul Hilite Box
Mithilfe des Moduls Hilite-Boxen können für unterschiedlichste interessante Inhalte hervorgehoben werden:
- Team-Mitglieder vorstellen
- Textstellen hervorheben
- Zitate
- Visitenkarte
- ...
Hilite Titel
Hilite Text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enimad minim veniam, qu
Hilite Untertitel