bespoke-theme-sandy
A Bespoke.js theme by Flávio Coutinho
Layouts
This is a .layout-section-header slide
Hey, it works by doing so and so
But also by doing hex and prune
- term
- There are several slide layouts available.
- term
- Please, go through this demo presentation to see them all.
Layouts
This is a .layout-section-header slide
Hey, it works by doing so and so
But also by doing hex and prune
Layouts
This is a .layout-section-header slide
- term
- There are several slide layouts available.
- term
- Please, go through this demo presentation to see them all.
- Please, go through this demo presentation to see them all.
- Please, go through this demo presentation to see them all.
- Please, go through this demo presentation to see them all.
Layouts
This is a .layout-section-header slide
There are several slide layouts available.
Please, go through this demo presentation to see them all.
Paragraph
This is a .layout-stripe slide.
In eu diam sed mi blandit pulvinar.
Source code
Block code
const emailLinkChecker = /^mailto/;The above result can be achieved with
<pre> <code> const emailLinkChecker = /^mailto/; </code> </pre>Inline code
The
/^mailto/.exec(...)expression checks if some string is a link to an e-mail addressThe above result can be achieved with
The <code>/^mailto/.exec(...)</code> expression checks if some string is a link to an e-mail address
Unordered and Ordered Lists
- In eu diam sed mi blandit pulvinar.
- Etiam hendrerit nunc ut tortor interdum faucibus.
- Nulla eget nibh et enim sagittis dictum.
- In eu diam sed mi blandit pulvinar.
- Etiam hendrerit nunc ut tortor interdum faucibus.
- Nulla eget nibh et enim sagittis dictum.
This is a .layout-2-column-content slide.
Card list
Item 1
Item 2
Item 3
Item 4
Item 5
The .card-list class turns a simple list into one with
a title (h1, h2, h3, h4, h5, h6, figcaption) and an image.
Card list polaroid-style
Item 1
Item 2
Item 3
Item 4
Item 5
By adding .polaroid to a .card-list we
get a polaroid effect.
Check the source code used in this card list
to the right.
<pre>
<code>
<ul class="card-list polaroid">
<li>
<h2>Item 1</h2>
<img src="imgs/item1.png">
<li>
<h2>Item 2</h2>
<img src="imgs/item2.png">
...
</ul>
</code>
</pre>
Definition List
This is a .layout-centered-horizontal slide
- Term 1
- It means this or that
- Term 2
- I really mean that it means it
- Term 3
- Can a canner can a can?
Slide with a highlight
- This is yet another layout
- It's called
.layout-2-column-highlight-and-list - And it expects a title (h1..6), one highlighted element and a list (ul, ol, dl)
One code
This is a layout that allows
3 elements to split the slide width
equally.Two codes
Might be useful for showing different
code files, for example, as it allows
the code elements to expand to full width
when hovered.Three codes
This is called the layout
.layout-3-column-element-with-titles-expansible
and it expects three sequences of a title (h1..6) and another
element (e.g., a <pre>)
Circling balloons layout
This is the
.layout-circling-balloons
It expects a title (h1..6) and a list (ul) of 3 elements
Each list item can have a image (as an icon) and other elements, which are shown upon hovering
Tall figure + more
- This uses the layout
.layout-tall-figure-left - It expects a title (h1..h6), strong>something tall to be put to the left and some content to the right
- There is also
.layout-tall-figure-right
