Breiten und Höhen - hier am Beispiel des CE: textmedia
Für die Breitenangaben im 12er-Grid-Foundation-Format nutzen wir Utility-Klassen, die ab 1024px greifen. Sie sind global definiert und für fast jedes Element nutzbar:
Mögliche Breiten:
.wlarge-auto
: Width set to auto..wlarge-1
: Width is ~8.33%..wlarge-2
: Width is ~16.67%..wlarge-3
: Width is ~25%..wlarge-4
: Width is ~33.33%..wlarge-5
: Width is ~41.67%..wlarge-6
: Width is ~50%..wlarge-7
: Width is ~58.33%..wlarge-8
: Width is ~66.67%..wlarge-9
: Width is ~75%..wlarge-10
: Width is ~83.33%..wlarge-11
: Width is ~91.67%..wlarge-12
: Full width (100%).
Helper für Abstände (margin):
.right-auto
: Automatically sets right margin; left margin unset..left-auto
: Automatically sets left margin; right margin unset..margin-auto
: Automatically sets left and right margin..ml1c
: Linker Abstand:var(--margin-left-1col)
.ml2c
: Linker Abstand:var(--margin-left-2col)
.ml3c
: Linker Abstand:var(--margin-left-3col)
.ml4c
: Linker Abstand:var(--margin-left-4col)
.ml5c
: Linker Abstand:var(--margin-left-5col)
.ml6c
: Linker Abstand:var(--margin-left-6col)
.mr1c
: Rechter Abstand:var(--margin-left-1col)
.mr2c
: Rechter Abstand:var(--margin-left-2col)
.mr3c
: Rechter Abstand:var(--margin-left-3col)
.mr4c
: Rechter Abstand:var(--margin-left-4col)
.mr5c
: Rechter Abstand:var(--margin-left-5col)
.mr6c
: Rechter Abstand:var(--margin-left-6col)
header
Quisque malesuada placerat nisl. Aenean massa. Cras id dui. Cras ultricies mi eu turpis hendrerit fringilla. Quisque ut nisi.
Phasellus magna. Phasellus viverra nulla ut metus varius laoreet. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Sed in libero ut nibh placerat accumsan.
Nulla consequat massa quis enim. Curabitur vestibulum aliquam leo. Ut non enim eleifend felis pretium feugiat. Vivamus laoreet. Fusce a quam.