Example Tagging

[bradfrost]

Before sinking my teeth in and committing a whole shitload of examples, I think it would be a good idea to get a taxonomy established to classify them. With the current infrastructure, is tagging possible? Tagging would be ideal since many style guides often incorporate multiple categories (some are both component libraries and coding guidelines, others are branding and writing documents, and so on).

I'm thinking a general list of tags can help people filter through the resources to hone in on examples that feature the things they're looking for. A proposed initial list of tags:

• #branding
• #frontend
• #voiceandtone
• #writing
• #designlanguage
• #code

Thoughts? Level of effort?

[brendanfalkowski]

Right on, that's what I was trying to get at here: #8 (comment)

Could we just do a YAML list like this?

---
title: Frodo
link: http://bagend.com
tags:
 - branding
 - writing
---

Then drop those tags into a data-tags attribute on the card? Just a little JS needed to filter visibility of cards without one active tag.

Might be annoying enforcing the defined tags, but with a good start I think people will play along if the READMEs are clear.

[bradfrost]

@brendanfalkowski ah yeah, that would be great! I'm not totally familiar with YAML so your code example is really helpful. I'll go through and populate the tags for the examples and start seeding more.

[brendanfalkowski]

@bradfrost That's how YAML works in Statamic — pretty sure Jekyll can parse the same. Looks about equivalent: http://stackoverflow.com/questions/23773873/jekyll-tag-list-on-a-page

Actually like this list format more (haven't seen that before):

tags: [branding, writing]

Maybe try with a handful before tagging them all?

[bradfrost]

Alright, I've dropped in the tagging to _includes/examples.html. Right now the tags aren't doing anything, but I've added the appropriate tags to all the recommended examples.

[bjankord]

+1, I like this list, helps add clarity to question, what is a style guide?

[maban]

I'll get the tags doing something cool in Jekyll soon.

[maban]

I've merged all the examples and guides together, so now they're just examples. I've also added an extra tag called "patterns", based on Brad's blog post. That'll help people find the pattern libraries from the code standards style guides.

[bradfrost]

Ah whoops! I should have read this before creating #39

[brendanfalkowski]

Updated the tag style a bit so it doesn't look like description text.

Also, I used a #backend tag for my Gravity Department example because I have a style guide for PHP code. I know a few other places these exist. Pretty sure that's worth documenting, no?

[bradfrost]

The tag styles look great! And yeah, if we're keeping the 'frontend' tag in there, I suppose backend makes sense. I thought 'frontend' was replaced by 'patterns' so frontend would be retired, but it does work in the context that's on the site now. I'm fine keeping it if you all are.

[brendanfalkowski]

Technically "code" (frontend or backend) + "ui" would cover all three cases. Not sure if others would find it useful to have "backend" code guides separated from "frontend". They're all in one place for most code guides.

[maban]

@brendanfalkowski: You're on fire! The tags look great! I'll make them links on Friday so people can filter examples by tag.

I think a backend tag is useful, definitely.

[susanjrobertson]

really like these!

[bradfrost]

Yeah these are great. One of the things we'll want to make sure with the tagging functionality is that the URL is updated so that we can link to a specific flavor of styleguide. Not sure how hard that is, but maybe that's something I can help out with.

[brendanfalkowski]

So...wanted to add tag filtering a while ago. Check this out: http://styleguides.io/examples.html

Think we could expand the use of tagging to cover #85.

It's only implemented on that one page, and it's a little manual to configure but should be adaptable to use in single/multiple instances on page. Needs a bit of styling love, but it works well enough as-is because you can stack tags to narrow down.

From a UX standpoint, it'd be nicer to have each button behave as a toggle so the reset button isn't really needed, but I want sleep now.

Here's the CodePen I used for testing if you want to hack away: http://codepen.io/brendanfalkowski/pen/QwdKMK

Yay prototyping! Let me know what you think.

[maban]

OMG! this is brilliant! I've been trying to do this for ages on another
repo and this works exactly how I'd been trying to do it. You're amazing!

On 8 January 2015 at 08:33, Brendan Falkowski [email protected]
wrote:

So...wanted to add tag filtering a while ago. Check this out:
http://styleguides.io/examples.html

Think we could expand the use of tagging to cover #85
#85.

It's only implemented on that one page, and it's a little manual to
configure but should be adaptable to use in single/multiple instances on
page. Needs a bit of styling love, but it works well enough as-is because
you can stack tags to narrow down.

From a UX standpoint, it'd be nicer to have each button behave as a toggle
so the reset button isn't really needed, but I want sleep now.

Here's the CodePen I used for testing if you want to hack away:
http://codepen.io/brendanfalkowski/pen/QwdKMK

Yay prototyping! Let me know what you think.

—
Reply to this email directly or view it on GitHub
#27 (comment).

[bradfrost]

Sexy! Get it in there! hahaha

[susanjrobertson]

AWESEOME! 👍