[phpBB Debug] PHP Warning: in file [ROOT]/ext/tas2580/seourls/event/listener.php on line 213: Undefined array key "FORUM_NAME"
REX mit bootstrap "verheiraten" // Templates + CSS komplex - REDAXO Forum
Hallo,

Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.

Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt :-)
Selbst einladen kannst Du dich hier: https://redaxo.org/slack/
Benutzeravatar
madiko
Beiträge: 68
Registriert: 15. Aug 2009, 15:41
Wohnort: Stuttgart
Kontaktdaten: Website Twitter YouTube

REX mit bootstrap "verheiraten" // Templates + CSS komplex

2. Mai 2015, 22:23

Hallo zusammen,

arbeite mich gerade (sehr mühselig) in Twitter Bootstrap ein:
http://holdirbootstrap.de

Das ist ein echt geniales Tool, um responsive Webdesign umzusetzen. Allerdings recht mächtig im CSS-Code...

Hat eine/r von Euch das schon gemacht?
Mir graut's vor allem vor dem Verheiraten des umfassenden Codes der Navigation von REX mit Bootstrap. Das könnte der Super-GAU werden, weil beides extrem komplex ist. Insofern wäre ich sehr dankbar für eine Abkürzung in der Lernkurve ;-)


Trotz großem Aufwand: Ich glaube, dass sich das lohnt. Sind beide OpenSource-Programme miteinander verbunden, hat man wieder alle Gestaltungsfreiheiten und ist technisch auf dem neuesten Stand.

Was meint Ihr? Freue mich über Kommentare, Meinungen, Tipps & Tricks.

Danke & viele Grüße,
Franziska

NGW
Beiträge: 132
Registriert: 1. Mär 2011, 09:12
Kontaktdaten: Website

Re: REX mit bootstrap "verheiraten" // Templates + CSS kompl

3. Mai 2015, 12:57

Hallo Franziska,

an deiner Stelle würde ich zum Einarbeiten erst einmal den Quelltext vom BS Startertemplate (http://getbootstrap.com/examples/starter-template/) in dein Redaxo-Template kopieren. Danach:

- Pfade der Skripte / CSS Files anpassen
- Die obere Navigation ist eigentlich eine einfache Liste mit einer bestimmten Klasse. Soetwas kannst du z.b. mit nav42 (ist Teil vom seo42 Addon) umsetzen oder auch manuell mit den Redaxo-Objekten programmieren (siehe http://www.redaxo.org/de/doku/tutorials ... avigation/ --> ganz unten "Eigene Navigation schreiben)
- an gewünschter Stelle REX_ARTICLE[] einsetzen

Ist eigentlich nicht so wild...

Gruß
Nico

Benutzeravatar
Oliver.Kreischer
Beiträge: 2508
Registriert: 17. Dez 2004, 00:03
Wohnort: Velbert - LA
Kontaktdaten: Website

Re: REX mit bootstrap "verheiraten" // Templates + CSS kompl

3. Mai 2015, 13:47

Hallo Franziska,

ich glaube auch, dass die Navigation das kleinste "Problem" ist.
Ich würde eigentlich immer auf eine "Bootstrap Navigation" verzichten. Sieht ja sonst immer gleich aus.

Wenn Du Ideen für die Verwaltung der Inhalte benötigst ist evtl. dieser Thread interessant:
http://www.redaxo.org/de/forum/module-a ... t8240.html

LG
Oliver
> Friends Of REDAXO Gemeinsame REDAXO-Entwicklung!
> REDAXO Agenturen. Eintragen erwünscht!
> Komm in den Slack Channel Es lohnt sich!

Benutzeravatar
madiko
Beiträge: 68
Registriert: 15. Aug 2009, 15:41
Wohnort: Stuttgart
Kontaktdaten: Website Twitter YouTube

Re: REX mit bootstrap "verheiraten" // Templates + CSS kompl

3. Mai 2015, 14:09

Hallo,

das ist so eine Sache mit dem "nicht so wild". Meine ursprüngliche Idee war, mein Design und meinen Master (mit entsprechend viel Modulen und Templates) auf Bootstrap zu migrieren...

Inzwischen ist mir jedoch klar geworden, dass ich Template- und vor allem Modul-Programmierung komplett neu lernen muss. Ich überlege, ob ich tatsächlich wieder - quasi bei Null - anfangen muss. Meinem Lernfortschritt nach (*grml*) bedeutet das für mich, mich über die Demo-Templates langsam meinem eigenen Template wieder zu nähern...

Ich habe recht komplexe Seiten (z. B. http://madiko.com oder http://EnjoyWork.camp). Mein Ziel ist jedoch, es mir bzw. einem Redakteur möglichst einfach zu machen. Will ja schließlich nicht alles händisch pflegen - oder wenn ich etwas anpassen will, dann soll das möglichst schnell und einfach gehen. Und ich will nicht für jeden Kunden wieder alles komplett neu entwickeln. Master bedeutet ja auch effizient eine neue Version weiterentwickeln zu können.


Einerseits scheint mir das langsam lernen der bessere Lernweg zu sein. Andererseits ist das echt frustrierend. Ich will ja nicht eine Kopie des Bootstrap-Designs, das nur meine "Farben" enthält. Ich wollte doch etwas mehr "eigenes"... Da bin ich voll bei Oliver.


Mir gefällt die Idee, in kleinen Häppchen anzufangen - also zum Beispiel im Content-Bereich mit meinen Modulen! Guter Punkt, gefällt mir. Muss nur schauen, ob das zusammen harmoniert mit dem "alten" Raster. Probiere ich bei Gelegenheit aus.


Nachdem ich mich zwei Tage sehr intensiv mit Bootstrap beschäftigt habe, geht es zumindest mir (als Autodidakt und Laie) so: Ganz so trivial ist das mit der Navigation nicht. Mein aktueller Master enthält 330 Zeilen CSS-Code für Navigation (Meta/Hauptnavi/Bradcrumb). Der Standard-Code von Bootstrap umfasst sage und schreibe 1101 Zeilen CSS-Code!! Und das nur, um die Anpassung an die veränderte Größe von Displays, collapse und so weiter - ach ja, und die Farben für alle möglichen Details der Navi - umzusetzen. Das ist hoch komplex und alles andere als einfach.

Leider ist aber gerade das Thema "Navigation" für ein responsive Webdesign eines der entscheidenden Funktionen und im Grunde "state of the art".... *großer Seufzer.


Freue mich über weitere Diskussion, Tipps & Tricks.

Schönen Sonntag,
Franziska

NGW
Beiträge: 132
Registriert: 1. Mär 2011, 09:12
Kontaktdaten: Website

Re: REX mit bootstrap "verheiraten" // Templates + CSS kompl

3. Mai 2015, 14:29

Die Bootstrap Core-CSS Datei solltest du nicht bearbeiten.

Stattdessen eine zusätzliche CSS-Datei einbinden in der du nur die gewünschten Änderungen hinterlegst. Dann ist es auch nicht mehr ganz so kompliziert :-)

Der Vorteil der Bootstrap Navi ist eben, dass Sie bereits komplett responsive ist. Optisch kann man sie natürlich komplett abändern...


Gruß
Nico

Benutzeravatar
RexDude
Beiträge: 2543
Registriert: 22. Apr 2010, 11:24

Re: REX mit bootstrap "verheiraten" // Templates + CSS kompl

3. Mai 2015, 15:51

Du kannst Responsive auch ohne Bootstrap. Die wichgisten Zutaten sind ein Grid, z.B. das aus dem Min-Framework: https://github.com/owenversteeg/min/blo ... d/grid.css und eine Responsive-Navi z.B. die hier: http://responsive-nav.com/. Der Rest mit REX und so kommt dann von alleine... :D

Benutzeravatar
madiko
Beiträge: 68
Registriert: 15. Aug 2009, 15:41
Wohnort: Stuttgart
Kontaktdaten: Website Twitter YouTube

Re: REX mit bootstrap "verheiraten" // Templates + CSS kompl

3. Mai 2015, 18:11

@Nico: Ja, das ist auch meine Idee. Davor stelle ich jetzt zumindest mal das zusätzlich Dokumentieren des Codes - damit ich schneller die entsprechenden Code-Schnipsel finde, die ich ggf. personalisieren/anpassen muss. ;-) Cool finde ich da schon mal den Service, dass mann Bootstrap personalisieren kann: http://holdirbootstrap.de/anpassen-und-herunterladen

Wenn ich es richtig verstanden habe, muss ich die angepasste CSS-Datei dann NACH den Originalen in den header einbauen, richtig?

Danke für Deine guten Tipps :-)
Zuletzt geändert von madiko am 3. Mai 2015, 18:15, insgesamt 1-mal geändert.

Benutzeravatar
madiko
Beiträge: 68
Registriert: 15. Aug 2009, 15:41
Wohnort: Stuttgart
Kontaktdaten: Website Twitter YouTube

Re: REX mit bootstrap "verheiraten" // Templates + CSS kompl

3. Mai 2015, 18:15

@RexDude: Ein Grid nur in %en...? das ist mir zu wenig. Das macht heute keinen Sinn mehr - zumindest wenn ich den Anspruch habe, eine nutzerfreundliche Website für alle Screens mit mobile-first zu erstellen. Und diesen Anspruch habe ich ;-)

Die Responsive-Nav hingegen scheint mir genial einfach. Könnte ein Einstieg für mich sein.

Danke!

Benutzeravatar
RexDude
Beiträge: 2543
Registriert: 22. Apr 2010, 11:24

Re: REX mit bootstrap "verheiraten" // Templates + CSS kompl

3. Mai 2015, 18:28

Naja hat nicht jeder den Anspruch wenn er responsive entwickelt?
Bootstrap nutzt meines Wissens doch auch Prozente. Was spricht denn dagegen?

Benutzeravatar
madiko
Beiträge: 68
Registriert: 15. Aug 2009, 15:41
Wohnort: Stuttgart
Kontaktdaten: Website Twitter YouTube

Re: REX mit bootstrap "verheiraten" // Templates + CSS kompl

3. Mai 2015, 19:28

@RexDude: Sie definieren zunächst die gängisten Bildschirm-Auflösungen aufbauend auf einem 12er-Raster. Dafür wird mit min-width und max-width optimiert. Für die Übergänge zwischen den häufigsten Bildschirmgrößen skalieren sie fließend. Guckst Du hier: http://holdirbootstrap.de/examples/grid/

Darauf aufbauend stehen <div>s dann untereinander, nebeneinander oder werden auch mittels collapse verkleinert.

Gut gelöst ist auch der Umbruch von zusammenhängenden Modulen, falls die Inhalte zu unterschiedlichen Längen führen (was ja eher die Regel ist bei "lebendigen" Seiten denn die Ausnahme).

Weitere Beispiele: http://holdirbootstrap.de/los-gehts/#examples

robo
Beiträge: 106
Registriert: 17. Aug 2012, 09:03
Wohnort: Wien
Kontaktdaten: Website

Re: REX mit bootstrap "verheiraten" // Templates + CSS kompl

3. Mai 2015, 20:14

Hallo madiko,

natürlich sind das Prozentwerte in Kombination mit Media Queries.

Aber: Willst du Bootstrap wirklich in einer Produktivumgebung einsetzten. 1000Millionen unnötige CSS Anweisungen die man sowieso nicht braucht sind da dann mit dabei. Außerdem sehen dann alle Websites wieder irgendwie gleich aus...
Super ist Bootstrap z.B. , wenn mehrere EntwicklerInnen an einem Projekt arbeiten - dann können alle die Bootstrap Regeln lernen und 20 HTML-Schreiberlinge und ProgrammiererInnen verwenden die selbe Logik/Syntax.... oder so.
Oder wenn man mal was schnell umsetzten möchte oder einen Prototypen für eine Webapplikation braucht -> Bootstrap sicher gut...

Tipp: Responsive Webdesign von Galileo Computing (Andrea Ertel, Kai Laborenz) und in wenigen Tagen ist man mit ein wenig CSS-Vorkenntnissen ein Responsive-Profi. Auch Navigationen etc. sind dann kein Problem mehr. Ich hab mir das Buch gegönnt und ich kann es nur empfehlen. (mache ansonst keine Werbung)

Grüße,
Robert


Benutzeravatar
madiko
Beiträge: 68
Registriert: 15. Aug 2009, 15:41
Wohnort: Stuttgart
Kontaktdaten: Website Twitter YouTube

Re: REX mit bootstrap "verheiraten" // Templates + CSS kompl

3. Mai 2015, 21:13

Hallo Robert,

Jonas Hellwig ist ein super Tipp. Hab in YouTube diese Mini-Serie gefunden:
https://www.youtube.com/playlist?list=P ... PJZRJiogFl

Zeigt eindeutig, was der junge Mann aus Berlin drauf hat ;-)

@all: Das von Robert empfohlene Buch findet Ihr übrigens hier:
https://www.rheinwerk-verlag.de/respons ... esign_3752

Gruß in die Runde,
Franziska

robo
Beiträge: 106
Registriert: 17. Aug 2012, 09:03
Wohnort: Wien
Kontaktdaten: Website

Re: REX mit bootstrap "verheiraten" // Templates + CSS kompl

3. Mai 2015, 21:30

@Franziska. Das ist definitiv nicht das Buch, das ich empfohlen habe :-S, Das ist gar kein Buch, sondern ein Videotraining. Ich habe aber ein Buch empfohlen... Nur damit es dann nicht heißt, ich hätte das empfohlen:-B

Benutzeravatar
madiko
Beiträge: 68
Registriert: 15. Aug 2009, 15:41
Wohnort: Stuttgart
Kontaktdaten: Website Twitter YouTube

Re: REX mit bootstrap "verheiraten" // Templates + CSS kompl

3. Mai 2015, 23:08

Robert, pardon! Wer lesen kann, ist klar im Vorteil! :oops:
Ich habe gewebsucht und war dann schon von der nächsten Quelle abgelenkt... Entschuldigung.


KLARES ZEICHEN! ... und damit wünsche ich für heute allen eine geruhsame Nacht! KNOX.

robo
Beiträge: 106
Registriert: 17. Aug 2012, 09:03
Wohnort: Wien
Kontaktdaten: Website

Re: REX mit bootstrap "verheiraten" // Templates + CSS kompl

4. Mai 2015, 12:44

@Franziska. Kein Problem. Ich hab halt das Buch gut gefunden, vielleicht ist das Videotraining e auch recht gut. In diesem Buch fand ich die wesentliche Dinge die nach meinem Dafürhalten Hand und Fuß haben. Plötzlich war das Wort "Responsive" nix mehr, wovon ich in meinem zarten Alter bereits graue Haare bekomme. Im Web findet man oft sehr widersprüchliche und unsaubere Dinge – gerade im Bereich Responsive-Navigation wo grundlegende Themen wie Semantik, Barrierefreiheit, unobtrusive JS etc. ansch. nicht existieren – hauptsache es schaut gut aus... Aber man findet auch sehr, sehr schöne Sachen, welche für mich, mittels der genannten Lektüre in Folge einfach zu erkennen, erweiterbar, anpassbar, ... sind!

Grüße,
Robert

Zurück zu „Sonstiges“