From 2b53e3e2ef985a01fecede6a5854428391d83726 Mon Sep 17 00:00:00 2001 From: Quentin Dufour Date: Fri, 26 Nov 2021 15:51:03 +0100 Subject: =?UTF-8?q?Ajout=20pr=C3=A9sentation=20et=20programme=20du=2011/12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2021-11-13/garage/examples/layout-helpers.html | 160 +++++++++++++++++++++ 1 file changed, 160 insertions(+) create mode 100644 static/presentations/2021-11-13/garage/examples/layout-helpers.html (limited to 'static/presentations/2021-11-13/garage/examples/layout-helpers.html') diff --git a/static/presentations/2021-11-13/garage/examples/layout-helpers.html b/static/presentations/2021-11-13/garage/examples/layout-helpers.html new file mode 100644 index 0000000..a129811 --- /dev/null +++ b/static/presentations/2021-11-13/garage/examples/layout-helpers.html @@ -0,0 +1,160 @@ + + + + + + + reveal.js - Layout Helpers + + + + + + + + + + +
+ +
+ +
+

Layout Helper Examples

+ +
+ +
+

Fit Text

+

Resizes text to be as large as possible within its container.

+ 

+					  
FIT

+
+
+ +
+

FIT

+
+ +
+

HELLO WORLD

+

BOTH THESE TITLES USE FIT-TEXT

+
+ +
+

Stretch

+

Makes an element as tall as possible while remaining within the slide bounds.

+ 

+					  
Stretch Example

+					  
+					  
Image byline

+
+
+ +
+

Stretch Example

+ +

Image byline

+
+ +
+

Stack

+

Stacks multiple elements on top of each other, for use with fragments.

+ 

+					  

+					    <img class="fragment" width="450" height="300" src="...">
+					    <img class="fragment" width="300" height="450" src="...">
+					    <img class="fragment" width="400" height="400" src="...">
+					  

+
+
+ +
+

Stack Example

+
+

One

+

Two

+

Three

+

Four

+
+
+ + + +
+
+ +
+

Stack Example

+

fade-in-then-out fragments

+
+ + + +
+
+ +
+

HStack

+

Stacks multiple elements horizontally.

+ 

+					  

+					    <img width="450" height="300" src="...">
+					    <img width="300" height="450" src="...">
+					    <img width="400" height="400" src="...">
+					  

+
+
+ +
+

HStack Example

+
+

One

+

Two

+

Three

+
+
+ +
+

VStack

+

Stacks multiple elements vertically.

+ 

+					  

+					    <img width="450" height="300" src="...">
+					    <img width="300" height="450" src="...">
+					    <img width="400" height="400" src="...">
+					  

+
+
+ +
+

VStack Example

+
+

One

+

Two

+

Three

+
+
+ +
+ +
+ + + + + + + -- cgit v1.2.3