Schlagwort: Bootstrap

Das Frontend-Framework fürs responsive Web – mit Grid-System, fertigen Komponenten und Utility-Klassen aus CSS und JavaScript. Von Buttons und Navigation bis zu Modals und Tooltips.


SCSS-Code in einem dunklen Editor, in der Bildmitte scharf, oben und unten unscharf. Im Fokus steht der Selektor .widget_social_links mit mehreren @extend-Anweisungen auf Bootstrap-Utilities wie .d-flex, .gap-3, .gap-md-4 und .justify-content-sm-end, darunter ein verschachteltes .menu-item mit @extend .d-flex und @include icon(2rem, 100%).

@extend mit Bootstrap – gemessen statt geglaubt

Bootstrap-Klassen per @extend zu übernehmen ist sehr praktisch. Bläht sich die CSS-Datei aber unkomprimiert auf 27 MB auf, ist das nicht OK. Man könnte folgern, dass sich @extend und Bootstrap nicht vertragen. Das hält einer Messung nicht stand: Teuer wird es nur bei wenigen, klar benennbaren Mustern.

Weiterlesen: @extend mit Bootstrap – gemessen statt geglaubt
Screenshot des Teilen-Dialogs auf marcelbest.com: ein modaler Dialog mit dem Titel «Teile den Beitrag» liegt über der abgedunkelten, unscharfen Seite. Darin die zu teilende URL in einem dunklen Feld und darunter eine Reihe Teilen-Symbole – Facebook, X, LinkedIn, Pinterest, WhatsApp, E-Mail und Kopieren. Über dem URL-Feld ist der Tooltip «URL in die Zwischenablage kopieren» eingeblendet, oben rechts ein Schliessen-Kreuz mit sichtbarem Fokus-Rahmen.

Modal oder nicht – das ist hier nicht die Frage

Einen Button zum Teilen meiner Beiträge – der den Fokus ganz aufs Teilen legt, so wie es YouTube macht, das wäre doch was. Also ein modaler Dialog (Modal). Was nach einer Fingerübung aussah, wurde zum Lehrstück: Ein Modal ist ein eigenes Dokument, und sobald man das realisiert, fängt die eigentliche Arbeit erst an.

Weiterlesen: Modal oder nicht – das ist hier nicht die Frage
Rotes Kachelmuster aus weissen Daumen-hoch-Outlines, in der Mitte rahmt ein Kreis einen einzelnen Daumen-hoch-Icon ein.

Like-Button für WordPress – ohne Plugin

Ein Like-Button ist schnell gebaut. Genau das ist das Problem. Denn es gibt unzählige Tutorials, man kopiert etwas PHP und JavaScript, und der Button steht: ein Klick, der Zähler springt hoch – und da hören die meisten Anleitungen auf.

Weiterlesen: Like-Button für WordPress – ohne Plugin