8000 initial work for hstack and vstack · hakimel/reveal.js@cd5161f · GitHub
[go: up one dir, main page]
Skip to content

Commit cd5161f

Browse files
hakimelhakimel
committed
initial work for hstack and vstack
1 parent f0b67ad commit cd5161f

File tree

3 files changed

+38
-7
lines changed

3 files changed

+38
-7
lines changed

‎css/layout.scss

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,24 @@
3434

3535
.reveal .r-vstack {
3636
flex-direction: column;
37+
align-items: center;
38+
justify-content: center;
3739
}
3840

3941
.reveal .r-hstack {
4042
flex-direction: row;
41-
}
42-
43-
.reveal .items-center {
4443
align-items: center;
44+
justify-content: center;
4545
}
4646

47-
.reveal .justify-center {
48-
justify-content: center;
49-
}
47+
// Naming based on tailwindcss
48+
.reveal .items-stretch { align-items: stretch; }
49+
.reveal .items-start { align-items: flex-start; }
50+
.reveal .items-center { align-items: center; }
51+
.reveal .items-end { align-items: flex-end; }
52+
53+
.reveal .justify-between { justify-content: space-between; }
54+
.reveal .justify-around { justify-content: space-around; }
55+
.reveal .justify-start { justify-content: flex-start; }
56+
.reveal .justify-center { justify-content: center; }
57+
.reveal .justify-end { justify-content: flex-end; }

‎dist/reveal.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/layout-helpers.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ <h2>Layout Helper Examples</h2>
2424
<ul>
2525
<li><a href="#/stretch">Stretch</a></li>
2626
<li><a href="#/stack">Stack</a></li>
27+
<li><a href="#/hstack">HStack</a></li>
28+
<li><a href="#/vstack">VStack</a></li>
2729
</ul>
2830
</section>
2931

@@ -74,6 +76,27 @@ <h2>Stack Example</h2>
7476
</div>
7577
</section>
7678

79+
<section id="hstack">
80+
<h2>HStack</h2>
81+
<p>Stacks multiple elements horizontally.</p>
82+
<pre><code class="html" data-trim data-line-numbers>
83+
<div class="r-hstack">
84+
&lt;img width="450" height="300" src="..."&gt;
85+
&lt;img width="300" height="450" src="..."&gt;
86+
&lt;img width="400" height="400" src="..."&gt;
87+
</div>
88+
</code></pre>
89+
</section>
90+
91+
<section data-auto-animate>
92+
<h2>HStack Example</h2>
93+
<div class="r-hstack">
94+
<p style="padding: 0.50em; background: #eee; margin: 0.25em">One</p>
95+
<p style="padding: 0.75em; background: #eee; margin: 0.25em">Two</p>
96+
<p style="padding: 1.00em; background: #eee; margin: 0.25em">Three</p>
97+
</div>
98+
</section>
99+
77100
</div>
78101

79102
</div>

0 commit comments

Comments
 (0)
0