So, my first Grav page. It appears I start with a summary section, so that's what we have here.

My word that's one HUGE font for the summary text. Blimey, they can't really have meant that can they?

Ahh, make sure the 3 equals signs have a blank line above and below them otherwise it seems to treat the whole summary as a title. Well, that's the first gotcha to watch out for. Anyway, on with the show...

Ooh, and it's like we're using traditional Wiki markup, I should probably figure out which variant Grav uses and start fiddling with that. Until then I'll poke at the buttons in this admin editor.

So, first some typography fiddling. A bit of bold. Some italics, wait what? underscores for italics, weird, I wonder what we'll have to use for underline then.

  1. An ordered list
  2. does it use a hash?
  3. or something else?
  4. oh, just numbers, I wonder what happens when
  5. I cock up the ordering by manually
  6. entering digits
  7. at the start of lines
  • So, unordered lists
  • Go on, use a star like most people
  • or an asterisk if you want to get formal
  • Yay, that's ok then

We have a blockquote style too, that looks something like this. ooh, and it continues too, like the lists above

there were multiple block quote styles too, which look like they kind of become alert/breakout boxes of various colours. But these got binned in favour of a separate markup flag.

Headers?

I'm guessing they'll be either dashes

or some 'hx' construct

Oops, I'm wrong. Well that explains the not using hashes for ordered lists thing.

Other than that we have links images and youtube embeds.

The images can't be added until the page is saved, so there's an inherent 3 step process there:

  1. create and save initial page
  2. upload images
  3. edit page to add image links and re-save

And it looks like we can just slap raw HTML straight into the page if we like - very nice! That means I can do FontAwesome and Foundation styling cleverness without any admin page button poking - I hope!

So, we have FA icons to pretty things up:
A big-ass camera

and also Foundation icons?
Hmm, nope. Either the Bones team left them out or they're not working for some reason. Ah well, I don't need both sets.

while (interested) { writeCode(coolness=>11); } if (importance > 5) { finishCode(coolness=>1); } else { // todo } Bah, looks like <code> doesn't preserve whitespace, which means my code above looks bleurgh.

Ooh, a thought, what if I prettyprint my code in jedit and paste that in here.

1 while (interested) {
2     writeCode(coolness=>11);
3 }
4 if (importance > 5) {
5     finishCode(coolness=>1);
6 } else {
7     // todo
8 }

Sweet, just remember it's going to look pugugly in edit mode between those two pre tags.

It looks like the Bones theme also include an extra bit of markup for prettyprinting code, so lets try that first example again, with the extra fiddle:

while (interested) {
    writeCode(coolness=>11);
}
if (importance > 5) {
    finishCode(coolness=>1);
} else {
    // todo
}

Ok, so

<pre class="prettyprint">blah
does monospace and keeps the whitespace, but doesn't seem to do any syntax highlighting.

Font Awesome icons do get colours as usual don't they?

And the dahling of HTML, tables. Looks like we just plop the basic tags in the right order and the Foundation CSS takes care of making it look reasonable. Meh, that's fine.

ID Description Stuff
1 First Row Yay!

And another bit of foundation styling...

This is a secondary callout

It has an easy to override visual style, and is appropriately subdued.

It's dangerous to go alone, take this.
This is a success callout

it's green, woo!

Info Label Secondary Label Success Label Alert Label Warning Label

© Me. Best viewed with a sense of humour and a beer in hand.