mirror of
https://github.com/TheTaz25/denis.ergin.git
synced 2025-07-06 21:28:47 +00:00
feat(slides): add slides for grid-systems
This commit is contained in:
Denis Ergin
parent
48333ff207
commit
29a31fbc50
10 changed files with 1551 additions and 0 deletions
39
src/components/slides/css-layout/block.astro
Normal file
39
src/components/slides/css-layout/block.astro
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<section>
|
||||
<section>
|
||||
<h2>Display - Block (Flow)</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
// "ältere" Schreibweise
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// "modernere" Schreibweise
|
||||
.block {
|
||||
display: block flow;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Block-Flow-Verhalten</h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<ul>
|
||||
<li>Nimmt die gesamte Verfügbare Breite ein</li>
|
||||
<li>Inhalt davor und danach wird darüber und darunter platziert</li>
|
||||
<li>Innerer Inhalte folgt "Standardverhalten". Wie man normalen Textfluss gewohnt ist (DE: Left-To-Right, Top-To-Bottom)</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="apply-styles inline" style="background-color: lightgrey;">
|
||||
Hier steht etwas Text davor;
|
||||
<div style="background-color: hotpink;">Dann kommt ein block-flow span;</div>
|
||||
Und dann kommt noch etwas Text danach
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
63
src/components/slides/css-layout/box-model.astro
Normal file
63
src/components/slides/css-layout/box-model.astro
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<section>
|
||||
<section>
|
||||
<h2>Das Box-Model</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>
|
||||
Aus CSS-Perspektive ist jedes (HTML)-Element eine Box. Es gibt verschiedene Box-Modelle die sich am Ende jeweils in 2 Kategorien eingliedern lassen:
|
||||
<br>
|
||||
Die <code>block-box</code> und die <code>inline-box</code>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Eine Block-Box ist dadurch gekennzeichnet, dass sie die volle Verfügbare Breite auf dem Viewport einnimmt. Beispiele hierfür sind:</p>
|
||||
<ul>
|
||||
<li>div</li>
|
||||
<li>p</li>
|
||||
<li>h1-h6</li>
|
||||
<li>und weitere...</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Inline-Boxen verhalten sich "gegensätzlich". Inline-Boxen nehmen nur den Platz ein, den der Inhalt braucht. Beispiele sind:</p>
|
||||
<ul>
|
||||
<li>span</li>
|
||||
<li>strong / b</li>
|
||||
<li>em / i</li>
|
||||
<li>und weitere...</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Mittels CSS kann man das (Standard)-Verhalten ändern. Mehr dazu in kürze.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Eine Box in CSS besteht aus mehreren Teilen, die ineinander verschachtelt sind.</p>
|
||||
<p>Wir haben auch bereits alle Teile kennen gelernt:</p>
|
||||
</section>
|
||||
|
||||
<section class="apply-styles four">
|
||||
<div class="margin flex-center">
|
||||
<span class="label">Margin</span>
|
||||
<div class="border flex-center">
|
||||
<span class="label">Border</span>
|
||||
<div class="padding flex-center">
|
||||
<span class="label">Padding</span>
|
||||
<div class="content">
|
||||
Inhalt!
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Im Standard-Box-Model, nimmt eine Box die Summe aus margin + border + padding + content-size ein.</p>
|
||||
<p>content-size ist die Breite und Höhe, die der eigentliche Inhalt einnimmt.</p>
|
||||
<p>Es gibt ein alternatives Model, dieses rechnet padding und border zu einer Angegebenen Breite / Höhe mit ein.</p>
|
||||
</section>
|
||||
</section>
|
||||
18
src/components/slides/css-layout/flex-demo.astro
Normal file
18
src/components/slides/css-layout/flex-demo.astro
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
interface Props {
|
||||
wrapper: string;
|
||||
container: string;
|
||||
children: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
const { wrapper, container, children, count } = Astro.props;
|
||||
---
|
||||
|
||||
<div class={wrapper}>
|
||||
<div class={container}>
|
||||
{ Array(count).fill(0).map((_, index) => (
|
||||
<div class={children}>Container {index + 1}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
583
src/components/slides/css-layout/flex.astro
Normal file
583
src/components/slides/css-layout/flex.astro
Normal file
|
|
@ -0,0 +1,583 @@
|
|||
---
|
||||
import FlexDemo from './flex-demo.astro';
|
||||
---
|
||||
|
||||
<section>
|
||||
<section>
|
||||
<h2>Display - Flex</h2>
|
||||
<p>Inneres Layout mittels Flexboxen</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>
|
||||
<code>inline</code> und <code>block</code> haben bisher für die Interaktion mit Benachbarten Inhalten (Siblings) geregelt.
|
||||
<br>
|
||||
Nun wollen wir uns mit dem "inneren" display befassen. Die inneren Display-Regeln sorgen für eine Strukturierung der Kind-Elemente innerhalb eines Layout-Containers.
|
||||
</p>
|
||||
<p>Dabei kann der Layout-Container nach außen hin ein inline oder block Element sein</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
// Explizites Inline-Verhalten
|
||||
.inline-flex {
|
||||
display: inline flex;
|
||||
}
|
||||
|
||||
// Explizites Block-Verhalten
|
||||
.block-flex {
|
||||
display: block flex;
|
||||
}
|
||||
|
||||
// Implizites Verhalten ist BLOCK
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Flexbox-Container lassen die direkten Kinder in ein Flexbox-Layout</p>
|
||||
<p>Mithilfe weiterer Regeln lässt sich das Verhalten der Kind-Elemente beeinflussen</p>
|
||||
<p>Zusätzlich können die Kinder mit ein paar CSS-Regeln positioniert und strukturiert werden.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Flex-Container CSS-Regeln</h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="html"><code data-trim data-line-numbers>
|
||||
<div class="parent">
|
||||
<div class="child">Erstes Kind</div>
|
||||
<div class="child">Zweites Kind</div>
|
||||
<div class="child">Drittes Kind</div>
|
||||
</div>
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="apply-styles flexbox">
|
||||
<p>Ungestyltes Verhalten</p>
|
||||
<div>
|
||||
<div class="child">Erstes Kind</div>
|
||||
<div class="child">Zweites Kind</div>
|
||||
<div class="child">Drittes Kind</div>
|
||||
</div>
|
||||
<br>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.child {
|
||||
background-color: aquamarine;
|
||||
border: 2px solid black;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.parent {
|
||||
display: flex;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="apply-styles flexbox">
|
||||
<p>Gestyles Verhalten</p>
|
||||
<div class="flex">
|
||||
<div class="child">Erstes Kind</div>
|
||||
<div class="child">Zweites Kind</div>
|
||||
<div class="child">Drittes Kind</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>"Zu viele" Kinder</p>
|
||||
<FlexDemo wrapper="apply-styles flexbox" container="flex" children="child" count={9} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Ohne weiteres Styling, zwingt CSS alle Kind-Container in eine Zeile</p>
|
||||
<p>Manchmal ist dass nicht das, was wir "wollen". Aber dagegen lässt sich etwas unternehmen:</p>
|
||||
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
// Wir fügen diese Klasse dem Parent-Element hinzu
|
||||
.wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Viele Kinder - Mit Wrap</p>
|
||||
<FlexDemo wrapper="apply-styles flexbox" container="flex wrap" children="child" count={9} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Und wenn wir jetzt den Kinden noch ein wenig Style mitgeben:</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
// Wir fügen die "uniform" Klasse jedem Kind hinzu
|
||||
// Jedes Kind nimmt ein drittel der Parent-Breite ein.
|
||||
.child.uniform {
|
||||
width: calc(1/3 * 100%);
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Viele Kinder - Mit Wrap</p>
|
||||
<FlexDemo
|
||||
wrapper="apply-styles flexbox"
|
||||
container="flex wrap"
|
||||
children="child uniform"
|
||||
count={9}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Warte... Jedes Element sollte 33% Breit sein, also sollten eigentlich in jeder Zeile 3 Kinder sein?</p>
|
||||
<p>Stimmt auch, aber CSS berechnet die Breite anhand eines bestimmten Models.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3><code>box-sizing</code></h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Wie bereits erwähnt kennt CSS 2 "Wege" um die Größe eines Elementes festzulegen.</p>
|
||||
<p>Das Standard (Box-Model) rechnet die Border und das Padding nicht in die Element-Größe mit ein.</p>
|
||||
<p>Das Alternative Model macht dies.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
// Wird jedem Kind zugewiesen
|
||||
.alternative-box {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>3x3 Layout</p>
|
||||
<FlexDemo
|
||||
wrapper="apply-styles flexbox"
|
||||
container="flex wrap"
|
||||
children="child uniform alternative-box"
|
||||
count={9}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Abstände mit <code>gap</code></h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Mittels <code>gap</code> lässt sich ein Abstand zwischen die Kind-Elemente im Layout anwenden:</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
// Klasse für das Parent-Elemente
|
||||
.gapped {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Gap! But ... broken?</p>
|
||||
<FlexDemo
|
||||
wrapper="apply-styles flexbox"
|
||||
container="flex wrap gapped"
|
||||
children="child uniform alternative-box"
|
||||
count={9}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Der Flex-Container fügt nun 0.5rem zwischen den Kindern hinzu, was die Kinder selber nicht wissen oder mit in die Berechnung im Box-Model einfließen lassen können.</p>
|
||||
<p>Man erkennt also, dass wir gegebenenfalls auf Probleme stoßen, wenn das Parent-Element was modifizert.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p><strong>Lösungsmöglichkeiten</strong></p>
|
||||
<ul>
|
||||
<li>Das Gap mit in die Breiten-Berechnung einfließen lassen</li>
|
||||
<li>Andere Layout-Systeme verwenden (Sneak-Peek: Grid)</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
// Gap in Breite Berücksichtigen (anzuwenden für Kind-Elemente)
|
||||
.child {
|
||||
width: calc(1/3 * 100% - 0.5rem)
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Gap! But ... Fixed!</p>
|
||||
<FlexDemo
|
||||
wrapper="apply-styles flexbox"
|
||||
container="flex wrap gapped"
|
||||
children="child unfirom alternative-box child-width-gapped"
|
||||
count={9}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Richtung ändern mit <code>flex-direction</code></h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Wir können das Layout-ing, in der Richtung anpassen. Dafür haben wir folgende Optionen</p>
|
||||
<ul style="font-family: monospace;">
|
||||
<li>row (default)</li>
|
||||
<li>row-reverse</li>
|
||||
<li>column</li>
|
||||
<li>column-reverse</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
// Die Klasse muss dem Parent-Container übergeben werden
|
||||
.direction {
|
||||
flex-direction: row
|
||||
| row-reverse
|
||||
| column
|
||||
| column-reverse;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3><code>wrap</code> und <code>direction</code> mit <code>flex-flow</code></h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Es gibt eine Shorthand-Property um Richtung und Wrapping zusammenzufassen:</p>
|
||||
<p><code>flex-flow</code></p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.col-wrap {
|
||||
flex-flow: column wrap;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Kinder innerhalb der Flex-Box positionieren</h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Flexbox erlaubt es, die Kinder innerhalb der Flexbox mittels 3 Regeln zu positionieren und zu modifizieren</p>
|
||||
<ul>
|
||||
<li>justify-content</li>
|
||||
<li>align-items</li>
|
||||
<li>align-content</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Positionierung entlang der Haupt-Achse mittels <code>justify-content</code></h4>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Zum kurzen Verständnis muss folgendes geklärt werden:</p>
|
||||
<ul>
|
||||
<li>In einer Flexbox gibt es eine Main-Axis und eine Cross-Axis, die jeweils von links-nach-rechts und von oben-nach-unten verlaufen.</li>
|
||||
<li>Die Main-Axis verläuft im Normalzustand von links nach rechts</li>
|
||||
<li>Die Cross-Axis verläuft im Normalzustand von oben nach unten</li>
|
||||
<li>Wird mittels flex-direction eine andere "Richtung" eingestellt, so müssen sich die Achsen auch umgedacht werden.</li>
|
||||
<li><code>column</code>: Main verläuft nun von oben nach unten</li>
|
||||
<li><code>column-reverse</code>: Main verläuft von unten nach oben</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Nun zurück zu justify-content</p>
|
||||
<p>Nehmen wir folgende Ausgangslange an:</p>
|
||||
<FlexDemo
|
||||
wrapper="apply-styles flexbox"
|
||||
container="flex bordered"
|
||||
children="child"
|
||||
count={3}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
// Zur Visualisierung des Containers:
|
||||
.bordered {
|
||||
background-color: burlywood;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>justify-content: center</p>
|
||||
<FlexDemo wrapper="apply-styles flexbox" container="flex jc-c bordered" children="child" count={3} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Mögliche Werte:</p>
|
||||
<ul style="font-family: monospace;">
|
||||
<li>flex-start (default)</li>
|
||||
<li>flex-end</li>
|
||||
<li>center</li>
|
||||
<li>space-around</li>
|
||||
<li>space-between</li>
|
||||
<li>space-evenly</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>flex-start</p>
|
||||
<FlexDemo wrapper="apply-styles flexbox" container="flex jc-fs bordered" children="child" count={3} />
|
||||
<br>
|
||||
<p>flex-end</p>
|
||||
<FlexDemo wrapper="apply-styles flexbox" container="flex jc-fe bordered" children="child" count={3} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>space-between</p>
|
||||
<FlexDemo wrapper="apply-styles flexbox" container="flex jc-sb bordered" children="child" count={3} />
|
||||
<p>space-around</p>
|
||||
<FlexDemo wrapper="apply-styles flexbox" container="flex jc-sa bordered" children="child" count={3} />
|
||||
<p>space-evenly</p>
|
||||
<FlexDemo wrapper="apply-styles flexbox" container="flex jc-se bordered" children="child" count={3} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Modifizierung der Items entlang der Cross-Achse mittels <code>align-items</code></h4>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Werte:</p>
|
||||
<ul style="font-family: monospace;">
|
||||
<li>flex-start (default)</li>
|
||||
<li>flex-end</li>
|
||||
<li>center</li>
|
||||
<li>stretch</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Setup (Default: Flex-Start)</p>
|
||||
<FlexDemo
|
||||
wrapper="apply-styles flexbox"
|
||||
container="flex bordered wrap higher jc-c gapped ai-fs"
|
||||
children="child fourtyfive-percent"
|
||||
count={5}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Flex-End</p>
|
||||
<FlexDemo
|
||||
wrapper="apply-styles flexbox"
|
||||
container="flex bordered wrap higher jc-c gapped ai-fe"
|
||||
children="child fourtyfive-percent"
|
||||
count={5}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Center</p>
|
||||
<FlexDemo
|
||||
wrapper="apply-styles flexbox"
|
||||
container="flex bordered wrap higher jc-c gapped ai-c"
|
||||
children="child fourtyfive-percent"
|
||||
count={5}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Stretch</p>
|
||||
<FlexDemo
|
||||
wrapper="apply-styles flexbox"
|
||||
container="flex bordered wrap higher jc-c gapped ai-s"
|
||||
children="child fourtyfive-percent"
|
||||
count={5}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Positionieren der Elemente an der Cross-Axis mit <code>align-content</code></h4>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Ähnlich zu <code>justify-content</code>, positioniert <code>align-content</code> Flex-Inhalte entlang der Cross-Axis</p>
|
||||
<p>Es gelten die gleiche Keywords wie bei <code>justify-content</code></p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Flex-Start (default)</p>
|
||||
<FlexDemo
|
||||
wrapper="apply-styles flexbox"
|
||||
container="flex bordered wrap higher gapped jc-c ac-fs"
|
||||
children="child fourtyfive-percent"
|
||||
count={5}
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<p>Flex-End</p>
|
||||
<FlexDemo
|
||||
wrapper="apply-styles flexbox"
|
||||
container="flex bordered wrap higher gapped jc-c ac-fe"
|
||||
children="child fourtyfive-percent"
|
||||
count={5}
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<p>space-around</p>
|
||||
<FlexDemo
|
||||
wrapper="apply-styles flexbox"
|
||||
container="flex bordered wrap higher gapped jc-c ac-sa"
|
||||
children="child fourtyfive-percent"
|
||||
count={5}
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<p>space-between</p>
|
||||
<FlexDemo
|
||||
wrapper="apply-styles flexbox"
|
||||
container="flex bordered wrap higher gapped jc-c ac-sb"
|
||||
children="child fourtyfive-percent"
|
||||
count={5}
|
||||
/>
|
||||
</section>
|
||||
<section>
|
||||
<p>space-evenly</p>
|
||||
<FlexDemo
|
||||
wrapper="apply-styles flexbox"
|
||||
container="flex bordered wrap higher gapped jc-c ac-se"
|
||||
children="child fourtyfive-percent"
|
||||
count={5}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Einzelne Kinder innerhalb einer Flexbox modifizieren</h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Zusätzlich zu den CSS-Regeln die man auf das Parent-Element anwenden kann, gibt es auch ein paar Möglichkeiten die Kind-Elemente einer Flexbox zu modifizieren.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Grow & Shrink</h4>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Mit <code>grow & shrink</code> kann einzelnen Kind-Elementen mitgeteilt werden, sich mehr beziehungsweise weniger Platz innerhalb einer Flexbox einzunehmen.</p>
|
||||
<p>Mithilfe von <code>grow</code>, kann Platz zwischen Elementen innerhalb einer Flexbox proportional verteilt werden.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.flex {
|
||||
display: flex;
|
||||
background-color: darkgoldenrod;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.flex > div {
|
||||
padding: 1rem;
|
||||
background-color: #99f;
|
||||
}
|
||||
|
||||
.child-1 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.child-2 {
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.child-3 {
|
||||
flex-grow: 3;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="apply-styles flex-grow-1">
|
||||
<div class="flex">
|
||||
<div class="child-1">Kind 1 <br>(Grow 1)</div>
|
||||
<div class="child-2">Kind 2 <br>(Grow 2)</div>
|
||||
<div class="child-3">Kind 3 <br>(Grow 3)</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Flex-Basis</h4>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Mit <code>flex-basis</code> können wir angeben welche Größe / Breite ein Flex-Kind Standardmäßig erhalten soll, bevor die restliche Verfügbare Breite zwischen den Elementen verteilt wird.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.child-1 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.child-2 {
|
||||
flex-grow: 1;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
.child-3 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="apply-styles flex-basis">
|
||||
<div class="flex">
|
||||
<div class="child-1">Kind 1 <br>(Grow 1)</div>
|
||||
<div class="child-2">Kind 2 <br>(Grow 1, Basis von 50%)</div>
|
||||
<div class="child-3">Kind 3 <br>(Grow 1)</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p><code>grow, shrink</code> und <code>basis</code> können auch mit einem Style-Befehl gleichzeitig gesetzt werden:</p>
|
||||
<p><code>flex: <grow> <shrink> <basis>;</code></p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Order</h4>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Mit <code>order</code> gibt uns Flexbox eine leichte Möglichkeit Elemente innerhalb einer Flexbox neu zu positionieren.</p>
|
||||
<p>Alle Elemente in einem Flexbox Container haben per Default eine <code>order</code> von 0.</p>
|
||||
<p>Elemente mit einer gleichen Order, erscheinen in Reihenfolge, wie sie auch im HTML-Dokument vorkommen.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Elemente die eine höhere <code>order</code> haben, werden nach den kleineren Werten angezeigt. Negative Werte sind auch möglich.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.child-2 { order: -1; }
|
||||
.child-3 { order: 5; }
|
||||
.child-4 { order: 2; }
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="apply-styles order">
|
||||
<div class="flex">
|
||||
<div class="child-1">Kind 1 <br>Keine Order</div>
|
||||
<div class="child-2">Kind 2 <br>Order = -1</div>
|
||||
<div class="child-3">Kind 3 <br>Order = 5</div>
|
||||
<div class="child-4">Kind 4 <br>Order = 2</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
17
src/components/slides/css-layout/grid-demo.astro
Normal file
17
src/components/slides/css-layout/grid-demo.astro
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
interface Props {
|
||||
wrapper: string;
|
||||
container: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
const { wrapper, container, count } = Astro.props;
|
||||
---
|
||||
|
||||
<div class={wrapper}>
|
||||
<div class={container}>
|
||||
{ Array(count).fill(0).map((_, index) => (
|
||||
<div class={["grid-child", `box-${index}`].join(' ')}>Container {index + 1}</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
390
src/components/slides/css-layout/grid.astro
Normal file
390
src/components/slides/css-layout/grid.astro
Normal file
|
|
@ -0,0 +1,390 @@
|
|||
---
|
||||
import GridDemo from "./grid-demo.astro"
|
||||
---
|
||||
|
||||
<section>
|
||||
<section>
|
||||
<h2>CSS Grid Layout</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Lange Zeit wurde mit dem Flexbox Layout etwas versucht zu lösen, was heute ein neueres System löst: Grids</p>
|
||||
<p>Mittels Flexbox wurden Elemente mit festen breiten und Margins versehen, sodass sie wie in einem Grid genutzt werden können.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Die Moderne Lösung: <code>display: grid;</code></p>
|
||||
<p>Das CSS-Grid bietet viele fundamentale aber auch innovative Wege um ein Grid zu definieren und Inhalte darin zu positionieren.</p>
|
||||
<p>Mittels dem Grid, können Elemente in einem 2-Dimensionalen Raster positioniert werden.</p>
|
||||
</section>
|
||||
|
||||
<section class="apply-styles">
|
||||
<p>Fangen wir mit dem Grundbausteinen an. Unsere "Spielwiese" wird wie folgt aussehen:</p>
|
||||
<GridDemo container="" count={6} wrapper=""/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Nun nehmen wir das Parent-Element und machen es zu einem Grid:</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.parent {
|
||||
display: grid;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Das Ergebnis ist nun wie folgt:</p>
|
||||
<GridDemo wrapper="apply-styles grid" container="parent" count={6} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Es passiert zunächst nicht viel...</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Das ist so richtig. Mit einem CSS Grid müssen wir dem Grid mitteilen wie Spalten / Zeilen aufgeteilt werden sollen.</p>
|
||||
<p>Dies kann auf mehrere Arten Geschehen:</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>grid-template-columns <br>grid-template rows</h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Mit <code>grid-template-columns</code> und <code>grid-template-rows</code> wird ausgedrückt, wie Breit Spalten, und wie hoch Zeilen sein sollen.</code></p>
|
||||
<p>Es müssen nicht beide keywords verwendet werden, Spalten und Zeilen nehmen die benötigte Höhe oder Breite ein, wenn eine Definition fehlt.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Teilen wir nun das Grid in 3 Spalten auf. Jede Spalte hat 200px Breite</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.cols-200-200-200 {
|
||||
grid-template-columns: 200px 200px 200px;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<GridDemo wrapper="apply-styles grid" container="parent cols-200-200-200" count={6}/>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Wir sehen, die sechs Kind-Elemente reihen sich in 2 Zeilen zu je 3 Spalten an.</p>
|
||||
<p>Natürlich sind 200px mal 3 recht spezifisch und so gesehen auch nicht wirklich Mobile-Friendly.</p>
|
||||
<p>Dafür hat das CSS-Grid eine "spezielle" Einheit: Die "Fraction" (fr).</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>1fr wirkt sich je nach Situation verschieden aus. Nutzen wir zunächst die neue Einheit über alle Elemente gleichermaßen aus:</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.cols-even {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Jede Spalte nimmt nun die exakt gleiche Breite ein, wobei die komplette vorhandene Viewport-Breite verwendet wird:</p>
|
||||
<GridDemo wrapper="apply-styles grid" container="parent cols-even" count={6} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Wie sieht nun die Verwendung von Mischformen aus?</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.cols-mixed {
|
||||
grid-template-columns: 20% 1fr 250px;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Die erste Spalte nimmt nun 1/5 der Breite ein, die 3. Spalte 250px.</p>
|
||||
<p>Unter verschiedenen Displays kann die Angabe nur ein "maximum" sein. Das Grid versucht dabei sein bestes um den Platz zu verteilen.</p>
|
||||
<GridDemo wrapper="apply-styles grid" container="parent cols-mixed" count={6} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Wichtig beim "mischen" von Fraction-Units und Absoluten Größen:</p>
|
||||
<p>Das Grid gibt den absoluten Breiten Vorrang. Erst danach wird die restsliche Verfügbare Breite an Fractions verteilt. Ein Beispiel:</p>
|
||||
<p><code>grid-template-columns: 200px 1f 4fr</code></p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p><code>grid-template-columns: 200px 1f 4fr</code></p>
|
||||
<p>Zuerst werden die 200px der ersten Spalte zugewiesen, die restliche Breite wird durch 5 (1fr + 4fr) geteilt und dann entsprechen "1 zu 5" und "4 zu 5" verteilt.</p>
|
||||
<hr>
|
||||
<p>Rechenbeispiel bei einer Verfügbaren Breite von 700px:</p>
|
||||
<p>200px für Spalte #1, 500px bleiben übrig. <br>500px durch insgesamt 5fr geteilt sind 100px je 1fr. Spalte #2 erhält demnach 100px Breite und Spalte 3 400px Breite.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Nun lasst uns die fr-Einheit nutzen um der ersten Spalte 50% und den restlichen Spalten jeweils 25% Platz zuzusprechen:</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.cols-2-1-1 {
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<GridDemo wrapper="apply-styles grid" container="parent cols-2-1-1" count={6} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Wiederholende Grids mit <code>repeat</code></h4>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Es ist bei sich gleich Verhaltenden Breitenangaben (z.b. 1fr 1fr 1fr 1fr...) eine Hilfsfunktion <code>"repeat"</code> zu verwenden:</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.cols-repeat-1fr {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<GridDemo wrapper="apply-styles grid" container="parent cols-repeat-1fr" count={6} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p><code>repeat</code> nimmt dabei auch mehrere Einheiten an, die "Funktion" wiederholt einfach den 2. Parameter so oft wie in Paramter 1 beschrieben:</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.cols-repeat-1-2 {
|
||||
grid-template-columns: repeat(2, 1fr 2fr);
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<GridDemo wrapper="apply-styles grid" container="parent cols-repeat-1-2" count={6} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>Implizite Spalten und Zeilen</h4>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Bisher haben wir mit <code>grid-template-columns</code> <strong>explizit</strong> Spalten erzeugt.</p>
|
||||
<p>Nachdem die erste Zeile voll besetzt war, hat das CSS-Grid automatisch eine 2. Zeile generiert und weitere Elemente dort hinein gepackt.</p>
|
||||
<p>Diese Zeilen wurden <strong>implizit</strong> generiert. Wir können dies aber in gewisser Weise steuern:</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.rows-auto-200 {
|
||||
grid-auto-rows: 200px;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p><code>grid-auto-rows</code> teilt den impliziten Zeilen mit, wie viel Höhe diese einnehmen sollen:</p>
|
||||
<GridDemo wrapper="apply-styles grid" container="parent cols-repeat-1fr-3 rows-auto-200" count={6} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4><code>minxmax</code> für automatische Implizite Sektionen</h4>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Es macht auch hier natürlich wenig Sinn, feste Werte für die Spalten oder Zeilen mit der <code>grid-auto</code>-Syntax zu vergeben.</p>
|
||||
<p>Auch hierfür gibt es wieder Möglichkeiten: <code>minmax</code></p>
|
||||
<p>Mithilfe dieser CSS-Funktion können wir mindest- sowie maximale Höhe angeben, die das Grid (genauer gesagt dessen Zellen) einnehmen soll.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.rows-auto-minmax {
|
||||
grid-auto-rows: minmax(150px, auto);
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section class="apply-styles grid">
|
||||
<div class="parent cols-repeat-1fr-3 rows-auto-minmax">
|
||||
<div class="grid-child">Kind 1</div>
|
||||
<div class="grid-child">
|
||||
Kind 2, aber mit mehr Inhalt...
|
||||
<br>
|
||||
Am besten mehrere Zeilen lang
|
||||
</div>
|
||||
<div class="grid-child">Kind 3</div>
|
||||
<div class="grid-child">Kind 4</div>
|
||||
<div class="grid-child">Kind 5</div>
|
||||
<div class="grid-child">Kind 6</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Wie erwähnt, sorgt <code>minmax</code>, dass die Spalte oder Zeile eine mindest und maximale Höhe, beziehungsweise Breite, einnimmt.</p>
|
||||
<p>Das keyword <code>auto</code> für den "max"-Teil sorgt dafür, das sich die maximale Höhe anhand des Inhaltes, der größten Zelle, bemessen wird.</p>
|
||||
<p>An unserem Beispiel bedeutet dies konkret: 150px mindestens hoch, ansonsten an der höchsten Zelle orientieren.</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>
|
||||
Die erste Grid-Superkraft: <br>
|
||||
Grid-Lines und Item-Positionierung
|
||||
</h4>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Wenn wir mittels <code>grid-template-columns</code> Spalten (und implizit Zeilen) erzeugen, können wir den einzelnen Kind-Elementen mitteilen, wie viele Spalten/Zeilen sie einnehmen sollen.</p>
|
||||
<p>Bei der Erstellung von beispielsweise Spalten, können wir uns Gedanklich jeden Bereich zwischen den Spalten (Ränder miteinbezogen) durchnummeriert vorstellen</p>
|
||||
</section>
|
||||
|
||||
<section class="apply-styles grid">
|
||||
<div class="demo-grid-lines">
|
||||
<div class="no"><span>1</span></div>
|
||||
<div>Spalte #1</div>
|
||||
<div class="no"><span>2</span></div>
|
||||
<div>Spalte #2</div>
|
||||
<div class="no"><span>3</span></div>
|
||||
<div>Spalte #3</div>
|
||||
<div class="no"><span>4</span></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Das Konzept der Nummerierung lässt sich auch 1 zu 1 auf Zeilen übertragen.</p>
|
||||
<p>Lasst uns nun eine Box erstellen, die über alle Spalten "gezogen" wird:</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.box-0 {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 4;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<GridDemo wrapper="apply-styles grid" container="col-start-end cols-repeat-1fr-3 parent rows-auto-200" count={1} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Es lassen sich auch start & end für rows (Zeilen) definieren:</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.box-0 {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
|
||||
.box-1 {
|
||||
grid-column-start: 3;
|
||||
grid-column-end: 4;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 3;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<GridDemo wrapper="apply-styles grid" container="col-row-start-end cols-repeat-1fr-3 parent rows-auto-200" count={4} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Es ist auch deutlich ersichtlich, dass weitere Elemente die "leer gelassenen" Bereiche automatisch auffüllen.</p>
|
||||
<p>Das ganze lässt sich aber auch wieder kürzer schreiben:</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.box-0 {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.box-1 {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<GridDemo wrapper="apply-styles grid" container="col-row-start-end-shorter cols-repeat-1fr-3 parent rows-auto-200" count={4} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h4>
|
||||
Grid-Superkraft #2: <br>
|
||||
<code>template-areas & named areas</code>
|
||||
</h4>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Eine etwas "verständlichere" Art und Weise das Grid zu definieren und dessen Kinder zu positionieren ist mittels benannten Elementen.</p>
|
||||
<p>Als Beispiel werden wir ein klassisches Homepage-Layout kreieren.</p>
|
||||
<p>Benennen wir zuerst die Kind-Elemente die sich später im Grid befinden werden:</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.box-0 {
|
||||
grid-area: header;
|
||||
}
|
||||
.box-1 {
|
||||
grid-area: menu;
|
||||
}
|
||||
.box-2 {
|
||||
grid-area: content;
|
||||
}
|
||||
.box-3 {
|
||||
grid-area: footer;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Zur Feststellung: Wir können den Bereichen jeden Namen geben den wir wollen.</p>
|
||||
<p>Als nächstes definieren wir die Grid-Struktur mittels <code>grid-template-columns & grid-auto-rows</code></p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Altbekanntes: Ein Grid mit 3 (gleichgroßen) Spalten, Zeilen implizit mit minmax</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Nun benutzen wir <code>grid-template-areas</code>, um dem Grid mitzuteilen wie die Kind-Elemente verteilt werden sollen. Dafür benutzen wir die zuvor verwendeten Namen.</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.grid {
|
||||
// ...
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"menu content content"
|
||||
"menu content content"
|
||||
"footer footer footer";
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Das Ergebnis:</p>
|
||||
<GridDemo wrapper="apply-styles grid" container="template-area-1" count={4} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Falls wir wollen, dass in einer "Zelle" kein Inhalt angezeigt wird, können wir einfach nur einen Punkt schreiben:</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
.grid {
|
||||
// ...
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"menu content content"
|
||||
". content content"
|
||||
"footer footer footer";
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<GridDemo wrapper="apply-styles grid" container="template-area-2" count={4} />
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>Zu guter letzt: Auch im Grid lässt sich <code>gap</code> wie bereits in der Flexbox verwenden.</p>
|
||||
</section>
|
||||
</section>
|
||||
379
src/components/slides/css-layout/index.astro
Normal file
379
src/components/slides/css-layout/index.astro
Normal file
|
|
@ -0,0 +1,379 @@
|
|||
---
|
||||
import Title from './title.astro';
|
||||
import BoxModel from './box-model.astro';
|
||||
import InlineFlow from './inline.astro';
|
||||
import BlockFlow from './block.astro';
|
||||
import Flex from './flex.astro';
|
||||
import Grid from './grid.astro';
|
||||
---
|
||||
|
||||
<div class="slides">
|
||||
<Title />
|
||||
<BoxModel />
|
||||
<InlineFlow />
|
||||
<BlockFlow />
|
||||
<Flex />
|
||||
<Grid />
|
||||
</div>
|
||||
|
||||
<style lang="scss" is:global>
|
||||
.apply-styles {
|
||||
&.four {
|
||||
span.label {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
.flex-center {
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
padding: 5rem;
|
||||
}
|
||||
.margin {
|
||||
background-color: greenyellow;
|
||||
}
|
||||
.border {
|
||||
background-color: orange;
|
||||
}
|
||||
.padding {
|
||||
background-color: lightseagreen;
|
||||
}
|
||||
.content {
|
||||
display: inline;
|
||||
padding: 2rem;
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
&.flexbox {
|
||||
.bordered {
|
||||
background-color: burlywood;
|
||||
}
|
||||
.child {
|
||||
background-color: aquamarine;
|
||||
border: 2px solid black;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.no-wrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.wrap-reverse {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
.uniform {
|
||||
width: calc(1/3 * 100%);
|
||||
}
|
||||
|
||||
.alternative-box {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.gapped {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.child-width-gapped {
|
||||
width: calc(1/3 * 100% - 0.5rem);
|
||||
}
|
||||
|
||||
.row {
|
||||
flex-direction: row;
|
||||
}
|
||||
.row-reversed {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.column {
|
||||
flex-direction: column;
|
||||
}
|
||||
.column-reversed {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.jc-c {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.jc-fs {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.jc-fe {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.jc-sa {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.jc-sb {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.jc-se {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.fourtyfive-percent {
|
||||
box-sizing: border-box;
|
||||
width: 45%;
|
||||
}
|
||||
|
||||
.higher {
|
||||
height: 450px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.ai-fs {
|
||||
align-items: flex-start;
|
||||
}
|
||||
.ai-fe {
|
||||
align-items: flex-end;
|
||||
}
|
||||
.ai-c {
|
||||
align-items: center;
|
||||
}
|
||||
.ai-s {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.ac-fs {
|
||||
align-content: flex-start;
|
||||
}
|
||||
.ac-fe {
|
||||
align-content: flex-end;
|
||||
}
|
||||
.ac-sa {
|
||||
align-content: space-around;
|
||||
}
|
||||
.ac-sb {
|
||||
align-content: space-between;
|
||||
}
|
||||
.ac-se {
|
||||
align-content: space-evenly;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.flex-grow-1 {
|
||||
.flex {
|
||||
display: flex;
|
||||
background-color: darkgoldenrod;
|
||||
gap: 1rem;
|
||||
|
||||
& > div {
|
||||
padding: 1rem;
|
||||
background-color: #99f;
|
||||
}
|
||||
}
|
||||
|
||||
.child-1 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.child-2 {
|
||||
flex-grow: 2;
|
||||
}
|
||||
|
||||
.child-3 {
|
||||
flex-grow: 3;
|
||||
}
|
||||
}
|
||||
|
||||
&.flex-basis {
|
||||
.flex {
|
||||
display: flex;
|
||||
background-color: darkgoldenrod;
|
||||
gap: 1rem;
|
||||
|
||||
& > div {
|
||||
padding: 1rem;
|
||||
background-color: #99f;
|
||||
}
|
||||
}
|
||||
|
||||
.child-1 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.child-2 {
|
||||
flex-grow: 1;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
.child-3 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.order {
|
||||
.flex {
|
||||
display: flex;
|
||||
background-color: darkgoldenrod;
|
||||
gap: 1rem;
|
||||
|
||||
& > div {
|
||||
padding: 1rem;
|
||||
background-color: #99f;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.child-2 { order: -1; }
|
||||
.child-3 { order: 5; }
|
||||
.child-4 { order: 2; }
|
||||
}
|
||||
|
||||
.grid-child {
|
||||
background-color: darkgoldenrod;
|
||||
padding: 0.5rem;
|
||||
border: 2px solid black;
|
||||
}
|
||||
|
||||
&.grid {
|
||||
.parent {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.cols-200-200-200 {
|
||||
grid-template-columns: 200px 200px 200px;
|
||||
}
|
||||
|
||||
.cols-even {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.cols-mixed {
|
||||
grid-template-columns: 20% 1fr 250px;
|
||||
}
|
||||
|
||||
.cols-2-1-1 {
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.cols-repeat-1fr {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.cols-repeat-1-2 {
|
||||
grid-template-columns: repeat(2, 1fr 2fr);
|
||||
}
|
||||
|
||||
.cols-repeat-1fr-3 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.rows-auto-200 {
|
||||
grid-auto-rows: 200px;
|
||||
}
|
||||
|
||||
.rows-auto-minmax {
|
||||
grid-auto-rows: minmax(150px, auto);
|
||||
}
|
||||
|
||||
.demo-grid-lines {
|
||||
display: grid;
|
||||
grid-template-columns: 75px 1fr 75px 1fr 75px 1fr 75px;
|
||||
grid-auto-rows: 250px;
|
||||
|
||||
& > * {
|
||||
align-content: center;
|
||||
}
|
||||
.no {
|
||||
background-color: #99f;
|
||||
span {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col-start-end {
|
||||
.box-0 {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 4;
|
||||
}
|
||||
}
|
||||
|
||||
.col-row-start-end {
|
||||
.box-0 {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
|
||||
.box-1 {
|
||||
grid-column-start: 3;
|
||||
grid-column-end: 4;
|
||||
grid-row-start: 1;
|
||||
grid-row-end: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.col-row-start-end-shorter {
|
||||
.box-0 {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.box-1 {
|
||||
grid-column: 3 / 4;
|
||||
grid-row: 1 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.template-area-1 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"menu content content"
|
||||
"menu content content"
|
||||
"footer footer footer";
|
||||
|
||||
.box-0 {
|
||||
grid-area: header;
|
||||
}
|
||||
.box-1 {
|
||||
grid-area: menu;
|
||||
}
|
||||
.box-2 {
|
||||
grid-area: content;
|
||||
}
|
||||
.box-3 {
|
||||
grid-area: footer;
|
||||
}
|
||||
}
|
||||
|
||||
.template-area-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"menu content content"
|
||||
". content content"
|
||||
"footer footer footer";
|
||||
|
||||
.box-0 {
|
||||
grid-area: header;
|
||||
}
|
||||
.box-1 {
|
||||
grid-area: menu;
|
||||
}
|
||||
.box-2 {
|
||||
grid-area: content;
|
||||
}
|
||||
.box-3 {
|
||||
grid-area: footer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
51
src/components/slides/css-layout/inline.astro
Normal file
51
src/components/slides/css-layout/inline.astro
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<section>
|
||||
<section>
|
||||
<h2>Display - Inline (Flow)</h2>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>
|
||||
Um einen beliebiges Tag in ein <code>inline</code>-Verhalten zu zwingen, reicht folgendes aus:
|
||||
</p>
|
||||
<pre class="css"><code data-trim data-line-numbers is:raw>
|
||||
// "ältere" Schreibweise
|
||||
.inline {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
// "modernere" Schreibweise
|
||||
.inline {
|
||||
display: inline flow;
|
||||
}
|
||||
</code></pre>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p>
|
||||
Zum aktuellen Zeitpunk, gibt es eine neuere Schreibweise, die aus 2 "Kommandos" besteht.
|
||||
</p>
|
||||
<p>Zum einen wird definiert wie sich das äußere Verhalten andere Elemente auswirkt: inline oder block</p>
|
||||
<p>Zum anderen wird das innere Verhalten definiert. Dies bezeichnet das Layout-Verhalten: flow, flex oder grid</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h3>Inline-Flow-Verhalten</h3>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<ul>
|
||||
<li>Nimmt nur den Platz ein, den der Inhalt braucht</li>
|
||||
<li>Lässt Zeilenumbrüche zu</li>
|
||||
<li>Inhalt davor und danach kann sich in der gleichen "Zeile" befinden</li>
|
||||
<li>Innerer Inhalte folgt "Standardverhalten". Wie man normalen Textfluss gewohnt ist (DE: Left-To-Right, Top-To-Bottom)</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<div class="apply-styles inline" style="background-color: lightgrey;">
|
||||
Hier steht etwas Text davor;
|
||||
<span style="background-color: hotpink;">Dann kommt ein inline-flow span;</span>
|
||||
Und dann kommt noch etwas Text danach
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
3
src/components/slides/css-layout/title.astro
Normal file
3
src/components/slides/css-layout/title.astro
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<section>
|
||||
<h1>CSS: Das Box-Model und Layouts</h1>
|
||||
</section>
|
||||
8
src/pages/slides/css-layout-and-box-model.astro
Normal file
8
src/pages/slides/css-layout-and-box-model.astro
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
import Reveal from '../../layouts/Reveal.astro';
|
||||
import Slides from '../../components/slides/css-layout/index.astro';
|
||||
---
|
||||
|
||||
<Reveal title="CSS Layouts und Box-Model">
|
||||
<Slides />
|
||||
</Reveal>
|
||||
Loading…
Add table
Add a link
Reference in a new issue