Snippets

Here are a few simple snippets that you can easily add to your text to make them stand out.

My Image

Labels

You can easily add nice looking labels to the text on your page. Just by tweaking the snippet code you can mix and match for many different styles.

<span class="[success alert secondary] [round radius] label">Advanced Label</span>

Code

If you want to display inline code or just make some text stand out, you can use this snippet

<code>Some Code</code>

Keystrokes

Keystrokes allow you to add a different kind of text accent to your page. It looks great for keyboard shortcuts!

Use Cmd + R to switch to preview mode in RapidWeaver.

<p>Use <kbd>Cmd</kbd> + <kbd>R</kbd> to switch to preview mode in RapidWeaver</p>

Tooltips

The tooltips can be positioned on the "tip-bottom", which is the default position, "tip-top", "tip-left", or "tip-right" of the target element by adding the appropriate class to them. You can even add your own custom class to style each tip differently. On a small device, the tooltips are full-width and bottom aligned.

For more advanced settings for the Tooltips (disabling touch events, round the corners of the tooltips), please visit this Foundation page.

<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>

More at Foundation Docs

You can hand code any of the Foundation snippets and components to your heart's content. If getting down and dirty with some code is your thing, head over the the Foundation docs and have some fun.

Product by Joe Workman

I am an indie Web and Mac developer based in the SF Bay Area. I've been highly active in the community since my first release in 2008. http://joeworkman.net

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.
Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.