Bootstrap 4 unter Drupal 8 ohne gulp & npm

Wenn Du gulp nicht verwenden willst benötigst Du Ruby und einen config.rb File, den kannst Du Dir aus einem anderen Projekt kopieren. Ansonsten mußt Du dann selbst dafür sorgen, daß Deine SCSS-Änderungen in CSS umgewandet werden. Wichtig ist doch, daß Du den kompletten Satz der SCSS-Dateien bekommst. Alles andere kannst Du dann umbauen.

Ja genau, ich verwende ein config.rb file um mit compass die sass file (scss) zu css files zu "compilieren". Das hat beim Bootstrap 3 Projekt gut funktioniert, müsste also auch hier mit Bootstrap 4 gehen.

Wenn man das jetzt so macht, welche Drupal-Module verwendet man dann in D8 für Bootstrap 4?

https://www.drupal.org/project/bootstrap wohl nicht, da für Bootstrap 3.
https://www.drupal.org/project/bootstrap_library schon, oder?

https://www.drupal.org/project/bootstrap4 könnte man als Starterkit hernehmen. Allerdings wie ist das Theme gedacht? So dass man darunter von diesem Theme ein Subtheme macht (sonst kann man davon ja keine Updates machen, wenn man es direkt verändert)?
Oder einfach kopieren und umbennenen zum eigenen Theme-Namen und sozusagen nur als Starthilfe erwenden, ohne dass es dann upgedatet wird, da es ja ein ganz anderes Theme geworden ist.

Bootstrap selbst muss man dann auch noch runterladen und man nimmt die "Source files" beim Download, oder doch nicht?

Werden dann beim Aufruf des SASS compilers die gesamten Bootstrap files selbst auch "compiliert" oder nur die eigenen vom Theme?

Ist das alles und korrekt?

Bei den Fragen muß ich passen. Ich mag Bootstrap nicht und benutze es daher nicht. Ich habe aber auch kein Problem mit gulp. Dafür muß man sich nur an die Kommandozeile gewöhnen, aber darum kommt man bei D8 ohnehin nicht herum.

Wir bevorzugen den Gulp Ansatz, aber während der Evaluation für ein Projekt haben wir https://www.drupal.org/project/bootstrap_barrio + https://www.drupal.org/project/bootstrap_library angetestet. Das funktionierte soweit auch ganz gut.

Wann ist es eigentlich nötig, Bootstrap 4 neu zu "compilieren" mit dem SASS Compiler und wann reicht es, die DIST Version von Bootstrap, also "Compiled CSS and JS" zu verwenden?

Normalerweise müsste man doch mit "Compiled CSS and JS" in den meisten Fällen auskommen und dann benötigt man doch auch kein gulp, sondern verzichtet ganz auf SASS und schreibt dies style.css direkt um oder man verwendet einen einfachen SASS Compiler wie compass um aus den SASS files eine style.css zu generieren, welche CSS Verzeichnis des bootstrap_barrio Subthemes abgelegt wird.

Dann ist doch alles einfach, oder? Und man kann auf gulp & npm ganz verzichten.

Das kann unter Umständen Sinn machen, wenn man nur einen Teil der Bootstrap Komponenten für ein Projekt benötigt und auf Performance Wert gelegt wird.

Wenn man Bootstrap as it is verwendet ist ein vorkompiliertes sicherlich absolut das richtige.

Was ist wenn man die Bootstrap Mixins nutzen möchte, z. Bsp. media breakpoints:

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

Das geht mit der "Compiled CSS and JS" Version wohl nicht, oder?

Am Ende verzichtet man auf einige/viele Dinge rund um Bootstrap, um nicht selbst compilieren zu müssen, oder?

gulp und npm ist für mich auch Neuland,

ich habe bisher für Drupal 7 & Drupal 8 immer Bootstrap 3 hergenommen und daraus ein subtheme für SCSS gemacht und mit compass gearbeitetet (rvm) ...... aber dieses gulp und npm überfordert mich, wie kann ich hier kompilieren? Ich habe es zwar geschafft das ganze bootsrap 4 theme lokal mit https://www.drupal.org/project/bootstrap_sass laufen zu lassen, hab aber keine Ahnung wie ich hier mit compass arbeiten kann, so wie ich es verstehe, ist gulp und npm sowas wie compass?

bei compass habe ich immer mit "compass watch" oder "compass compile" kompiliert, wie mache ich das mit gulp und npm nachdem es bei mir lokal installiert wurde? Vllt. ist es sogar besser aber ich muss wissen wie ich das machen muss... und nehmen wir mal an ich importiere das ganze in ein hosting... muss ich das Zeug da auch installieren?

Hi.

Compiliert wird normalerweise lokal und nicht auf dem Host.

Gruss

Robert

Am besten ist, wenn Du bei Compass bleibst. Du bist damit viel schneller und es ist einfacher.

Also verwende das Theme "Barrio" von hier
https://www.drupal.org/project/bootstrap_barrio

und kopiere es in dein /themes Verzeichnis.

Dann erstelle dein eigenes Theme für den aktuelles Projekt und mache zu zu einem Sub-Theme von Bootstrap Barrio:

Danach kannst Du lokal ganz normal mit Compass arbeiten, in dem Du eine config.rb Datei erstellst (wie gewohnt).

Und schon hast Du ein vollwertiges Bootstrap 4 Theme unter Drupal 8 mit allen Möglichkeiten und sehr einfach. Abgesehen davon, dass deine SASS Dateien mittels Compass in CSS Dateien "compiliert" werden, ist sonst nichts weiter zu compilieren oder nichts kompliziertes zu tun!

Und nicht übersehen:
Bootstrap Barrio hat das Color Modul inkludiert: Das bedeutet, dass viele Theme-Einstellungen direkt in der Admin-Oberfläche gemacht werden können. Zuerst dort alles einstellen und ausreizen was möglich ist, danach weiteres Theming mittels CSS vornehmen.

Hey DrupalFan,
Danke für die schnelle Antwort, hatte gehofft, dass von dir was kommen würde weil ich mir schon dachte, dass du es nach fast 3 Monate es irgendwie hinbekommen hast :)) ich hatte mir dieses Barrio Projekt auch angeschaut, dachte aber es wäre nur für CDN also hatte ich es sein lassen.. ok, ich habe es bereits ausprobiert, ich habe mir das subtheme aus Barrio geholt, daraus unter /themes/custom mein eingenes Theme gemacht der auch so schon gut funktioniert .. die config.rb, /scss Ordner mit der syles.scss erstellt
Noch scheint es aber nicht zu klappen mein compass compile greift noch nicht, muss ich da no was machen damit es greift?

Was bedeutet das genau, dass es nicht greift? Das ist zu ungenau. Vielleicht ist ein Fehler in der config.rb, je nachdem was Du mit greift nicht meinst ...

Ich in meiner Entwicklungsumgebung muss immer compass watch --poll aufrufen, damit Änderungen automatisch erkannt werden. Funktioniert perfekt und ist so einfach, man kann ja die config.rb einfach vom letzten Projekt kopieren und dann leicht anpassen ....

@DrupalFan, nach meiner Information und auch Versuch läuft Compass nicht mit der Sass Version, die Bootstrap 4 benötigt.
Ich hatte eine Fehlermeldung und über die bin ich auf mehrere Hinweise gestoßen, dass das mit Compass nicht mehr geht.
Jetzt mache ich es ohne Compass , lass einfach einen sass Watch auf den Ordner achten und das funktioniert auch.
ich bin allerdings auf Windows, vielleicht liegt es daran?

@simon.b
Mit Barrio kann man auch mit vorkompiliertem Bootstrapp arbeiten, das auf dem Server liegt, also ohne CDN.
DAbei hilft das Modul Bootstrap Library...steht ja alles in der Doku bei Barrio.

@montviso
Ich arbeite unter Ubuntu und Windows gleichzeitig, nutze jeweils das beste aus beiden Welten. In der Shell unter Ubuntu "compass watch --poll" aufrufen und so macht es keine Probleme.
Eine Drupal Virtual Machine wäre bestimmt auch für dich was ...

Ja, es reicht ja so gut wie immer die "Compiled CSS and JS" Version von Bootstrap 4 zu verwenden, auch zusammen mit dem Theme "Bootstrap Barrio".

@DrupalFan,
könnte ich sicher - also Drupal Virtual Machine einrichten.
Jetzt habe ich mir das aber auch ganz nett eingerichtet.
Arbeite mit phpEd, wo ich schönen CSS-Editor habe und SASS lauscht auf Änderungen und vom phped kann ich die aktualisierte style.css dann auf den Server schieben.

Aber wenn ich hier schon mal jemanden habe, der auch mit Bootstrap 4 und Sass arbeitet. ;-)
Darf ich mal fragen, wie Deine Datei-Struktur auf dem Produktivserver dann aussieht?
Da bin ich noch nicht ganz sicher.
Ich habe ja gulp ausgeführt bei mir lokal und da sind im Ordner node_modules meines Subthemes hunderte von Ordnern entstanden.
Die brauche ich ja nicht alles auf dem Produktivsystem...oder?

Ich brauche wohl nicht erwähnen, dass ich gerade erst mit SASS anfange. ;-)

Also ich muss sagen, wenn man mit Bootstrap 4 und Sass arbeitet, dann ist das sehr sehr einfach, wenn man nur auf node.js (node_modues) ganz verzichtet.

Ich habe mal vor schon ca. 2 Jahren ein Projekt mit node_modules, wahrscheinlich war es mittels gulp oder einem seiner Verwandten, gearbeitet und hatte dabei viele Probleme.
Eines weiß ich noch: Die node_modules solltest Du unbedingt außerhalb deines Projekt-Verzeichnisse, also eine oder mehrere Ebenen höher, oder unter Windows einfach unter c:/node_modules oder d:/node_js oder wo ähnlich installieren. Das ist nicht ganz einfach, aber irgendwie geht das. Dann ersparst Du dir viele Probleme. Habe mal alle node_module Dateien im Projektverzeichnis und dann hab es extrem viele Probleme, soweit ich mich noch erinnern konnte, wurde Drupal in bestimmten Situationen so langsam, dass man bei jeder Aktion viele Sekunden arten musste usw. Am Ende stellte sich heraus, dass die node_modules Ordner unbedingt dort weg mussten!!!

Node.js ladet Unmengen an libs, die man in Wirklichkeit alle nicht braucht. Diese werden nur geladen, weil man gulp (oder vergleichbares Tool) verwendet.

Daher verzichte ich seit damals wo immer es nur geht auf node.js!!!
Daher verzichte ich seit damals wo immer es geht auf gulp und npm usw.!!!!

Man erspart sich extrem viel Zeit aber auch unnötige Resourcen und Dateien, wenn man auf das verzichtet.

In diesem ganzen Thread hier sollte es eigentlich darum gehen, wie man auf gulp und npm usw. verzichten kann.

Auf jeden Fall kannst Du, wenn Du mit Bootstrap 4 und Drupal 8 arbeitet, darauf vollkommen verzichten. Man muss die Anleitung auf den Drupal-Projektseiten oder Theme-Seiten ignorieren und es ohne gulp, npm usw. machen!

Nimmt man die "Compiled CSS and JS" Version von Bootstrap 4, dann braucht man sowie nichts von diesem gulp und npm.

Und warum sollte man mit der compiled version nicht auskommen? Es gibt vielleicht einige Dinge wie mixins, die man dann nicht in der vollen Breite nutze kann (Bootstrap neu 'compilieren' fällt dann weg). aber braucht man das unbedingt? NEIN!

Ein volles Bootstrap Theme zu erstellen für ein richtiges Portal ist schon mit genug Stunden Aufwand verbunden. Warum sollte man es verkomiplizieren und Dinge wie gulp und npm einsetzen, wenn es auch ohne viel einfacher geht.

Als Anfängerin bei Sass verzichte unbedingt darauf, Du ersparst Dir sehr viel Zeit.

Danke, das hilft mir sehr weiter.
Probleme hatte ich jetzt lokal auf der SASS-Entwicklungsumgebung noch nicht mit den ganzen libs und produktiv habe ich sie einfach nicht gestellt.
Verwirrt mich nur bissl-aber funktionieren tut alles wunderbar.

Nimmt man die "Compiled CSS and JS" Version von Bootstrap 4, dann hat man aber auch kein Sass, oder kann man sich das auch alles zusammen-pfriemeln?

Doch, natürlich hast Du ein SASS für deine Styles! Sass kannst Du immer bei jedem Projekt verwenden, egal was sonst rundherum verwendet wird. Weil Du machst ja nichts anders als
- anstatt eine style.css direkt selbst schreiben
- ein sass-Verzeichnis erstellen, darin ein style.scss erstellen und nur diese bearbeiten
- mit dem Sass-Compiler (Compass) aus der style.scss eine style.css im richtigen Verzeichnis erstellen mittels config.rb.

Mehr macht Sass nicht und daher ist bei jedem Projekt vollkommen egal, ob Du die style.css direkt schreibst oder ob Du die style.scss schreibst und bei jeder Änderung die style.css durch den SASS-Compiler neu erstellt wird..

Und natürlich kann man mehrere .scss-Dateien zu mehreren .css.-Dateien compilieren und per includes usw. zusammenfügen oder mehrere in Drupal iimportieren, man ist nicht auf eine Datei beschränkt, der Sass-Comiler kann ja gleich mehrere Dateien beobachten auf Änderungen und dann compilieren ....

Und die Bootstrap 4 Styles brauchst Du ja nicht verändern. Wenn irgend etwas mal anzupassen wäre, was von Bootstrap nicht so gut passt für dein Projekt, dann machst Du halt in deiner style.scss (und damit style.css) 'Änderungen, man kann ja mittels css bestehende css überschreiben, das gut man ja die ganze Zeit.

Bei mir haben z. Bsp. die margins und paddings die Bootrap bei jeder col links und rechts hat nicht gepasst, weil ich den gesamten Raum ausnutzen muisste. Deswegn muss ich nicht Bootstrap 4 neu compilieren, sondern habe einfach die paddings und margins auf 0 gesetzt. Manchmal ist ein !Important nötig, aber das ist doch auch kein Problem, wenn man ab und zu so ein !important verwendet, wichtig ist, dass es einfach ist und funktioniert.

Ja, dass ich mir die .scss-Dateien selbst schreiben kann, ist mir schon klar.
Aber ich möchte ja auch die Variablen von Bootstrap verwenden und nur die ändern, wo ich wirklich andere Werte benötige.
Eine gewisse Einheitlichkeit soll ja auch gegeben sein.
Da muss ich mir dann vermutlich einfach alle Dateien zusammen suchen, die wesentlich sind, weil die - schätze ich mal - nicht in der vorkompilierten Version dabei sind.
Naja, das kann ich ja alles nachschauen und ausprobieren.
Danke Dir, DrupalFan...

Also wie schon gesagt, Bootstrap brauchst Du in 99% der Fälle nicht verändern.

Klar, ich wollte am Anfang auch die Variablen von Bootstrap ändern und habe nach Lösungen gesucht, wie das einfach geht. Um dann festzustellen, dass man in 99% der Fällen die Variablen von Bootstrap NICHT ändern muss, weil man ja durch zusätzliche CSS-Anweisungen das auch erreichen kann. Es bringt in 99% der Fällen keine Vorteile, wenn Du die Bootstrap Variablen änderst.

Daher: Nutze in 99% der Fällen die Compiled Version von Boostrap 4 und ändere nichts an Bootstrap 4, daher brauchst Du auch Bootstrap nicht zu compilieren und nur deine eigenen Style, als SASS compiliert mit Compass, hinzufügen.

Dann ersparst Du die bei 99% der Projekte viel Zeit und deine Projekte werden einfach, übersichtlich, weil Du kein gulp, kein grunt und keine node_modules brauchst!!!! Glaub mir, das macht Sinn.

Wenn Du bei 100 Projekten ein einziges Mal mehr benötigst, dann machst Du halt dieses eine Projekt kompliziert, compilierst Bootstrap 4 mit geänderten Variablen neu, verwenddest grunt oder gulp und node.js . Aber eben nur bei diesem einen Projekt!!! Bei den anderen 99% ist das nicht nötig.

Das ist wie beim Garteln, da bist Du ja Profi: man macht ja nicht unbedingt alles kompliziert, wenn es einfach auch geht :-)

Ich habe es inzwischen unter Ubuntu geschafft :) Jo, im Prinzip sehr einfach, hatte nur was bei der config.rb vergessen
Barrio Subtheme mit compass ist das beste! Nur leider nervt mich das Color-Zeug in der Design Konfiguration, muss noch damit klar kommen erstmal da alles anzupassen.. die Farben habe ich immer mit SCSS lieber selber gemacht .. aber evtl muss ich nur damit klar kommen!
Und was ich noch hier lesen konnte: Am besten NIE die Bootstrap Variablen ändern, damit ist es fast sicher garantiert, dass mehr durcheinander geht als was gutes zu tun, es gibt meistens andere, saubere Lösungen ohne die Bootsrap Variablen zu ändern!

Also ich kann das nicht bestätigen.
Ich komme ganz gut damit klar.
Ob es viel Nutzen hat, hängt vermutlich vom Projekt ab.
Bei dem aktuellen - unserer eigenen Homepage Relaunch unter D8 - habe ich es einfach mal probiert und keinen Ärger.
Aber natürlich hätte ich die paar Farbänderungen auch ohne Variablen hin bekommen.

Egal, insgesamt jedenfalls eine schicke Sache.

Welche zusätzlichen Module für Bootstrap nutzt Ihr?
Nutzt Ihr Helferklassen in den Blöcken oder in der View?

Views Bootstrap habe es auch in zwei Projekte hergenommen, je nachdem ob es in der View Sinn macht, in mein Fall eher selten in Views..
Block Class habe ich in so gut wie alle meine Projekte drinnen, da gebe ich Bootstrap Klassen ein wie die conatiner, cols, und und und .. oder auch eigene Klassen, das ist meiner Meinung das wichtigste.
Weitere Zusatzmodule die mit Bootstrap in Verbindung stehen können gibt es bestimmt, ich persönlich habe nur diese zwei hergenommen und mir fällt auch nicht ein, ob ich auch andere hergenommen habe ...

Ja, genau Block Class nutze ich genauso und bei Views gebe ich die Klassen bei den Styles ein, überschreibe bzw. ergänze also die Views-Default-Klassen.
Mit Paragraphs spiele ich auch rum. Da gibt es dass Bootstrap Paragraphs-Modul. Davon bin aber noch nicht so begeistert.
Vermutlich such ich mir noch einen Ersatz für Paragraphs.

Also Leute diese Gulp und npm Zeugs ist toll. Barrio bootstrap 3 und bootstrap 4 verwenden alle 3 npm und Gulp. Damit macht man Bilder im Theme und auch den an den Kunden ausgelieferten Code in Null Komma nix so klein wie irgendmöglich. Von sämtlichen hilfreichen Abbruchhinweisen wegen Fehlern im Code ganz zu schweigen. Wenn mir also jemand verkaufen will, dass er Gulp und npm nicht brauchen kann, weil er

A unter Windoof arbeitet und B keine Lust auf Gulp und npm hat, und er diese ganzen Module nicht brauchen würde, dann hat er schlichtweg keinne Ahnung.

Setz dir bitte eine Linux Von auf und lerne das. Danken kannst du mir später.

es sind fast 11 Monate her, sehr schön :) Mittlerweile benutze ich bootstrap_barrio + bootstrap_sass, ich mache mir vom "bootstrap_sass" ein subtheme mit dem hinterlegten script im bootstrap_sass ordner und kopiere mir das "templates" ordner von "bootstrap_barrio" und füge es in mein erstelltes subtheme, dann arbeite ich mit gulp :) am Anfang fand ich es eben zu kompliziert, mittlerweile bevorzuge ich gulp (vor compass), nur die Installation ist etwas komplizierter....

woher nimmt ihr euch eure standard templates für bootstrap 4 her?

Hört sich gut an.
Was verstehst Du unter standard templates?
Die, die Du dann im Subtheme überschreiben kannst?
Bei mir z.B. /themes/contrib/bootstrap_barrio/templates
Ich habe aber den Verdacht, Du meinst was anderes?

hi montviso,
ne, genau diese meinte ich, also nimmst du dir auch den ganzen templetes ordner vom bootstrap_barrio theme, ich nehme auch den her, der erscheint mir aber zu groß, zu viele regionen, ich weiß, es ist dafür gedacht das ganze zu ändern, aber die a colors von schriften/verlinkungen sind da sehr schlecht gelöst so als standard theme..

Nein, ich hole mir nur die einzelnen, die auch wirklich überschreiben will und die kriegen ja dann meistens einen individuellen Namen, weil ich irgendwas nur für einen bestimmten Inhaltstyp / Feld / View machen möchte.
Wenn man alles holt, hat man ja keinen Überblick mehr, wo man tatsächlich was geändert hat.

Hi.

Das Konzept von Bootstrap 4, sieht nicht mehr vor dass man CSS direkt ändert.
Mann ändert sass Variablen und damit die Colorierung das Themes.
Dafür ist Bootsrap eben sehr klein und schnell.
.
Wenn du in BS4 etwas ändern willst lade dir den Source runter compilere es lokal
und binde die dist js,css und sass in deine Seite ein.
Die sass Variablen kannst du dann sehr einfach ändern.

MfG

Robert

Das stimmt so schon Robert.

Trotzdem 2 kleine Ergänzungen

1. Das war in Bootstrap 3 nicht anders
2, Kompilieren sollte man das mittels npm. node. gulp und dem mitgelieferten Script, Dann kann man das ganze nämlich beobachten lassen und es Kompiliert sich nach jeder Änderung selbst neu.

Das macht Spaß, geht schnell und man schafft einfach viel mehr in viel kürzerer Zeit.

Bedeutet, man hat mehr Zeit zum Kaffee trinken.

Ich nenne das auch gerne „Bezahltes Warten“ :-)

Ich möchte hier wenn es um Drupal 8 und Bootstrap 4 geht auch einmal das Radix-Theme nennen.

Ich habe mit Barrio und Radix gearbeitet und finde Radix deutlich besser. z. B. kann man mit dem Radix-Theme Bootstrap-Variablen ganz easy ändern, aber auch sonst ist es gut durchdacht und mit dem Components-Ansatz wirklich spannend - bei Components ist John Albin (der D7 Zen-Theme Creator) beteiligt. Wenn er nicht weiß was gutes Drupal-Theming ist ...

Radix nutzt npm, insofern passt es hier nicht ganz zum ursprünglichen Titel des Threads, aber über den Sinn und Nutzen von Tools wie npm ist ja hier schon diskutiert worden.