Erledigt - Grid System - Frage zur Berechnung und LESS?

patrick_l · 22.06.2015

Hi allerseits,

ich nutze seit geraumer Zeit ein eigenes 12 Kolumnen Grid. Schreibe das ganze gerade mit LESS um und will dieses um 16 und 24 Kolumnen erweitern. Nur gerade eine kleine Denkblockade. Daher kurz hier nachhake, ob meine Berechnung so korrekt ist.

Den einzelnen Kolumnen wird ein margin-left von 1.6% gegeben. Mit der Pseudo-Klasse first-child wird beim ersten das ganze wieder auf Null gesetzt. Beim 12 Kolumnen Grid also die 1,6 mit 11 multipliziere und von denn 100% abziehe.

1. 11 x 1,6% = 17,6%
2. 100% - 17,6% = 82,4%

Somit ja nur noch die Kolumnen ohne die Zwischenräume von jeweils 1,6% übrig bleiben. Jetzt kann ich doch einfach per Dreisatz die einzelnen Kolumnen berechnen. 82,4% dividiert durch 12 (Kolumnen) und multipliziert mit dem gewünschten Wert (Anzahl der Kolumnen). Wie gesagt, stehe etwas auf dem Schlauch. :confused:

So, die zweite Sache wäre folgende: Wie gruppiere ich die einzelnen Werte am besten in LESS. Mir geht es darum, das lediglich in einer Zeile die Anzahl der Kolumnen definiert werden soll. Wenn also 12 eingetragen wird, soll die entsprechende Gruppe verwenden (compiliert) werden. Wird der Wert auf 16 oder 24 gesetzt, eben diese genutzt wird.

Liebe Grüße, Patrick

_schatzi_ · 22.06.2015

Hallo!

patrick_l schrieb:
Jetzt kann ich doch einfach per Dreisatz die einzelnen Kolumnen berechnen. 82,4% dividiert durch 12 (Kolumnen) und multipliziert mit dem gewünschten Wert (Anzahl der Kolumnen). Wie gesagt, stehe etwas auf dem Schlauch.

Aber wenn du auf 16 oder 24 Spalten erhöhst, dann erhöht sich doch auch die Anzahl der Margins auf 15 bzw. 23.

Ich kenne mich mit LESS zwar nicht wirklich aus, aber mal als beispielhafter Ansatz:
Ich plane mit insgesamt 80% für Inhalt und entsprechend 20% für Margins.
Dann gilt

Spaltenbreite = 80% / Spaltenanzahl
Marginbreite = 20% / (Spaltenanzahl - 1)

patrick_l · 22.06.2015

_schatzi_ schrieb:
Aber wenn du auf 16 oder 24 Spalten erhöhst, dann erhöht sich doch auch die Anzahl der Margins auf 15 bzw. 23.

Ja, ist ja auch richtig. Bei 16 Kolumnen hätte ich dann 24% und beim 24 Kolumnen Grid ein Gutter von 36,8%. So soll ("muss") es auch sein. Mir geht es jetzt nur um meine Rechnung, ob die so stimmt. Also die Zwischenräume von der höchsten Kolumne abziehen, durch sich dividieren (auf 1 runter) und dann mit der gewünschte Anzahl multipliziert.

Liebe Grüße, Patrick

_schatzi_ · 22.06.2015

patrick_l schrieb:
Mir geht es jetzt nur um meine Rechnung, ob die so stimmt.

Nein, tut sie nicht!
Denn wenn du 24% oder 36,8% an Margins hast, dann hast du keine 82,4% mehr für Inhalt.
Wenn die 1,6% konstant bleiben sollen, dann

Spaltenbreite = (100% - 1,6% * (Spaltenzahl - 1)) / Spaltenzahl

patrick_l · 23.06.2015

_schatzi_ schrieb:
Denn wenn du 24% oder 36,8% an Margins hast, dann hast du keine 82,4% mehr für Inhalt.
Wenn die 1,6% konstant bleiben sollen, dann

Ich glaube du hast mich falsch verstanden. Das ich bei mehr Kolumnen nicht mehr auf 82,5% für den Content komme, sollte klar sein. Ist ja von der Anzahl der Kolumnen abhängig.

Der Zwischenraum (Gutter) soll je 1,6% (circa 20 Pixel) haben. Links sowie rechts außen ist der Abstand gleich Null. Also kein margin. Daher auch die angesprochene Pseudo-Klasse first-child (margin-left:0; ). Bei 11 Kolumnen hätte ich dann insgesamt 10 Zwischenräume á 1,6% Breite. Bei 15 Kolumnen 14x á 1,6% sowie bei 23 Kolumnen 22x á 1,6% Zwischenräume.

_schatzi_ schrieb:
Spaltenbreite = (100% - 1,6% * (Spaltenzahl - 1)) / Spaltenzahl

Sorry wenn ich da nachhaken muss. Kann deine Rechnung nicht ganz nachvollziehen. Könntest du es nochmal etwas verdeutlichen. An dieser Stelle auch schon mal ein dickes Dankeschön an dich.

Liebe Grüße, Patrick

_schatzi_ · 23.06.2015

Hallo!

patrick_l schrieb:
Ich glaube du hast mich falsch verstanden.

Glaube ich jetzt auch!

So wie es aussieht, haben wir beide von Anfang an dasselbe gemeint.

Meine Formel macht genau das, was du vorher mit Worten bechrieben hast:

16 Spalten:
Spaltenbreite = (100% - 1,6% * (16 - 1)) / 16 = 4,75%

24 Spalten:
Spaltenbreite = (100% - 1,6% * (24 - 1)) / 24 = 2,6333%

patrick_l · 23.06.2015

_schatzi_ schrieb:
Glaube ich jetzt auch!
So wie es aussieht, haben wir beide von Anfang an dasselbe gemeint.

Dann bin ich ja beruhigt.

Ich war schon am grübeln, was denn nun an deiner Rechnung anders sei. Dann ist ja doch alles richtig. Wenn sonst jemand noch Einwürfe haben sollte, nur her damit.

Nun zu LESS. Ich benötigte eigentlich eine "if or else" Anweisung. Somit mir ja nur "guarded mixins" und das Schlüsselwort "when" übrig bleibt. Soweit eigentlich auch verständlich. Nur weiß ich nicht so recht, wie ich das mit den einzelnen Operatoren richtig verschachtel.

Wenn also jemand diesbezüglich weiterweis, seien es freie Quellen im Netz oder weiterführende Fachlektüre, bitte her damit.

Liebe Grüße, Patrick

afr0kalypse · 25.06.2015

hi patrick_l. ich verstehe deine 2. frage nicht ganz. was genau willst du denn gruppieren bzw warum willst du das tun? kannst du das etwas konkreter erklären?
Vielleicht hilft aber auch schon das hier...

Code:

@spaltenanzahl: 12;
@abstand: 1.6%;
@spaltenbreite: (100% - (@abstand * (@spaltenanzahl - 1))) / @spaltenanzahl;

.generate-columns(@spaltenanzahl);

.generate-columns(@n, @i: 1) when (@i =< @n) {
   .col-@{i} {
     display: block;
     height: 50px;
     width: (100% - (@abstand * (@i - 1))) / @i;
     background: red;
   }
   .col-@{i} + .col-@{i} {
     .erzeugeAbstand(@a) when (@i > 1) {
       margin-left: @a;
     }
     .erzeugeAbstand(@abstand);
   }
   .generate-columns(@n, (@i + 1));
}

patrick_l · 25.06.2015

afr0kalypse schrieb:
was genau willst du denn gruppieren bzw warum willst du das tun? kannst du das etwas konkreter erklären?

Ich habe drei Gruppen von Klassen. Einmal für das 12, 16 und 24 Kolumnen Grid. Wenn jetzt der Wert auf 12 gesetzt wird, sollen die Formatierungen für 12 Kolumnen verwendet werden.

CSS:

/*
wird hier der Wert geändert, werden die Klassen
des jeweiligen Grids genutzt.
*/
@grid: 12; /* 12, 16 oder 24 */

.grid-12 {
     {
         ...
     }
}

.grid-16 {
     {
         ...
     }
}

Ich hoffe so verständlicher. Habe gleich einen Termin. Muss jetzt also, melde mich später zurück.

Liebe Grüße, Patrick

afr0kalypse · 25.06.2015

Hi patrick_l. Schau mal in den bearbeiteten Post von mir. Testen kannst du das mit

HTML:

<div class="clr">
   <div class="col-12"></div>
   <div class="col-12"></div>
   <div class="col-12"></div>
   <div class="col-12"></div>
   <div class="col-12"></div>
   <div class="col-12"></div>
   <div class="col-12"></div>
   <div class="col-12"></div>
   <div class="col-12"></div>
   <div class="col-12"></div>
   <div class="col-12"></div>
   <div class="col-12"></div>

   <div class="col-11"></div>
   <div class="col-11"></div>
   <div class="col-11"></div>
   <div class="col-11"></div>
   <div class="col-11"></div>
   <div class="col-11"></div>
   <div class="col-11"></div>
   <div class="col-11"></div>
   <div class="col-11"></div>
   <div class="col-11"></div>
   <div class="col-11"></div>

   <div class="col-10"></div>
   <div class="col-10"></div>
   <div class="col-10"></div>
   <div class="col-10"></div>
   <div class="col-10"></div>
   <div class="col-10"></div>
   <div class="col-10"></div>
   <div class="col-10"></div>
   <div class="col-10"></div>
   <div class="col-10"></div>

   <div class="col-9"></div>
   <div class="col-9"></div>
   <div class="col-9"></div>
   <div class="col-9"></div>
   <div class="col-9"></div>
   <div class="col-9"></div>
   <div class="col-9"></div>
   <div class="col-9"></div>
   <div class="col-9"></div>

   <div class="col-8"></div>
   <div class="col-8"></div>
   <div class="col-8"></div>
   <div class="col-8"></div>
   <div class="col-8"></div>
   <div class="col-8"></div>
   <div class="col-8"></div>
   <div class="col-8"></div>

   <div class="col-7"></div>
   <div class="col-7"></div>
   <div class="col-7"></div>
   <div class="col-7"></div>
   <div class="col-7"></div>
   <div class="col-7"></div>
   <div class="col-7"></div>

   <div class="col-6"></div>
   <div class="col-6"></div>
   <div class="col-6"></div>
   <div class="col-6"></div>
   <div class="col-6"></div>
   <div class="col-6"></div>

   <div class="col-5"></div>
   <div class="col-5"></div>
   <div class="col-5"></div>
   <div class="col-5"></div>
   <div class="col-5"></div>

   <div class="col-4"></div>
   <div class="col-4"></div>
   <div class="col-4"></div>
   <div class="col-4"></div>

   <div class="col-3"></div>
   <div class="col-3"></div>
   <div class="col-3"></div>

   <div class="col-2"></div>
   <div class="col-2"></div>

   <div class="col-1"></div>
</div>

patrick_l · 26.06.2015

Hi Alex (@afr0kalypse ),

so langsam komm ich der Sache näher.

Die Berechnung ist soweit eigentlich klar. Bei den Variablen jedoch etwas ins straucheln komme. Hauptsächlich bei @n und @i. Wäre super wenn du das kurz erläutern könntest.

Edit:
Wenn ich dein Beispiel jetzt so adaptiere, müsste es ja wie folgt aufgebaut sein.

CSS:

// Variables
@container: 1140px;
@columns: 12;
@gutter: 1.6%;
@row: (100% - (@gutters * (@columns - 1))) / @columns;

// Mixins
.container (@container) {
    max-width: @container;
    margin: 0 auto;
}
.generate-columns (@columns);
.generate-columns (@n, @i: 1) when (@i =< @n) {
    .col-@{i} {
        width: (100% - (@gutter * (@i - 1))) / @i;
    }
    .col-@{i} + .col-@{i} {
        .gutters(@a) when (@i > 1) {
            margin-left: @a;
        }
        .gutters (@gutter);
    }
    .generate-columns (@n, (@i + 1));
}

Liebe Grüße, Patrick

afr0kalypse · 29.06.2015

patrick_l schrieb:
Hauptsächlich bei @n und @i. Wäre super wenn du das kurz erläutern könntest.

Die Funktion .generate-columns (@n, @i: 1) nimmt 2 Parameter entgegen.
@n ist die Anzahl der Spalten, die du mit @columns übergibst.
@i ist ein optionaler Parameter, der den Standardwert 1 hat und die jeweils mögliche Spaltengröße generiert. Dies wird durch einen .col-@{i} Selektor gemacht. Dabei wird @i iteriert von 1-n, sodass du für jede Spaltenvariante einen Selektor mit entsprechender Breite hast. (col-1 = 1/12 Breite, col-2 = 2/12 ...)

Ich hoffe das war verständlich

patrick_l · 29.06.2015

afr0kalypse schrieb:
Ich hoffe das war verständlich

Ja, das war es. Wie gesagt, den Rest schon kapiert, nur mit dem optionalen Paramenter nichts anfangen konnte. Fettes Dankeschön an dich.

Liebe Grüße, Patrick