All slideshows in this repository can be viewed via GitHub Pages at https://backdrop-ops.github.io/slides.
Feel free to fork the repo and create a new/modify an existing deck.
<title>
tag, and feel free to look in other presentations or reveal.js/index.html
for code examplesassets
folder, and give it the same name as your .html
file.index.html
deck.If you'd like to share your presentation back with the community, please submit a pull request from your fork against the master branch.
A Reveal.js slide deck for a presentation on Backdrop CMS.
npm install
from the root of this reponpm start
to start up the server, leave this running during your presentationReadability++
The default highlights.js
highlighting has been replaced with prism.js
highlighting. By default the following syntaxes have been included:
To use any of these your syntax should look like:
<pre><code class="language-markup"><-- Code goes here -->
<p>It's best to keep your first line of code on the same line as the tag
And to avoid any indenting that you don't want in the presentation.
</p></code></pre>
Also included are the line-highlight and line number, documentation for those are here:
To replace/augment the languages included you can visit here and download a different file: http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript+bash+css-extras+git+php+php-extras+jsx+scss+twig+yaml&plugins=line-highlight+line-numbers
The code is in plugins/prismjs/
.
For any other issues see http://prismjs.com
For iconography I've included FontAwesome for it's ease of use and good documentation. Basic syntax is:
<i class="fa fa-star"></i> Here is my star
Since it's an icon font, use font CSS to manipulate it (font-size
, color
, etc).
For more code examples see: http://fortawesome.github.io/Font-Awesome/examples
http://fortawesome.github.io/Font-Awesome
Resilient equal height and equal width columns.
<div class="column-wrapper">
<div>Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>
This is using flexbox, which is not compatible with older browsers, but it has great advantages so I'm using it.
It will automatically make equal width and height columns that add up to 100% of the .column-wrapper
's width.
It assumes that all direct descendants of column-wrapper
are a column, no special classes or markup required.
If you would like to have a column be larger than the others there are two ways to do that:
flex-grow
property on the column wrappers. By default all columns are flex-grow: 1
. Flexbox will count all the flex-grow
numbers and divides each column's value by the total to get each column's width; UNLESS the content inside a column is too large, then it will do it's best to accommodate. So in the following example it is calculating flex grows of 2, 1, 1; which will add up to 50%, 25%, 25% columns.
<div class="column-wrapper">
<div style="flex-grow: 2">Double wide Column 1</div>
<div>Column 2</div>
<div>Column 3</div>
</div>
flex-grow: 0
for any column that has an explicit width. If explicit widths add up to greater than 100% (or the total width in px) it will wrap, but in a nicer and less buggy way than floats.
<div class="column-wrapper">
<div style="flex-grow: 0; width: 60%;">A 60% wide column</div>
<div>These will end up being half of what's left over</div>
<div>What he said ^</div>
</div>
The default column-wrapper
styles are:
display: flex;
align-items: stretch;
flex-wrap: wrap;
margin-bottom: 1em;
The default column styles are:
flex-grow: 1;
box-sizing: border-box;
margin-top: 0;
margin-bottom: 0;
The margin top and bottom is to override defaults for that container so it lines up with it's sibling columns
For any flexbox questions, go here: https://css-tricks.com/snippets/css/a-guide-to-flexbox
If you'd like to show off folder/file structure, I've included some styles to help with that. It handles nested folders, and has a nice legible appearance.
<ul class="file-list">
<li>Folder name</li>
<li>Folder name
<ul>
<li>Nested folder name</li>
<li>Nested folder name</li>
<li class="file">Nested file name</li>
</ul>
</li>
<li>Folder name</li>
<li class="file">File name</li>
</ul>
Images were stolen freely from the internet. See the image credits slide the (last one) for a complete list of links.
This project is distributed under a Creative Commons Public License: Attribution 4.0 International. See the LICENSE.txt file in this directory for complete text.