Dokumentation
soulclick.ch
Start typing to search…

Style Guide

📘

Style-Konflikte vermeiden: Unser Formular wurde umfassend getestet, dennoch kann es vorkommen, dass CSS-Styles eurer Webseite das Formular-Design überschreiben. Dieser Style Guide dient der schnellen Identifizierung von Klassen und IDs bei Styling-Problemen. Alle Soulclick-Klassen nutzen das Präfix soulclick- – prüft bei Darstellungsfehlern zuerst, ob eure CSS-Regeln diese Klassen überschreiben. Bei Konflikten empfehlen wir die Verwendung von spezifischeren CSS-Selektoren oder !important für kritische Styles.

Soulclick Spendenformular - CSS & JavaScript Styleguide

Übersicht

Dieser Styleguide dokumentiert alle CSS-Klassen und IDs des Soulclick Spendenformulars. Das Formular ist als Javascript-Integration konzipiert und verwendet ein konsistentes Namensschema mit dem Präfix soulclick-.

Container & Layout

Haupt-Container

Klasse/IDTypBeschreibung
.soulclick-iframeKlasseHaupt-Container für das gesamte iFrame-Formular
.soulclick-donation-iframeKlasseContainer für die Donation-Sektion
.soulclick-containerKlasseContent-Container mit optionalem Background
.soulclick-donation-iframe__formKlasseFormular-Container
#soulclick-iframe-form-submitIDForm-Element für Submit-Handling

Grid-System

KlasseBeschreibung
.soulclick-rowFlexbox-Row Container
.soulclick-row--align-centerRow mit zentrierten Elementen
.soulclick-colGrid-Spalte (Basis)
.soulclick-сol-sm-1212 Spalten auf Small Screens
.soulclick-col-md-88 Spalten auf Medium Screens
.soulclick-col-md-offset-2Offset von 2 Spalten (Medium)
.soulclick-col-lg-66 Spalten auf Large Screens
.soulclick-col-lg-offset-3Offset von 3 Spalten (Large)

Form Steps

Step-Struktur

Klasse/IDBeschreibung
.soulclick-donation-iframe__form__stepContainer für einzelnen Form-Step
#iframe-step-2Step 1: Spendenauswahl
#iframe-step-3Step 2: Zahlungsart
#iframe-step-4Step 3: Kontaktangaben
#iframe-step-5Step 4: Geschenk-Empfänger (optional)

Step-Header

KlasseBeschreibung
.soulclick-donation-iframe__form__step__headingHeader-Container für Steps
.soulclick-donation-iframe__form__step__numberNummerierung des Steps (1, 2, 3, 4)
.soulclick-donation-iframe__form__step__titleTitel des Steps (h3)

Eingabefelder

Input-Gruppen

KlasseBeschreibung
.soulclick-input__groupContainer für Input-Feld mit Label
.soulclick-input__group--no-marginInput-Gruppe ohne unteren Margin
.soulclick-input__group__dropdownSpezielle Gruppe für Dropdown-Felder

Input-Felder

Klasse/IDBeschreibung
.soulclick-inputStandard-Input-Feld Styling
.soulclick-input__labelFloating-Label für Input-Felder
#iframe-companyFirmenname (Business-Kontakt)
#iframe-personal-nameVorname
#iframe-personal-surnameNachname
#iframe-personal-emailE-Mail-Adresse
#iframe-personal-streetStrasse/Nr.
#iframe-personal-placePLZ/Ort

Error-States

KlasseBeschreibung
.soulclick-input__errorError-Message Container
.soulclick-input__error-signError-Icon (SVG)
.soulclick-input__error-sign__pathSVG-Pfad für Error-Icon
.soulclick-input__error-btnError unterhalb von Buttons
#soulclick-requests-errorError bei Zahlungslimit

Buttons & Radio-Optionen

Button-Typen

KlasseBeschreibung
.soulclick-btnBasis-Button-Styling
.soulclick-btn--middleButton mittlerer Größe
.soulclick-btn--type-1Primary Button Style
.soulclick-btn--type-2Secondary Button Style
.soulclick-btn__donateSubmit-Button "Jetzt spenden"
.soulclick-donation-iframe__btnButton für Donation-Optionen

Radio-Buttons

Klasse/IDBeschreibung
.soulclick-donation-iframe__form__radioHidden Radio-Input
.soulclick-radio__inputStandard Radio-Input
.soulclick-radio__labelLabel für Radio-Button
#iframe-singleEinmalige Spende
#iframe-regularRegelmässige Spende
#iframe-privatePrivat-Kontakt
#iframe-businessBusiness-Kontakt

Spendenbeträge

Spenden-Optionen

KlasseBeschreibung
.soulclick-donation-iframe__donation-optionsContainer für Betrags-Optionen
.soulclick-donation-iframe__donation-optionEinzelne Betrags-Option
.soulclick-donation-iframe__donation-option__inputHidden Radio für Betrag
.soulclick-donation-iframe__donation-option__labelLabel für Betrags-Button
.soulclick-donation-iframe__donation-option__label--is-customCustom-Betrag-Feld
.soulclick-donation-iframe__donation-option__label__currencyWährungs-Anzeige (CHF)
.soulclick-donation-iframe__donation-option__label__amountBetrags-Anzeige
.soulclick-donation-iframe__donation-option__label--edit-iconEdit-Icon für Custom-Betrag
.soulclick-donation-iframe__donation-option__custom-fieldInput für Custom-Betrag

Error-Messages (Beträge)

KlasseBeschreibung
.soulclick-donation-iframe__donation-options__errorsError-Container
.price-options-errorFehler: Kein Betrag gewählt
.price-options-min-price-errorFehler: Betrag zu niedrig
.price-options-max-price-errorFehler: Betrag zu hoch
.soulclick-donation-option__error--min-price-valMin-Betrag Platzhalter
.soulclick-donation-option__error--max-price-valMax-Betrag Platzhalter

Intervall-Auswahl (Recurring)

Klasse/IDBeschreibung
#iframe-intervalContainer für Intervall-Auswahl
#iframe-donation-intervalHidden Select für Intervall
.select__intervalCustom Select Styling
.soulclick-select__current-itemAktuell gewähltes Intervall
.soulclick-select__listDropdown-Liste
.soulclick-select__list__itemEinzelnes Intervall-Item
.soulclick-select__overlayOverlay zum Schließen
.soulclick-select--is-hiddenVerstecktes Original-Select

Zahlungsarten

Payment-Optionen

Klasse/IDBeschreibung
.soulclick-donation-iframe__payment-optionContainer für Payment-Option
.soulclick-donation-iframe__payment-option__inputHidden Radio für Payment
.soulclick-donation-iframe__payment-option__labelLabel für Payment-Button
.soulclick-donation-iframe__payment-option__label__textPayment-Name
.soulclick-donation-iframe__payment-option__imgPayment-Icon
#VISVISA
#ECAMastercard
#TWITwint
#PFCPostfinance Card
#PEFPostfinance E-Finance
#PAPPayPal
#INVQR-Rechnung

Grid-Layout

KlasseBeschreibung
.soulclick-donation-iframe__containerStandard Container
.soulclick-donation-iframe__container__gridGrid-Layout für Payments

Geschlechts-Auswahl

Klasse/IDBeschreibung
.soulclick-donation-iframe__gender__groupContainer für Gender-Optionen
.soulclick-donation-iframe__gender__group--rowRow für Gender-Buttons
.soulclick-donation-iframe__gender__labelLabel für Gender-Radio
#personal-gender-femaleFrau
#personal-gender-maleHerr
#personal-no-genderKeine Angabe

Länder-Auswahl

Klasse/IDBeschreibung
#countries-selectOriginal Select-Element (versteckt)
.selectize-controlSelectize.js Container
.selectize-inputSelectize Input-Feld
.selectize-dropdownSelectize Dropdown
.selectize-dropdown-contentDropdown-Content

Agreements & Checkboxen

Agreements

Klasse/IDBeschreibung
.soulclick-donation-iframe__agreementsContainer für Agreements
.soulclick-donation-iframe__agreementEinzelnes Agreement
.soulclick-donation-iframe__agreement--recurringRecurring-Agreement
.soulclick-donation-iframe__agreement__checkboxHidden Checkbox
.soulclick-donation-iframe__agreement__labelLabel für Checkbox
.soulclick-donation-iframe__agreement__label--feesLabel für Gebühren
.soulclick-donation-iframe__agreement__label--errorError-State Label
.soulclick-donation-iframe__agreement--recurring-linkLink zu Konditionen
#iframe-recurring-agreementRecurring-Konditionen Checkbox
#iframe-fee-agreementGebühren-Übernahme Checkbox
#take-fees-agreementContainer für Gebühren-Agreement
#iframe-fees-amountAnzeige Gebühren-Betrag

Geschenk-Empfänger (Optional)

Klasse/IDBeschreibung
#recipient-contact-dataContainer für Empfänger-Daten
#recipient-emailE-Mail Versand Radio
#recipient-printPrint Versand Radio
#recipient-gender-femaleEmpfänger: Frau
#recipient-gender-maleEmpfänger: Herr
#recipient-no-genderEmpfänger: Keine Angabe
#iframe-recipient-nameEmpfänger Name
#iframe-recipient-emailEmpfänger E-Mail
#iframe-recipient-streetEmpfänger Strasse
#iframe-recipient-placeEmpfänger PLZ/Ort
#recipient-streetContainer Strasse
#recipient-placeContainer PLZ/Ort

Popups & Overlays

Popup-Struktur

Klasse/IDBeschreibung
.soulclick-donation-iframe__popupPopup-Container
.soulclick-donation-iframe__popup__overlayDunkler Hintergrund-Overlay
.soulclick-donation-iframe__popup__contentPopup-Content-Container
.soulclick-donation-iframe__popup__closeSchließen-Button
.close-popup-actionJS-Hook zum Schließen

Spezifische Popups

IDBeschreibung
#soulclick-cheque-confirmationQR-Rechnung Bestätigung
#soulclick-newsletter-success-popupNewsletter-Erfolg
#soulclick-newsletter-error-popupNewsletter-Fehler
#iframe-privacy-recurring-popupDauerspenden-Konditionen
#iframe-privacy-popupDatenschutz & Konditionen

Popup-Inhalte

KlasseBeschreibung
.soulclick-donation-iframe__popup__confirmationConfirmation-Content
.soulclick-donation-iframe__popup__confirmation__titlePopup-Titel (h2)
.soulclick-donation-iframe__popup__confirmation__descriptionPopup-Text
.soulclick-donation-iframe__popup__buttonsButton-Container
.soulclick-donation-iframe__popup__buttons--align-leftLinksbündige Buttons
.soulclick-donation-iframe__popup__btnPopup-Button
.soulclick-donation-iframe__popup__btn--type-1Primary Popup-Button
.soulclick-donation-iframe__popup__btn--type-2Secondary Popup-Button
#soulclick-iframe-qr-confirmQR-Rechnung: Ja
#soulclick-iframe-qr-cancelQR-Rechnung: Nein

Privacy-Popup

KlasseBeschreibung
.soulclick-donation-iframe__popup--privacy-policyPrivacy-Popup Modifier
.soulclick-donation-iframe__popup__privacyPrivacy-Content
.soulclick-donation-iframe__popup__privacy__titlePrivacy-Titel
.soulclick-donation-iframe__popup__privacy__textPrivacy-Text-Container
.soulclick-donation-iframe__popup__privacy__text__paragraphAbsatz

Text & Typography

KlasseBeschreibung
.soulclick-donation-iframe__textStandard-Text
.soulclick-donation-iframe__text--boldFett-Text

Spezial-Elemente

Privacy & Security

KlasseBeschreibung
.soulclick-donation-iframe__privacyPrivacy-Info Container
.soulclick-donation-iframe__privacy__text-regularStandard Privacy-Text
.soulclick-donation-iframe__privacy__linkPrivacy-Link
.lock-iconSchloss-Icon
.lock-icon__pathSVG-Pfad für Schloss

Utility-Klassen

KlasseBeschreibung
.soulclick-donation-iframe__display-noneDisplay: none (JS-Toggle)
.soulclick-donation-iframe__wrapperWrapper für Agreements/Submit
.soulclick-donation-iframe__groupGruppierung von Elementen
.soulclick-donation-iframe__align--leftLinksbündige Ausrichtung

Icons

KlasseBeschreibung
.cross-iconKreuz-Icon (Close)
.soulclick-input__error-sign--optionError-Icon für Optionen

Data-Attribute (wichtig für JS)

AttributBeschreibung
data-currencyWährung (CHF)
data-websiteurlWebsite-URL für Redirect
data-cancel-urlCancel-Redirect-URL
data-error-urlError-Redirect-URL
data-success-urlSuccess-Redirect-URL
data-auto-settleAuto-Settlement aktiv
iframe-idID des iFrames
languageSprache (de/fr/it/en)
originOrigin-URL
data-valueWert für Select-Items
purpose-idID für Spendenzweck
intervalIntervall-Wert (1,3,6,12)
value-nameDisplay-Name für Werte

BEM-Namenskonventionen

Das Formular folgt der BEM-Methodik (Block-Element-Modifier):

.soulclick-donation-iframe              → Block
.soulclick-donation-iframe__form        → Element
.soulclick-donation-iframe__form__step  → Element (nested)
.soulclick-donation-iframe--popup       → Modifier

Namensschema

  • Block: .soulclick-donation-iframe
  • Element: __ (double underscore)
  • Modifier: -- (double dash)

JavaScript Hooks

Wichtige Klassen/IDs für JavaScript-Interaktionen:

SelectorVerwendung
.close-popup-actionPopup schließen
#soulclick-iframe-form-submitForm-Submit-Handler
.soulclick-donation-option__custom-fieldCustom-Betrag Input
.soulclick-select__current-itemSelect-Display aktualisieren
.soulclick-select__list__itemSelect-Option Click
.soulclick-donation-iframe__form__radioRadio-Button Change

Browser-Kompatibilität

  • Flexbox: Vollständig genutzt für Layout
  • CSS Grid: Verwendet im responsiven Grid-System
  • Custom Properties: Inline-Styles für Farben
  • SVG: Für alle Icons

Hinweise für Entwickler:innen

  1. Inline-Styles: Farben werden als Inline-Styles gesetzt (z.B. style="color: rgb(89, 2, 9);")
  2. Font-Family: Wird über style="font-family: Heebo;" gesetzt
  3. Hidden Elements: Nutzen hidden="" Attribut + .soulclick-donation-iframe__display-none
  4. Selectize.js: Wird für Country-Select verwendet
  5. Datatrans: Payment-Gateway-Integration über datatrans-2.0.0.js

Responsive Breakpoints

BreakpointKlassen-PräfixBeschreibung
Smallsoulclick-col-sm-Mobile (< 768px)
Mediumsoulclick-col-md-Tablet (≥ 768px)
Largesoulclick-col-lg-Desktop (≥ 1024px)

Updated 3 months ago