Falls sich jemand mit dem Thema Bootstrap Barrio auskennt

Ich mache inzwischen alles mit Bootstrap Themes, auch wenn ich mal Wordpress-Kunden bedienen muss.
Was Du brauchst, ist also die Doku für Bootstrap 4, wo auch die s.g. Helperklassen vorgestellt werden.
Hier ist das Grid-System vorgestellt:
https://getbootstrap.com/docs/4.5/layout/grid/

Die Klassen kannst Du auch in der View beim Design des Feldes hinterlegen.
Also als Format unformated wählen statt Rows und dann z.B. folgende Klassenkombi bei Deiner 3x3 Matrix einfügen:

"col-12 col-lg-6 col-xl-4"

Damit wäre sicher gestellt, dass auf allen Geräten (also auch Smartphone) jeder Block über die ganze Breite geht.
Auf dem Tablet hättest Du zwei Blöcke nebeneinander und erst auf den breiten Bildschirmen drei.
Mit diesen paar Klassen erspart man sich also viel Media-Query Arbeit.

Das was ich da beschreibe, beantwortet dann auch Deine 4. frage (sofern ich alles richtig verstehe) woher Du die Klassen bekommst.
Eben aus obiger Bootstrap Doku.

Die Fonts solltest du aus DSGVO Gründen besser über deinen Server ausgeben, statt Google jeden Seitenaufruf mitzuteilen.

Das geht ganz einfach:

https://google-webfonts-helper.herokuapp.com/fonts

Grüße Jenna

Dein Kommentar hat mich gut weiter gebracht! Danke dafür! Ich verstehe endlich, wo die einzusetzenden Klassen herkommen. Jetzt gelingt es mir nur noch nicht, dies meiner Testinstallation beizubringen.
Wenn Du Dir das Bild bartik.JPG anschaust, dann siehst Du wie der View z.Zt. auf meiner Produktivseite dargestellt wird. Auf der Barrio-Testseite sieht es aus wie auf dem Anhang barrio.JPG.
Bei Barrio kann ich theoretisch den Regions eigene Klassen zuweisen Foto: barrio-einstellungen. Wenn ich hier aber bei Content z.B. col-12 col-lg-6 col-xl-4 eintrage. ändert sich nichts (Caches etc. geflusht). Wenn ich die Views-Einstelluneg für
GRID ändere (Foto: views-bartik.jpg natürlich auch in Barrio) bekomme ich bisher lediglich eine Spalte hin aber keine Matrix
Hast Du dazu eine Idee, a) was ich bei Barrio unter content eintragen müßte, um eine Matrix mit drei Spalten zu erzeugen? Bzw. was ich bei den Views eintragen müßte, um die gleiche Matrix bei Barrio wie bei Bartik hinzubekommen?

Bei Bartik habe ich die Darstellung der Fotos in der Matrix wie folgt per css angepasst, was mir bei Barrio auch noch nicht geglückt ist:

.views-field-field-image {
max-width: 90%;
height: auto;
padding: 5px;
margin: 5px;
border-style: solid;
border-width: 6px;
border-color: #f6f6f2;
}

/* Punktierte Linie unter Fotos entfernen (global) in views*/

.view a {
border-bottom: none;
}

/* Titel zentrieren und auf Bildbreite begrenzen in views */

.views-field-title {
text-overflow: ellipsis;
text-align:center;
overflow: hidden;
white-space: nowrap;
}

Anhang	Größe
bartik.JPG	63.78 KB
barrio.JPG	48.34 KB
views-bartik.JPG	78.95 KB
barrio-einstellungen.jpg	39.84 KB

Bei Bartik lade ich die Fonts von meinem Server mit:
/* roboto-regular - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Roboto'), local('Roboto-Regular'),
url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */

Ich weiß nur nicht, wie ich das dem Bootstrap-Theme Barrio beibringen kann, das die Fonts aus dem Internet lädt.

@Kulturmensch,
hast Du denn ein Sub-Theme für Barrio erstellt?
Dort sollte dann eingestellt sein, dass Du eine eigene style.css Datei hast für die Änderungen, wie Du sie oben für Bartik vorgenommen hast.
Ich mache da auch noch Mediaqueries in die subtheme.breakpoints.yml, damit ich unterschiedliche CSS-Dateien für unterschiedliche Ausgabemedien habe.
Das ist aber evet. bei einem kleineren Projekt nicht nötig.

Ich bin davon ausgegangen, dass Du Deine Änderungen nicht per SASS machen möchtest.
DAzu habe ich mir zwar auch was eingerichtet, aber meistens mache ich es dann doch ohne.

Warum Deine Bilder so übereinander liegen, weiß ich nicht.
Hast Du die Spalenausgaben (3) aus der View entfernt?
Stattdessen auf unformated umstellen und in den zeilen-Einstellungen die Klasse row schreiben.
Jede Zeile, die Blöcke im Grid ausgibt, braucht einen Container mit der Klasse row, siehe Grid-Doku von Bootstrap.

Ja, ich habe ein Subtheme in "custom" angelegt. Das ist bei Barrio gleich dabei und man muss nur an diversen Stellen den Namen Subtheme durch einen eigenen ersetzen. Danach kann es unter dem neuen Namen direkt in den Drupal-Einstellungen als Standardtheme ausgewählt werden. Das Sutheme hat einen css-Ordner in dem sich eine color.css und eine style.css befinden. Wenn ich hier Einträge vornehme bzw. in der color.css mal testweise Farben ändere, wird das nicht dargestellt.
Ich finde keine Doku, was ich hier falsch mache bzw. noch ergänzen muss. Ich habe jetzt auch die Standardklasse row in einer View eingestellt. Das hat zumindest zu einer Änderung geführt aber die images werden noch zu groß dargestellt und das grid-system scheint auch nicht zu funktionieren. S. Foto

Anhang	Größe
barrio-neu.JPG	69.67 KB

Eigentlich macht man die Änderungen in der Style.css.
Wird die im Quelltext eingebunden?
Cache geleert?

Kann man die Seite anschauen?
Dann könnte ich mir das mal ansehen.
Sicher umgestellt auf unformatted statt 3er Grid in der View?
Cache geleert?
(Versuch ist es ja wert ;-) )

Das steht in der xxx.libraries.yml:
global-styling:
version: VERSION
js:
js/global.js: {}
css:
component:
css/style.css: {}
css/colors.css: {}
bootstrap:
js:
/libraries/bootstrap/js/bootstrap.bundle.min.js: {}
css:
component:
/libraries/bootstrap/css/bootstrap.min.css: {}
color.preview:
version: VERSION
css:
theme:
color/preview.css: {}
js:
color/preview.js: {}
dependencies:
- color/drupal.color

Reicht das, um die styles.css einzubinden?

Wenn Du mal auf meiner Testseite nach dem Rechten schauen willst, finde ich das aber sehr nett:-) Melde Dich dann doch bitte unter test2tenckhoff.de/user an - die Seite entspricht nahezu komplett meiner Produktivseite.

Leider funktioniert der Link nicht.
Muss ich mich denn anmelden, oder reicht Blick ins Frontend?
Wenn ja, brauche ich noch Zugangsdaten.

Das sieht soweit nicht schlecht aus in der xxx.libraries.yml
Das global-styling muss natürlich analog in der xxx.info.yml stehen.

Entscheidend ist halt, was im Quelltext steht.
Da würde mir ein Blick ins Frontend reichen.

Ah, OK, den Link habe ich hin bekommen: test2.tenckhoff.de/user
Aber der ist im Wartungsmodus, weiter komme ich da nicht.
Was auch wichtig wäre, um etwas zu erkennen:
Cache im Entwicklungs-Stadium ausschalten, bzw. Komprimierung der CSS-Dateien.

Sonst sehe ich nur sowas:

https://test2.tenckhoff.de/user/login
Den Wartungsmodus habe ich jetzt rausgenommen und jetzt kann man sich auch wieder anmelden (hatte ich wegen den SPAM-Anmeldungen unterdrückt)

@kulturmensch

Ich habe mir deine Testseite eben angesehen und du würfelts da noch einiges durcheinander.

Zum Beispiel finde ich bei dir ein views-view-grid horizontal cols-3 clearfix col

Das brauchst du aber nicht wenn du mit den Bootstrap Klassen arbeitest. Bootstrap besitzt ja ein eigenes, ausgereiftes Gridsystem.

Momentan ist das wie: "Nehme ich schneller ab wenn ich 2 Diäten gleichzeitig mache"...., glaube mir, funktioniert nicht, ich habe es probiert...

Bring da mal etwas Ruhe rein, kein Mensch hat Bootstrap an einem Abend gelernt, ich habe nach ca. 2 Monaten erst erkannt welche genialen Möglichkeiten dieses Framework bietet.
Google nach Bootstrap Tutorials oder Bootstrap beginners und arbeite dich ein wenig ein oder nimm ein Fertig Kauf Theme, falls es schnell gehen muss, welches dir 100% so schon gefällt und ändere nur die Inhalte.
Bootstrap ist nicht nur ein Theme, sondern ein komplettes Framework und wenn du wie jetzt 2 verschiedene Grids vermischt, wird es schwierig und macht auch wenig Sinn.

Die Fonts Einbindung:
Ich habe eine extra css angelegt, fonts.css (muss nicht sein, kann auch alles in die style.css rein), ich finde es aber übersichtlicher. Dort werden die Fonts CSS Angaben, wie auf Webfonts Helper angegeben, eingetragen.

Entweder du nimmst die style.css, die dein Theme schon kennt, oder du bindest die fonts.css dementsprechend neu ein (Cache löschen danach) und dann werden deine Fonts auch ausgeliefert. Der Pfad muss natürlich stimmen und du musst die Fonts auf deinen Webspace geladen haben.

Grüße Jenna

Hähä, genau wie Jenna sagt, zwei Diäten helfen nichts. Da kann ich auch mit reden. ;-)

Ich habe mal bissl im Quelltext rum gespielt und in einer Zeile alles raus geworfen, was nicht hin soll und die Klassen rein, was es braucht.
Das musst Du der View bei bringen, in dem Du erst mal auf unformated umstellst und dann die row und col Angaben machst, die Bootstrap braucht.

Ich habe einen Screenshot angehängt.
Wenn Du Text unter das Bild gibst, dann sitzen die auf einer Linie, egal, ob ein- oder zwei Zeilen.

Und sie hat auch recht, was die Lernkurve von Bootstrap angeht.
Das wäre nicht so mächtig, wenn man es sofort verstanden hätte.

Vielleicht musst Du Dich aber erst noch rein arbeiten, wo überall Du in der View solche Angaben platzieren kannst.
Also row und col-md-4 ect.

@Regina, @Jenna,
danke für Eure Mühe und die hilfreichen Erklärungen! Ich probiere heute Eure Vorschläge aus und versuche zunächst herauszufinden, warum meine styles.css nicht funktioniert. Vermutlich legt hier das subtheme ja auch die Änderungen im Adminboard ab und da dies nicht funktioniert, werden auch die Klassen nicht angewendet, die Ihr mir genannt habt. Auch wenn in der Barrio-Dokumentation steht, man könne das Grid in den views-Einstellungen einrichten, scheint mir hier Euer Vorschlag, in views auf "unformatiert" zu stellen und die GRID-Formatierung Bootstrap zu überlassen sinnvoller zu sein - 2 Diäten und so;-):-) Mal sehen, was der Tag bringt:-)

Ach ja stimmt, die Einbindung der style.css wollte ich noch anschauen.
Das geht aber nicht vernünftig, solange die Komprimierung für CSS eingeschaltet ist.
Da kriegt man nur CSS-Salat...mag ja gute Diät sein, aber satt macht es nicht. ;-)

Wenn Du jetzt mal nachschauen könntest? Caches und Komprimierung sind nun raus (wenn ich alles erwischt habe:-) und Bootstrap wird jetzt lokal genutzt und nicht via CDN. In der Konsole werden mir übrigens zig Fehler angezeigt - das sieht schon ziemlich gruselig aus:-( Welchen Eintrag in der style.css würdest Du empfehlen, um ihre Wirkung zu testen?
12:54
styles.css funktioniert nun:-)
Läßt sich dort eine Klasse, wie Du empfohlen hattest, für das GRID der Views eintragen?

Im Quelltext
view-source:https://test2.tenckhoff.de/reisetagebuecher

sehe ich, dass diese Datei eingebunden wird:
https://test2.tenckhoff.de/themes/custom/tenckhoff2/css/style.css?qcsdnd

Wenn ich die aufrufe, steht noch nichts drinnen.
Du kannst z.B. sowas machen:
body{
background: red;
}

Das fällt dann auf.
Aber ich bin sicher, dass alles, was Du da rein schreibst, gezeigt wird.

Mit p { font-size: 36px; margin-left: 5em; } zeigten sich jetzt die Änderungen. Lag vielleicht an der ursprünglichen Bootstrap-Einbindung über cdn. Jetzt geht's an das Grid. Mit meinen eigenen css-Einstellungen von Bartik habe ich jetzt Rahmen und mittige Überschriften hinbekommen. Die images liegen allerdings über den Rahmen und auch noch nicht nebeneinander https://test2.tenckhoff.de/reisetagebuecher
Was würdest Du hier eintragen, um 3 Columns zu erzeugen und die images in die Rahmen zu setzenn? In den Einstellungen von views steht alles auf unformatiert.

Bei den Feldern Titel und Bild würde ich die Angaben für die drei Spalten machen, so wie ich es oben im ersten Post geschrieben hatte.
Schau Dir dazu die Grid Doku an.
Und dann muss im Zeilen Design (Einstellungen Unformatiert) noch row eingetragen werden.

Man macht nicht nur col-4, was die drei Spalen erzeugen würde, sondern unterschiedl. Angaben für versch. Bildschirmbreiten, damit es eben im Smartphone nicht drei Spalten, sondern nur eine gibt.
Und im Tablet zwei oder so.

In dem Drupal view "Reiseberichte" habe ich jetzt "Unformatierte Liste" und Klasse row eingestellt. Zusammen mit

in der styles.css des subthemes gibt es jetzt schöne Rahmen um passende Bilder. Danke für den Tipp:-)

Jetzt fehlt nur noch dem Theme Barrio ein Grid zu entlocken.
Ich habe das mit Deiner Klasse versucht und in der styles.css folgendes eingetragen:

Da das keine Wirkung zeigt (Caches geleert) bei https://test2.tenckhoff.de/reisetagebuecher mache ich etwas falsch. Ist der Eintrag hier in der styles.css völlig falsch?

Ja das ist falsch.

Du musst in die View gehen, und bei den Feldern, die Du hier im Grid ausgibst, also vermutlich Titel und Bild, z.B. bei Titel:
Feld: Inhalt: Titel konfigurieren -> Design-Einstellungen -> HTML-Code des Feldes und der Bezeichnung anpassen (Haken setzen) -> Eine CSS-Klasse erstellen (Haken setzen) und hier die von mir oben genannten drei Grid-Klassen eintragen.

Das hat jetzt mit Deiner Anleitung und einer kleineren Image-Größe (220) geklappt.Klasse! Größere Images werden überlappend eingestellt. Anbei der letzte Stand. Mein Code für die Titelformatierung

in der styles.css funktioniert auch:-)

Mein Code für den Rahmen der Images

in der styles.css funktioniert leider nicht mehr. Hast Du dafür auch eine Idee?
Blöd ist auch, dass ich den verfügbaren Contenbereich noch nicht vergrößern kann. Barrio hält anscheinend den Bereich rechts des Contents für eine 2te Sidebar frei.

Anhang	Größe
letzter-stand.JPG	46.49 KB

Ja, sieht ja wirklich schon ganz gut aus mit dem Grid.

Irgendwie ist jetzt die Standardformatierung für .views-field-image-image kaputt gegangen.
Also bei Designeinstellungen für das Feld.
Standardklassen sollen weiter greifen, nur die Cols-Klassen dazu kommen.

Entweder findest Du, wie Du das wieder hin bekommst, oder Du sprichst das so an:
.view-karins-reisetagebuecher.view-display-id-page_1 img{
// hier der Code
}

Die gefühlte dritte Spalte kommt daher, dass Bootstrap per Default mit sehr schmalem Content-Bereich kommt.
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 1140px;
}

Ich schreibe für breite Bildschirme deutlich mehr
container-xl {
max-width: xxxxx px;
}

Musst ausprobieren, was bei Dir gut aussieht und immer wieder in den unterschiedl. Breiten testen.

Jetzt habe ich die Klasse .views-field-field-image wieder drin und sie wird auch - wie in style.css eingetragen - dargestellt und das GRID sieht nun so aus wie in Bartik - danke für`s Coaching:-)
Die Änderung der Contentbreite in der styles.css mit

funktioniert noch nicht.
Oder geht das garnicht?
Anbei ein screenshot der Einstellungsmöglichkeiten von Barrio. Die Klasse row ist in allen Bereichen voreingestellt. Könnte ich hier die Inhaltsbreite verändern?

In der Region Hervorgehoben befinden sich meine Header-Fotos. Die möchte ich responive ansprechen. Dazu habe ich die Klasse .img-responsive gefunden. Wie könnte ich die in der style.css einbauen, dass sie auf alle Fotos wirkt?
.img-responsive {} klappt nicht.

Anhang	Größe
barrio-config.jpg	48.47 KB

Sorry, das ist die Klasse container nicht container-xl.

das hat geklappt.
Jetzt möchte ich heute noch 2 Probleme lösen.
1. Meine Headerfotos in der Region "Hervorgehoben" möchte ich - wie bei Bartik - reponsive darstellen, Dazu habe ich die Klasse .img-responsive gefunden. Wie könnte ich die in der style.css einbauen, dass sie auf alle Fotos wirkt?
.img-responsive { } klappt nicht.
2. Mein Menü im Bereich Primary menue verschwindet, wenn der Bildschirm zu klein wird und ist z.B. auf dem IPhone nicht zusehen. Ich hätte erwartet, dass es sich in ein "HH-Menü" ändert? Muss man das Bootstrap auch extra mitteilen?
Falls Du noch Lust und Zeit hast ....

Bootstrap 4 Images
https://getbootstrap.com/docs/4.4/content/images/

Du nutzt wahrscheinlich schon Bootstrap 4 und nicht mehr 3.41 oder? Sonst dementsprechend auf die andere Version umschalten.

Grüße Jenna

Liebe Drupaler*innen,

Danke für die Barrio Tips - sie haben mich ein Stück weitergebracht, insbesondere die Unformatted List im View (wenn auch noch nicht ganz ans Ziel - Baustelle Bilder...).

Das Problem mit dem Fonts hatte ich auch - hier eine mögliche Lösung (habe soeben noch den Feedback aus einer Issue Antwort für mehrere weitere Font Kombinationen ergänzt).

Auch am Problem mit den überlappenden Bildern habe ich mir schon stundenlang die Zähne ausgebissen. Basierend auf diesem Forum Beitrag habe ich nun einen Barrio Issue eröffnet (Details dort zu finden); der Maintainer antwortet in der Regel recht rasch. Die korrekte Lösung wäre m.E. img-fluid (wie in der Bootstrap Dokumentation erklärt); ziemlich unklar ist für mich, wann welche Breakpoints zum Zug kommen (Drupal oder Bootstrap?).

Jegliche Klärungen sind willkommen.

Herbstliche Grüsse aus der Schweiz ...Peter

Nachtrag: Alberto von Barrio hat innerhalb von 20 Minuten geantwortet - siehe obigen Barrio Issue für die Lösung