Skip to content

Instantly share code, notes, and snippets.

@fform
Last active August 29, 2015 13:56
Show Gist options
  • Save fform/9200260 to your computer and use it in GitHub Desktop.
Save fform/9200260 to your computer and use it in GitHub Desktop.
F5 how color text and blockquote work

Ok, I’ve added them to the style. You can use them with the names

  • yellowcopy
  • tealcopy
  • bluecopy
  • pinkcopy
  • greencopy
  • redcopy

That works by adding these names in the class attribute. Your html tag might already have a tag and look like

<div class='main-body-copy'> My header …

So for that, you’d just put a space and then the color you want

<div class='main-body-copy teal copy'> My Header …

If it doesn’t have a class already, you can just add the attribute altogether. So

<div> my text ..

becomes

<div class='tealcopy'> my text …

I made the styles really aggressive so when you add them, they should make everything inside the same color pretty forcefully. So it should be able to override the default wherever specified. If you want to add color to just one word in a paragraph but not change anything else, can you use the SPAN tag and wrap it like

This is some <span class='tealcopy'>amazing</span> text!

Blockquotes

I also added blockquote formatting. You can use it by just wrapping some text in the tag

<blockquote>Here is a quote or block of text</blockquote>

I used it on this page http://function5fitness.com/muaythaiclasses if you want an example. It helps you break blocks of text up so it has better readability.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment