Mein eigenes responsive Grid

[Wisey]

Hallo zusammen

Für eine neue Website habe ich nach einem geeigneten responsive Grid gesucht, aber alle hatten irgendwo einen Haken. Habe deshalb mal ein eigenes responsives Grid erstellt, welches meinen Bedarf glaub ich ziemlich gut abdeckt (habe es jedoch noch nicht im Einsatz getestet). Hier könnt ihr mal reinschauen:
http://usschoss.ch/grid

Das Grid habe ich mit scss erstellt. Dadurch lassen sich die Breakpoints, Grid-Breiten und der Spaltenabstand rasch einstellen. soweit ich getestet habe, scheint es mit IE8 kompatibel zu sein.
Was meint ihr dazu? Evtl. etwas, was noch fehlt? Irgendwo ein Bug? Oder gibt es im Netz doch irgendwo ein Grid, das diese Funktionen schon abdeckt oder sogar noch mehr kann?
Habe mir auch schon einige "semantische" SASS-Grids angeschaut... aber die waren mir im Moment noch zu kompliziert (habe gerade erst mit SASS und Grid begonnen).

[halofei]

Welche "Haken" meinst du denn bei anderen Grids?

[Wisey]

Zu tiefe Eingriffe in die Styledefinition, ungleichmässige Spaltenbreiten, zu viele DIVs, nur Prozent basiert,... und dann gibts noch einige SASS-Grids, die im Moment für mich noch ein wenig zu kompliziert sind.
Ausserdem habe ich einen andren Ansatz zum zentrieren der Site gewählt (left: 50% / -Hälfte von Grid). Dadurch braucht man auch wiederum ein DIV weniger, wenn man eine Hintergrundfarbe über die ganze Breite haben möchte.

[folkfreund]

Hallo Wisey,

das sieht ja erstmal vielversprechend aus!

Ansatz zum zentrieren der Site (left: 50% / -Hälfte von Grid)

Woher kommt die Grid-Breite bzw. die Hälfte davon? Mit Firebug sehe ich feste Zahlen in px, die sich aber ohne Javascript ändern wenn der Viewport sich ändert.

Bin neugierig...

Willst du das allgemein zur Verfügung stellen?

Gruß, folkfruend

[halofei]

Sieht doch schonmal ganz prima aus.
Eine Frage habe ich: im ersten Div sind Colums 2-10 und 3-9 in einem Grid - soll das so sein?

[Wisey]

Hallo Wisey,

das sieht ja erstmal vielversprechend aus!

Woher kommt die Grid-Breite bzw. die Hälfte davon? Mit Firebug sehe ich feste Zahlen in px, die sich aber ohne Javascript ändern wenn der Viewport sich ändert.

Bin neugierig...

Willst du das allgemein zur Verfügung stellen?

Gruß, folkfruend

Hallo und danke für die Rückmeldung.

Das Grid habe ich mit Sass erstellt. Das sieht dann zu Beginn so aus:

$gutter: 20px;
$grid1: 1201px;
$grid2: 984px;
$grid3: 768px;
$grid4: 580px;

Die Breakpoints und die negativen Positionswerte werden mittels Sass automatisch anhand dieser Werte berechnet.

@halofei: Gute Frage Bei vielen Grids muss pro Zeile immer ein umschliessendes DIV für die Spalten erstellt werden. Ich habe das hier mal zu Testwecken weggelassen... und soweit ich das getestet habe, funktioniert alles einwandfrei (also keine Probleme mit clearfix, margin etc.). Ich muss zugeben, dass ich selbst schon fast den Überblick in der Sass-Datei verloren habe, da ich in diesem Bereich wie erwähnt ja noch nicht so lange zu Hause bin.

Ich habe das Grid mal hier reingestellt, da ich diesen Ansatz so noch nicht gesehen habe. Evtl. gibts hier ja Leute, die grosse Erfahrung mit Grid-Systemen haben und sagen können, ob dieser Ansatz denn vielversprechend ist oder ob es irgendwo Probleme verursachen könnte. Sollte dieser Ansatz tatsächlich funktionieren und Vorteile gegenüber anderen Grids bieten, so würde ich es noch weiter ausbauen (z.Bsp.Variablen für Spaltenumbrüche, mehrere Basic-Settings etc.) und anschliessend zur Verfügung stellen. Ich bin also gespannt auf weitere Feedbacks.

[Wisey]

PS: Der Anstoss für die Erstellung dieses Grids war die mehr oder weniger vorgegeben Anzahl an HTML-Blocks in Contao. Also gerade beim Einsatz eines CMS macht es Sinn, so wenig DIVs wie möglich für ein funktionierendes Grid einzusetzen.
In einem nächsten Schritt wäre dann noch eine "semantische" Umsetzung sinnvoll, sprich dass man keine Klassen den HTML-Elementen zuordnen muss sondern dass man mittels Sass und extend etc. den HTML-Aufbau und das Layout komplett trennen kann.

[Babelfisch]

Den Ansatz finde ich ziemlich interessant und auf den ersten Blick macht das Grid einen guten Eindruck. Sind die SASS-Quellen schon irgendwo online? Evtl. bei Github, so dass man ggf. gleich Probleme melden kann?

Gruß

[folkfreund]

Das Grid habe ich mit Sass erstellt. Das sieht dann zu Beginn so aus:

$gutter: 20px;
$grid1: 1201px;
$grid2: 984px;
$grid3: 768px;
$grid4: 580px;

Die Breakpoints und die negativen Positionswerte werden mittels Sass automatisch anhand dieser Werte berechnet.

Danke, ich hatte den Eindruck, dass die Werte sich dynamisch und kontinuierlich ändern - hab ich wohl falsch gesehen

Gestern bin ich über diesen Post hier gestolpert: https://community.contao.org/de/show...reite-%28vw%29
Vielleicht könnte man mit vw von festen Pixel-Werten wegkommen?
Also z.B.

grid: 90vw / left: 50% / -45vw.

oder einfach

grid: 90vw / left: 5vw

Nur die Breakpoints müssen natürlich weiterhin in px angegeben werden.
Was denkst du?

Gruß, folkfreund

[Wisey]

@Babelfisch: Bin gerade dabei, das Grid noch ein wenig zu erweitern. Sobald ich damit zufrieden bin, werde ich es online stellen.

@folkfreund: Da vh resp. vw vom IE8 nicht unterstützt wird, ist das im Moment noch kein Thema. Aber in hoffentlich wenigen Jahren ergibt das bestimmt ganz neue Möglichkeiten.

[ctnew]

Das Grid macht auf mich bis jetzt einen ziemlich guten Eindruck, gerade weil ein "div" weniger zum Einsatz kommt.

Bin sehr eine auf eine Testversion gespannt

[Wisey]

Habe das Grid nun noch ein wenig überarbeitet. Hat aber noch einige Fehler drin, die ich zuerst beheben muss, bevor ich es auf Github stelle. Den aktuellen Stand könnt ihr wieder unter folgendem Link ansehen:

http://usschoss.ch/grid/

Neu:

• Es lässt sich nun in der scss-Datei einstellen, an welchem Breakpoint die Spalten eine neue Breite bekommen (alle Spaltenbreiten sind individuell einstellbar)
• Genügt das nicht, kann die Klasse mit Kürzeln erweitert werden, so dass man genau steuern kann, bei welchem Breakpoint das Element eine neue Breite erhält. Das könnte dann so aussehen: col-3-span-l6c-m9c-s11c-xs12c (col-3-span -> 3/12-Breite bei normaler Ansicht / l6c -> Grid-Grösse L 6/12-Breite / m9c -> Grid-Grösse M 6/12-Breite usw.)
• Die Klasse "colpad" fügt den Spalten ein Padding analog der Gutter-Breite links und rechts hinzu
• Mit der Klasse "border-gutter" kann direkt auf dem col-span bei Grids mit Spaltenabständen eine Hintergrundfarbe definiert werden. Bei anderen Grids geht das zwar auch, aber dazu benötigt man wiederum mehr DIVs.
• Push für die Verschiebung der Spalten

Habt Ihr evtl. noch weitere Ideen, was man noch so einbauen könnte? Oder Kritik/Anregungen?

[Babelfisch]

Habt Ihr evtl. noch weitere Ideen, was man noch so einbauen könnte? Oder Kritik/Anregungen?

Da ich gerade so was brauche wären Kacheln – also quadratische Spalten, die so hoch wie breit sind – nicht schlecht. Also bspw. so, dass durch eine zusätzliche Klasse tile die Spalte immer so hoch wie breit ist.

Gruß

[folkfreund]

Falls du es hinkriegst (ich bin neulich an meinem Versuch gescheitert):

Die Elemente innerhalb einer Zeile mit gleicher Höhe augeben, abhängig vom Inhalt.

Gruß, folkfreund

[Babelfisch]

Die Elemente innerhalb einer Zeile mit gleicher Höhe augeben, abhängig vom Inhalt.

Das geht soweit ich weiß nur mit JavaScript. In meiner Erweiterung simple_columns habe ich es zumindest über ein kleines Script realisiert.

Gruß

[Nikolas]

Moderne Browser können das per http://caniuse.com/flexbox . Für die alten müsste dann aber ein JS Fallback her.

Gesendet von meinem PadFone 2 mit Tapatalk

[folkfreund]

Ich wünsche mir eben eine Lösung ohne JS.
Ich habe die Hoffnung auf eine geniale Umsetzung, vielleicht mit einem neuen/mir unbekannten CSS-Konstrukt, noch nicht aufgegeben.

folkfreund

[psren]

;-) Ab incl. IE8

http://jsfiddle.net/xsw3T/

[wulf]

Vielleicht hilft ja dieses CSS Konstrukt für Kacheln (gleiche Höhe und Breite)
http://codepen.io/anon/pen/JInCB

[folkfreund]

Na dann -
- wäre display:table-cell mein Wunsch im neuen Super-Grid.

Danke!

Aber:
Hab es auf der Beispielseite per Firebug mal versucht (1. Seite, Zeile SIX | SIX):

1. Inhalt des ersten DIV geändert auf "SIX<br/>noch<br/>mehr"
2. CSS .grid erweitert um
   display: table;
   table-layout: fixed;
3. CSS class*="col-" erweitert um
   display: table-cell;

Leider funktioniert es nicht. Was hab ich vergessen?

folkfreund

[psren]

Haste mir nen Link? width: 100% vielleicht?

[folkfreund]

Ich hab die Seite von Wisey aufgerufen
http://usschoss.ch/grid/
und dann per Firebug die genannten Änderungen temporär durchgeführt - schließlich soll das ja in seinem Grid funktionieren...

[psren]

Wenn ich das left: 50% und das margin-left der Reihe sowie das float der Zelle entferne klappt alles.
Allgemein bin ich kein Freund des float (wo doch Contao das HTML-markup schon so schön komprimiert und inline-block) dann auch kein Problem ist.

[folkfreund]

Wenn ich das left: 50% und das margin-left der Reihe sowie das float der Zelle entferne klappt alles.

Damit entfernst du die Zentrierung!
Und das Entfernen des floaf:left bringt alle Elemente durcheinander, die Höhen bleiben aber unverändert.

Irgendwas machst du anders.

Edit: Screenshot
Bildschirmfoto.png

[psren]

Mein Akku ist leer, bin am Handy. Könnt ihr das auf github stellen? Ich schaue es mir morgen gerne an.

[folkfreund]

Wisey hat sein Grid ja noch nicht veröffentlicht. Ich habe lediglich versucht, auf der Seite deinen Vorschlag nachzuvollziehen.
Auf Github kann ich nichts stellen.

Vielleicht warten wir erstmal Wiseys Version ab.

folkfreund

[Wisey]

uff, github scheint ja komplizierter zu sein, als ich dachten. Hier der Link zum Grid:
https://github.com/Mr-Wisey/wisey-grid

Hoffe, das reicht so vorerst. Muss mich da noch ein wenig in Github einarbeiten.
Dass mit der gleichen Spaltenhöhe habe ich mal mit einem anderen Ansatz eingebaut (col jeweils padding 1000% und margin -1000%, grid overflow: hidden). Konnte es aber noch nicht gross testen.

Weiter gibts noch Probleme mit den Spaltenbreiten in Safari, da dieser die Pixel abrundet (Google nach Subpixel Safari, wen's interessiert). Chrome und FF können mit Dezimalstellen umgehen. Habe aber einen Ansatz gefunden, wie man das mit Sass lösen kann. Obwohl ich mir nicht sicher bin, ob das durchgehend funktionieren wird.

Die sass-Datei muss ich dann irgendwann auch noch ein wenig aufräumen, da es noch einige Verdoppelungen drin hat.

Das mit den Kacheln (tile) kann man dann sicher auch noch einbauen.

[psren]

uff, github scheint ja komplizierter zu sein, als ich dachten. Hier der Link zum Grid:
https://github.com/Mr-Wisey/wisey-grid

Hast du die Github-App verwendet? Die ist Kindereinfach.

Das ist nicht fertig und ich werde es auch nicht fertig machen. https://github.com/psren/wisey-grid/...e-inline-block
Änderungen: https://github.com/psren/wisey-grid/...80c9ba761d4fa0

Ich nutze normal das Grid von inuit.css (Das macht es so ähnlich).
Die ganzen HTML-Änderungen brauchst du mit Contao nicht da die Markup-Kompression das schon für dich erledigt.

[Wisey]

Ja, habe die Github app... aber auch damit muss man zuerst klarkommen

Dein Ansatz kann ich leider nicht weiterverfolgen, da gerade das margin: 0 auto; etwas war, was mir bei anderen Grids nicht gefallen hat.

Schau nochmals hier meinen Ansatz an: http://usschoss.ch/grid/
Habe es auch im IE8 getestet, funktioniert soweit. Die Darstellung im Safari ist momentan aber noch fehlerhaft wegen dem Subpixel-Problem.

[psren]

Dein Ansatz kann ich leider nicht weiterverfolgen,

Musst du ja auch nicht :-) Das hat mit den gleich hohen Spalten aber auch recht wenig zu tun.

da gerade das margin: 0 auto; etwas war, was mir bei anderen Grids nicht gefallen hat.

Was hast du hier für Nachteile erkannt?

Schau nochmals hier meinen Ansatz an: http://usschoss.ch/grid/

Ja sieht gut aus.

Was mir an dem Grid von Harry Roberts gut gefällt sind die einfachen Klassen in Kombination mit den Media-Queries.

<div class="grid">
  <div class="grid__item one-half palm-one-whole"></div>
  <div class="grid__item one-half palm-one-whole"></div>
</div>

[Wisey]

Was hast du hier für Nachteile erkannt?

Die Grids mit der Klasse no-gutter und border-gutter haben links ein anderes Margin als die Gids mit Gutter. Das dient dazu, dass bereits auf dem 2. Div eine Hintergrundfarbe hinzugefügt werden kann (bei gleichmässigen Spaltenbreiten und links- resp. rechtsbündigkeit im Grid). Aber evtl. gehts bei anderen Grids auch mit 2 DIVs, habe aber noch keines gefunden.

EDIT: Sieh hier: http://usschoss.ch/grid/2divs.html

Ja sieht gut aus.

Was mir an dem Grid von Harry Roberts gut gefällt sind die einfachen Klassen in Kombination mit den Media-Queries.

<div class="grid">
  <div class="grid__item one-half palm-one-whole"></div>
  <div class="grid__item one-half palm-one-whole"></div>
</div>

Ich habe 5 Grid-Grössen eingebaut: XL, L, M, S und XS. Welches dann Palm ist etc. sollte jeder für sich selbst entscheiden. Gleiches gilt auch für die Anpassung der Spaltenbreiten, weshalb es nun so aussieht:

col-2-span-l4c-m6c-s12c-xs12c

Spaltenbreite bei Gird XL: 2 Columns
Spaltenbreite bei Gird L: 4 Columns
Spaltenbreite bei Gird M: 6 Columns
Spaltenbreite bei Gird S: 12 Columns
Spaltenbreite bei Gird XS: 12 Columns
-> So kann für jede Grid-Grösse die Spaltenbreite individuell angepasst werden.

[Wisey]

Hab da mal was gemacht bezüglich Kacheln (siehe Equal Columns heights and Tiles):
http://htmlpreview.github.io/?https:...isey-grid.html

Ist allerdings auch noch nicht fertig, einfach mal ein erster Ansatz.

[Babelfisch]

Super! Schaue ich mir nachher an.

Gruß