Content Library

Raster für Layout und Spalten

released

AIO-Wrap

Übergeordnetes Layoyutraster als Beschränkung (Wrapper) für den Inhaltsbereich

C
Inhaltsbereich für die Integration eines untergeordneten Rasters
(z.B. Sub-Grid oder Flexbox)

A = Flexible Breite, B = Abstand zum Browserrand, C = Inhaltsbreite

AIO-Grid „FULL“

16-er Layoutraster mit 12-er Teilung der Content-Breite auf derselben Ebene für assymetrische Layouts

C

C

C

C

C

C

C

C

C

C

C

C

A = Flexible Breite, B = Abstand zum Browserrand, C = Inhaltsbreite

Vordefinierte Layout-Aufteilungen

Grid
FULL
1/1 full

aio-grid spread__full ratio__1

Grid
FULL
1/2 full

aio-grid spread__full ratio__2

Grid
FULL
1/4 limited

Grid
FULL
3/4 full

aio-grid spread__full ratio__1-4

Grid
FULL
3/4 full

Grid
FULL
1/4 limited

aio-grid spread__full ratio__1-4 reversed

Grid
FULL
1/2 limited

Grid
FULL
1/2 full

aio-grid spread__full ratio__2-2

Grid
FULL
1/2 full

Grid
FULL
1/2 limited

aio-grid spread__full ratio__2-2 reversed

Grid
FULL
1/3 limited

Grid
FULL
2/3 full

aio-grid spread__full ratio__2-3

Grid
FULL
2/3 full

Grid
FULL
1/3 limited

aio-grid spread__full ratio__2-3 reversed

Freie Layout-Aufteilungen

Grid
FULL
1 limited

Grid
FULL
11 full

aio-grid spread__full • start__3--xl end__4--xl • start__4--xl end__17--xl

Grid
FULL
2 limited

Grid
FULL
10 full

aio-grid spread__full • start__3--xl end__5--xl • start__5--xl end__17--xl

Grid
FULL
3 limited

Grid
FULL
9 full

aio-grid spread__full • start__3--xl end__6--xl • start__6--xl end__17--xl

Grid
FULL
4 limited

Grid
FULL
8 full

aio-grid spread__full • start__3--xl end__7--xl • start__7--xl end__17--xl

Grid
FULL
5 limited

Grid
FULL
7 full

aio-grid spread__full • start__3--xl end__9--xl • start__9--xl end__17--xl

Grid
FULL
6 limited

Grid
FULL
6 full

aio-grid spread__full • start__3--xl end__10--xl • start__10--xl end__17--xl

Grid
FULL
7 limited

Grid
FULL
5 full

aio-grid spread__full • start__3--xl end__11--xl • start__11--xl end__17--xl

Grid
FULL
8 limited

Grid
FULL
4 full

aio-grid spread__full • start__3--xl end__11--xl • start__11--xl end__17--xl

Grid
FULL
9 limited

Grid
FULL
3 full

aio-grid spread__full • start__3--xl end__12--xl • start__12--xl end__17--xl

Grid
FULL
10 limited

Grid
FULL
2 full

aio-grid spread__full • start__3--xl end__13--xl • start__13--xl end__17--xl

Grid
FULL
11 limited

Grid
FULL
1 full

aio-grid spread__full • start__3--xl end__14--xl • start__14--xl end__17--xl

Grid
FULL
11 full

Grid
FULL
1 limited

aio-grid spread__full • start__1--xl end__14--xl • start__14--xl end__15--xl

Grid
FULL
10 full

Grid
FULL
2 limited

aio-grid spread__full • start__1--xl end__13--xl • start__13--xl end__15--xl

Grid
FULL
9 full

Grid
FULL
3 limited

aio-grid spread__full • start__1--xl end__12--xl • start__12--xl end__15--xl

Grid
FULL
8 full

Grid
FULL
4 limited

aio-grid spread__full • start__1--xl end__11--xl • start__11--xl end__15--xl

Grid
FULL
7 full

Grid
FULL
5 limited

aio-grid spread__full • start__1--xl end__10--xl • start__10--xl end__15--xl

Grid
FULL
6 full

Grid
FULL
6 limited

aio-grid spread__full • start__1--xl end__9--xl • start__9--xl end__15--xl

Grid
FULL
5 full

Grid
FULL
7 limited

aio-grid spread__full • start__1--xl end__8--xl • start__8--xl end__15--xl

Grid
FULL
4 full

Grid
FULL
8 limited

aio-grid spread__full • start__1--xl end__7--xl • start__7--xl end__15--xl

Grid
FULL
3 full

Grid
FULL
9 limited

aio-grid spread__full • start__1--xl end__6--xl • start__6--xl end__15--xl

Grid
FULL
2 full

Grid
FULL
10 limited

aio-grid spread__full • start__1--xl end__5--xl • start__5--xl end__15--xl

Grid
FULL
1 full

Grid
FULL
11 limited

aio-grid spread__full • start__1--xl end__4--xl • start__4--xl end__15--xl

AIO-Grid „BASIC“

12-er Spaltenraster – volle Breite – vordefinierte Spalten-Aufteilungen

Grid
BASIC
1/1

aio-grid spread__basic ratio__1

Grid
BASIC
1/2

aio-grid spread__basic ratio__2

Grid
BASIC
1/3

aio-grid spread__basic ratio__3

Grid
BASIC
1/4

aio-grid spread__basic ratio__4

Grid
BASIC
1/4

Grid
BASIC
3/4

aio-grid spread__basic ratio__1-4

Grid
BASIC
3/4

Grid
BASIC
1/4

aio-grid spread__basic ratio__1-4 reversed

Grid
BASIC
1/3

Grid
BASIC
2/3

aio-grid spread__basic ratio__2-3

Grid
BASIC
2/3

Grid
BASIC
1/3

aio-grid spread__basic ratio__2-3 reversed

AIO-Sub-Grid „BASIC“ eingebettet im AIO-Wrap

12-er Spaltenraster – Inhaltsbreite durch übergeordnetes Grid (Wrapper) – vordefinierte Spalten-Aufteilungen

Sub
BASIC
1/1

aio-wrap • aio-grid spread__basic ratio__1

Sub
BASIC
1/2

aio-wrap • aio-grid spread__basic ratio__2

Sub
BASIC
1/3

aio-wrap • aio-grid spread__basic ratio__3

Sub
BASIC
1/4

aio-wrap • aio-grid spread__basic ratio__4

Sub
BASIC
1/4

Sub
BASIC
3/4

aio-wrap • aio-grid spread__basic ratio__1-4

Sub
BASIC
3/4

Sub
BASIC
1/4

aio-wrap • aio-grid spread__basic ratio__1-4 reversed

Sub
BASIC
1/3

Sub
BASIC
2/3

aio-wrap • aio-grid spread__basic ratio__2-3

Sub
BASIC
2/3

Sub
BASIC
1/3

aio-wrap • aio-grid spread__basic ratio__2-3 reversed

AIO-Grid „BASIC“

12-er Spaltenraster – volle Breite – freie Spalten-Aufteilungen

Grid
BASIC
1

Grid
BASIC
11

aio-grid spread__basic • col__1--xl • col__11--xl

Grid
BASIC
2

Grid
BASIC
10

aio-grid spread__basic • col__2--xl • col__10--xl

Grid
BASIC
3

Grid
BASIC
9

aio-grid spread__basic • col__3--xl • col__9--xl

Grid
BASIC
4

Grid
BASIC
8

aio-grid spread__basic • col__4--xl • col__8--xl

Grid
BASIC
5

Grid
BASIC
7

aio-grid spread__basic • col__5--xl • col__7--xl

Grid
BASIC
6

aio-grid spread__basic • col__6--xl • col__6--xl

Grid
BASIC
7

Grid
BASIC
5

aio-grid spread__basic • col__7--xl • col__5--xl

Grid
BASIC
8

Grid
BASIC
4

aio-grid spread__basic • col__8--xl • col__4--xl

Grid
BASIC
9

Grid
BASIC
3

aio-grid spread__basic • col__9--xl • col__3--xl

Grid
BASIC
10

Grid
BASIC
2

aio-grid spread__basic • col__10--xl • col__2--xl

Grid
BASIC
11

Grid
BASIC
1

aio-grid spread__basic • col__11--xl • col__1--xl

AIO-Sub-Grid „BASIC“ eingebettet im AIO-Wrap

12-er Spaltenraster – Inhaltsbreite durch übergeordnetes Grid (Wrapper) – freie Spalten-Aufteilungen

Sub
BASIC
1

Sub
BASIC
11

aio-grid spread__basic • col__1--xl • col__11--xl

Sub
BASIC
2

Sub
BASIC
10

aio-grid spread__basic • col__2--xl • col__10--xl

Sub
BASIC
3

Sub
BASIC
9

aio-grid spread__basic • col__3--xl • col__9--xl

Sub
BASIC
4

Sub
BASIC
8

aio-grid spread__basic • col__4--xl • col__8--xl

Sub
BASIC
5

Sub
BASIC
7

aio-grid spread__basic • col__5--xl • col__7--xl

Sub
BASIC
6

aio-grid spread__basic • col__6--xl • col__6--xl

Sub
BASIC
7

Sub
BASIC
5

aio-grid spread__basic • col__7--xl • col__5--xl

Sub
BASIC
8

Sub
BASIC
4

aio-grid spread__basic • col__8--xl • col__4--xl

Sub
BASIC
9

Sub
BASIC
3

aio-grid spread__basic • col__9--xl • col__3--xl

Sub
BASIC
10

Sub
BASIC
2

aio-grid spread__basic • col__10--xl • col__2--xl

Sub
BASIC
11

Sub
BASIC
1

aio-grid spread__basic • col__11--xl • col__1--xl

Beispiel: Ausgleich der Abschlusskanten bei Verwendung von AIO-Grid „FULL“ (Layout) in Kombination mit AIO-Sub-Grid „BASIC“ im AIO-Wrap (Spalten mit Abstand)

Grid
FULL
1/4 limited

Grid
FULL
3/4 full

aio-grid spread__full ratio__1-4

Sub
BASIC
1/4

aio-wrap • aio-grid spread__basic ratio__4

Grid
FULL
1/4 limited

Grid
FULL
3/4 full

aio-grid spread__full ratio__1-4 • gap--x

Sub
BASIC
1/4

aio-wrap • aio-grid spread__basic ratio__4 no-gap--x • gap--x

AIO-Flex im AIO-Wrap

12-er Spaltenraster – Inhaltsbreite durch übergeordnetes Grid (Wrapper) – vordefinierte Spalten-Aufteilungen im Flexbox-Modell

Flex
1/1

aio-wrap • aio-grid • aio-flex flex__container flow__wrap ratio__1 flex__indent--x flex__indent--y • gap--x gap--y

Flex
1/2

aio-wrap • aio-grid • aio-flex flex__container flow__wrap ratio__2 flex__indent--x flex__indent--y • gap--x gap--y

Flex
1/3

aio-wrap • aio-grid • aio-flex flex__container flow__wrap ratio__3 flex__indent--x flex__indent--y • gap--x gap--y

Flex
1/4

aio-wrap • aio-grid • aio-flex flex__container flow__wrap ratio__4 flex__indent--x flex__indent--y • gap--x gap--y

Flex
1/4

Flex
3/4

aio-wrap • aio-grid • aio-flex flex__container flow__wrap ratio__1-4 flex__indent--x flex__indent--y • gap--x gap--y

Flex
3/4

Flex
1/4

aio-wrap • aio-grid • aio-flex flex__container flow__wrap ratio__1-4 reversed flex__indent--x flex__indent--y • gap--x gap--y

Flex
1/3

Flex
2/3

aio-wrap • aio-grid • aio-flex flex__container flow__wrap ratio__2-3 flex__indent--x flex__indent--y • gap--x gap--y

Flex
2/3

Flex
1/3

aio-wrap • aio-grid • aio-flex flex__container flow__wrap ratio__2-3 reversed flex__indent--x flex__indent--y • gap--x gap--y

AIO-Flex im AIO-Wrap

12-er Spaltenraster – Inhaltsbreite durch übergeordnetes Grid (Wrapper) – freies Spaltenlayout im Flexbox-Modell

Flex
1/1

aio-wrap aio-grid • aio-flex flex__container flow__wrap flex__indent--x flex__indent--y • col__1--xl • gap--x gap--y

Flex
1/2

aio-wrap aio-grid • aio-flex flex__container flow__wrap flex__indent--x flex__indent--y • col__2--xl • gap--x gap--y

Flex
1/3

aio-wrap aio-grid • aio-flex flex__container flow__wrap flex__indent--x flex__indent--y • col__3--xl • gap--x gap--y

Flex
1/4

aio-wrap aio-grid • aio-flex flex__container flow__wrap flex__indent--x flex__indent--y • col__4--xl • gap--x gap--y

Flex
1/5

aio-wrap aio-grid • aio-flex flex__container flow__wrap flex__indent--x flex__indent--y • col__5--xl • gap--x gap--y

Flex
1/6

aio-wrap aio-grid • aio-flex flex__container flow__wrap flex__indent--x flex__indent--y • col__6--xl • gap--x gap--y

Flex
1/7

aio-wrap aio-grid • aio-flex flex__container flow__wrap flex__indent--x flex__indent--y • col__7--xl • gap--x gap--y

Flex
1/8

aio-wrap aio-grid • aio-flex flex__container flow__wrap flex__indent--x flex__indent--y • col__8--xl • gap--x gap--y

Flex
1/9

aio-wrap aio-grid • aio-flex flex__container flow__wrap flex__indent--x flex__indent--y • col__9--xl • gap--x gap--y

Flex
1/10

aio-wrap aio-grid • aio-flex flex__container flow__wrap flex__indent--x flex__indent--y • col__10--xl • gap--x gap--y

Flex
1/11

aio-wrap aio-grid • aio-flex flex__container flow__wrap flex__indent--x flex__indent--y • col__11--xl • gap--x gap--y

Flex
1/12

aio-wrap aio-grid • aio-flex flex__container flow__wrap flex__indent--x flex__indent--y • col__12--xl • gap--x gap--y

Name	Beschreibung
bypass	Dieses Cookie wird für den Wartungsmodus verwendet. Anbieter - Typ Cookie Laufzeit 1 Jahr
PHPSESSID	Dieses Cookie ist für PHP-Anwendungen. Das Cookie wird verwendet um die eindeutige Session-ID eines Benutzers zu speichern und zu identifizieren um die Benutzersitzung auf der Website zu verwalten. Das Cookie ist ein Session-Cookie und wird gelöscht, wenn alle Browser-Fenster geschlossen werden. Anbieter - Typ Cookie Laufzeit Session

Name	Beschreibung
_ga	Dieses Cookie wird von Google Analytics installiert. Dieses Cookie wird verwendet um Besucher-, Sitzungs- und Kampagnendaten zu berechnen und die Nutzung der Website für einen Analysebericht zu erfassen. Die Cookies speichern diese Informationen anonym und weisen eine zufällig generierte Nummer Besuchern zu um sie eindeutig zu identifizieren. Anbieter Google Inc. Typ Cookie Laufzeit 2 Jahre
_gid	Dieses Cookie wird von Google Analytics installiert. Das Cookie wird verwendet, um Informationen darüber zu speichern, wie Besucher eine Website nutzen und hilft bei der Erstellung eines Analyseberichts über den Zustand der Website. Die gesammelten Daten umfassen in anonymisierter Form die Anzahl der Besucher, die Website von der sie gekommen sind und die besuchten Seiten. Anbieter Google Inc. Typ Cookie Laufzeit 24 Stunden

Name	Beschreibung
NID	Google verwendet Cookies wie das NID-Cookie, um Werbung in Google-Produkten wie der Google-Suche individuell anzupassen. Anbieter Google Inc. Typ Cookie Laufzeit 24 Stunden
SID	Google verwendet Cookies wie das SID-Cookie, um Werbung in Google-Produkten wie der Google-Suche individuell anzupassen. Anbieter Google Inc. Typ Cookie Laufzeit 24 Stunden