Flint and Feather · The licence

Mohawk’s Printer for Grand River

How to use it

The open sets are anyone’s to use, with credit. Here is everything needed to put a mark on a page or in a document.

Download the open sets
One file, 2223 kB: the style sheet, the fonts, the names, the licence, and a read-me.

Start here

Three steps. After these, everything else on this page is a word added to the third.

1. Bring the style sheet. One line in the head of the page. A browser then fetches only the sets that page uses. On the Nation’s own sites the Register does this for you.

   <link rel="stylesheet" href="flint-and-feather/ff.css">

2. Write a mark. Two words in class: ff, which says “this is a mark”, and the mark’s name with ff- before it.

   <i class="ff ff-canoe" aria-hidden="true"></i>

3. Add options. An option is one more word in the same class, with a space between. Add as many as you like; their order does not matter.

   <i class="ff ff-canoe ff-2x ff-flip"></i>

   ff	this is a mark
   ff-canoe	which mark
   ff-2x	an option: twice the size
   ff-flip	an option: mirrored

Which mark

The name is the mark’s name in the gallery, with ff- before it and a hyphen for each space. Tap any mark in the gallery to copy its line.

Flint or feather

Every mark is drawn two ways: in flint, solid, and in feather, in line. Flint is what you get. For feather add ff-feather.

To set every mark in one part of a page in feather, put ff-in-feather on what holds them:

<nav class="ff-in-feather"> … every mark in here is in feather … </nav>

Colour and size come from the words

A mark is set like a letter: it takes the colour and the size of the words it sits in. To change either, change the words.

<span style="color:#7A5F22; font-size:22px">
  <i class="ff ff-fire"></i> The council fire
</span>

Sizes

When a mark should be larger or smaller than its words, add one of these. Each is shown here beside the same word.

In a list

ff-ul on the list and ff-li on each mark put a mark where the bullet would be, all one width, so the words line up.

<ul class="ff-ul">
  <li><i class="ff ff-li ff-turtle"></i>The turtle</li>
  <li><i class="ff ff-li ff-fire"></i>The fire</li>
  <li><i class="ff ff-li ff-trillium"></i>The trillium</li>
</ul>

• The turtle
• The fire
• The trillium

In a column that is not a list, ff-fw alone gives every mark the one width.

Mirrored

Any mark can be shown the other way about. Nothing moves; it is simply turned over.

Turned

By a quarter, a half, three quarters — or by any angle you give.

<i class="ff ff-canoe ff-rotate-by"
   style="--ff-rotate-angle:20deg"></i>

Moving

Add one of these and the mark moves. Use movement sparingly: for something loading, something new, something that wants attention. Every movement stops for a reader who has asked their device for less motion.

ff-flip is the still mirror; the flip that moves is ff-flipping. ff-drum is two beats, the second softer, and a rest. ff-flicker is a fire leaning, lifting and dimming.

Changing how it moves

A movement has settings. A setting is written inside style="…" on the mark: its name, a colon, its value. Two settings are parted by a semicolon. Put the same style on what holds several marks and it sets them all.

<i class="ff ff-heart ff-beat"
   style="--ff-animation-duration:3s"></i>

<i class="ff ff-heart ff-beat"
   style="--ff-animation-delay:2s"></i>

<i class="ff ff-bell ff-shake"
   style="--ff-animation-iteration-count:3"></i>

<i class="ff ff-heart ff-beat"
   style="--ff-beat-scale:1.6"></i>

<i class="ff ff-fire ff-fade"
   style="--ff-fade-opacity:.1"></i>

<i class="ff ff-turtle ff-bounce"
   style="--ff-bounce-height:-1em"></i>

<i class="ff ff-canoe ff-flipping"
   style="--ff-flip-x:1; --ff-flip-y:0"></i>

<i class="ff ff-water-drum ff-drum"
   style="--ff-drum-scale:1.5"></i>

<p style="--ff-animation-duration:4s">
  <i class="ff ff-spinner ff-spin"></i>
  <i class="ff ff-heart ff-beat"></i>
</p>

Every setting

Putting options together

Options stack. These are whole lines you can copy.

<button>
  <i class="ff ff-canoe ff-fw" aria-hidden="true"></i> Book a crossing
</button>

<p><i class="ff ff-spinner ff-spin" aria-hidden="true"></i> Loading the Register…</p>

<i class="ff ff-feather ff-wolf ff-3x ff-flip"></i>

<h3><i class="ff ff-fire ff-flicker" aria-hidden="true"></i> The council fire</h3>

For a reader who cannot see it

A mark beside its words is ornament: hide it from a screen reader with aria-hidden="true". A mark that stands alone needs words of its own, kept for screen readers with ff-sr.

<i class="ff ff-wolf" aria-hidden="true"></i> Wolf clan

<button>
  <i class="ff ff-trash" aria-hidden="true"></i>
  <span class="ff-sr">Delete</span>
</button>

In a document or a design

Install the two fonts on your computer, choose one, and type a mark’s name: wolf, canoe, black widow. The name becomes the mark. The fonts are in the download, in the folder fonts.

The credit, and going without it

Give the credit once, where a reader can find it:

Flint and Feather, the icon library of the Mohawk Nation of Grand River. Copyright Mohawk’s Printer for Grand River. Used under the Flint and Feather Licence 1.0.

To use the marks without the credit line, in print, and to have the source drawings, there is the Contributor’s Grant.