Wie Sie linken und rechten Auffüllen zu Containern in Susy 2.0 hinzufügen

Question

Ich benutze Susy 2.0. Ich baue eine Website fester Breite (die in einer späteren Phase reagieren wird). Ich denke jedoch, meine Frage gilt, wenn Susy als statisch oder flüssig verwendet wird.

Hier sind meine globalen Einstellungen:

$susy: (
container: auto, 
columns: 12, 
column-width: 62px, 
math: static, 
gutters: 1/3, 
); 

ich nach dem Susy 2.0 docs in Bezug auf statische Seiten, wir Container Auto sein gesetzt haben und ich lasse die Spaltenbreite Einstellungen die Breite diktieren meiner Containerelemente.

Ich möchte ein bisschen links und rechts padding Container anzuwenden, so nur, dass es ein wenig Luft zum Atmen auf jeder Seite, wenn das Ansichtsfenster auf mobilen verengt usw.

Was ist der beste Weg, Dies tun? Wenn ich einfach padding-left und padding-right (in einfachem CSS) auf mein Container-Element anwende, bricht das Raster. Der Container ist nicht mehr breit genug, um Susys Spaltenbreitenberechnungen zu enthalten.

Ich habe 'Box-Sizing' universell in meinem CSS auf 'Border-Box' eingestellt. Wenn ich dies auf meinem Container-Element mit 'content-box' überschreibe, verhält sich das Grid korrekt. Ich hätte eigentlich das Gegenteil erwartet?

Ist die Lösung zu "Box-Sizing: Content-Box" auf meine Container-Elemente anwenden? Oder gibt es eine Einstellung in Susy, die ich anwenden kann, dass ich vermisse? Ich habe das Gefühl, dass es wahrscheinlich ist. Ich würde Susy lieber alle Gitterberechnungen behandeln lassen, wenn möglich.

Meine Frage gilt auch für responsive/Fluid-Design, wie ich immer noch das gleiche Problem habe, auch wenn ich dem Container eine bestimmte Breite festlegen und die Spaltenbreite und die mathematischen Einstellungen entfernen.

Answer 1

Im Moment ist es am besten, content-box auf den Container zu setzen und Ihr eigenes Padding hinzuzufügen. Während border-box für die meisten Dinge sinnvoller ist, gibt es Zeiten, in denen content-box Sinn macht, und meiner Meinung nach ist dies ein großartiges Beispiel. Es funktioniert, weil Susy die Containerbreite einstellt, und Ihr Padding addiert dazu, anstatt subtrahiert zu werden, was bedeutet, dass Sie immer noch den Platz haben, den Sie für das Raster benötigen.

Ich wäre bereit, eine Art von grid-padding Feature wieder in Betracht ziehen, aber in Susy 1 schien es mehr Probleme verursacht als es gelöst hat. Ich muss besser nachdenken, wie wir es machen könnten. Wenn du Ideen hast, bin ich immer interessiert!

Answer 2

Für Raster-Paddings mache ich normalerweise so etwas. Funktioniert prima und es gibt keine Notwendigkeit für weitere Komplikation :)

.container { 
    @include container($susy); 
    padding-left: 15px; 
    padding-right: 15px; 
} 

Answer 3

In der Regel müssen Sie das Stichwort „statisch“ in den Behälter hinzuzufügen, die eine statische Website gibt, aber Sie müssen die „Mathematik gehören: Flüssigkeit "zu den Einstellungen, um Ihnen eine Website basierend auf Prozentsätzen zu geben. Andernfalls, wie Sie in Ihrer Frage erwähnt haben, ist der "Container nicht mehr breit genug, um Susys Spaltenbreitenberechnungen zu enthalten".

Susy Einstellungen

Sie können immer noch eine Website, basierend auf border-Box. Fügen Sie den Einstellungen global-box-sizing: border-box hinzu. Sie müssen auch "math: static" in "math: fluid" ändern, so dass alle Ihre Einheiten in Prozent angegeben sind.

Border Box einschließen

hinzufügen "@include border-box-Sizing"; außerhalb der @ suzy-Einstellungen. Sie müssen möglicherweise einen Kompass mit "@import" Kompass ";"

Container

Sie müssen "statisch" als Parameter enthalten. Der Container übernimmt einen "Layout" -Parameter (http://susydocs.oddbird.net/en/latest/toolkit/#container). Die Variable "Layout" besteht aus Schlüsselwörtern (http://susydocs.oddbird.net/en/latest/shorthand/#shorthand-layout). Die "Schlüsselwörter" enthalten "statisch" (http://susydocs.oddbird.net/en/latest/shorthand/#term-keywords).

Voll Beispiel

$susy: (
container: auto, 
columns: 12, 
column-width: 62px, 
math: fluid, 
global-box-sizing: border-box, 
gutters: 1/3 
); 

@include border-box-sizing; 

.container { 
    @include container(static); 
    padding: 1%; 
} 

Padding kann nun, ohne die Website zu dem Behälter oder jedes anderen Elemente hinzugefügt werden.

Answer 4

Wenn Sie einen Rand im gleichen Modus (relativ oder fest) wie die Containerbreite selbst hinzufügen möchten, können Sie die Breite Ihres Containers reduzieren und margin: 0 auto verwenden, um ihn im übergeordneten Element zu zentrieren.

Wie diese für eine 5% Polsterung auf jeder Seite:

.my-container { 
    @include container(90%); 
    margin: 0 auto; 
} 

Wenn Susy würde CSS-Funktionen als Containerbreite unterstützen, Sie wären in der Lage, eine feste Anzahl von Pixeln sogar mit einer relativen Behälterbreite zu verwenden, , so für 10px auf jeder Seite:

.my-container { 
    @include container(calc(100% - 20px)); 
    margin: 0 auto: 
} 

Leider funktioniert das nicht. Wenn Sie einen Wrapperdiv um Ihren Container hinzufügen können, können Sie natürlich die Breite und den Rand dort festlegen und container(100%) verwenden.