Just a question, I see that there are two examples for GitHub: http://styleguides.io/examples.html

They're both all part of their "styleguide", based on the URL: https://github.com/styleguide which includes CSS, JavaScript & Ruby coding guidelines, as well as a short section on HTML & Templates.

So should we not just have one example, pointing to: https://github.com/styleguide

The reason I ask, is that I was going to add their Mobile Web styleguide to the examples: https://github.com/styleguide/mobile but it's really just a section/part of the whole thing.

On the examples page, it might be useful if the default order was alphabetical to allow easier browsing/finding of examples based on known name (e.g. if a user is looking for the IBM Design Language example they know it comes under 'I')

Seems like Jekyll does allow for this - http://www.leveluplunch.com/blog/2014/04/03/sort-pages-by-title-filter-array-by-layout-jekyllrb/

Lazy loading Enhancement

Now there's a lot more images on the examples page it would be a good idea to lazy load (or have a smarter way of loading) a large amount of images.

It would be nice to start collecting the images for all the other resources but it's probably going to get slow.

Curious what the difference between examples and guides is?

I think it's hard to separate visual style guides, code style, brand guides, copywriting guides, and pattern libraries in practice. For me, there's more overlap than separation (on the web). I tend to just call everything "patterns" and mush them together so it's central.

RSCSS

Reasonable Stardard* for CSS Stylesheet Structure.
https://github.com/rstacruz/rscss

Can this be made a thing? Probably a good idea to do sooner rather than later.

:: curtsies ::

Styleguides.io has been nominated to .net awards nomination. Vote!! https://thenetawards.com/vote/collaboration/styleguides-io/

Wondering if it would be provide some clarity if we renamed the "frontend" tag to "ui". "Frontend" could easily be misconstrued for "code". For example, Harry's CSS Guidelines was tagged with both "frontend" and "code", when in fact it deals purely with code semantics.

Definitely don't want to be that guy, but it's probably a good idea to clarify this stuff while we're still early on.

Should be a quick fix, but maintainers should decide on one. Docs say “branding”, so I assume this is the preferred one?

Unfortunately, Heroku appears to have locked down their style guide for internal use only. https://purple.herokuapp.com/ authorizes with a Google account and yields the following response for me:

{"statusCode":401,"error":"Unauthorized","message":"Our apologies, but this page is restricted to heroku.com members only."}

😐

I really like how the a11yproject.com displays a list of contributors on their site, makes it feel more like a community-driven effort.

What are your thoughts on adding something like that to this project? There is a jQuery plugin I can add to display contributors in the footer. I'm unsure about adding jQuery to the project for this plugin though. The plugin requires jQuery's getJSON method to call github's API.

I know it's a silly issue, but there it is, at the bottom of the page ;)

I'd love to see if others are interested in "open in new tab" being the default behavior of clicking the external links on the home page.

This will allow people to jump into the linked documentation of each design system without having to scroll through the tons of pages in their history to find the styleguides site again.

Sure, chrome could help us out by automatically grouping history by url, but that's probably not gonna happen soon.

Thanks for this awesome website. But one thing that I do miss here is the ability to search resources, articles, examples etc..

On the 'example' section where it mentions available tags - https://github.com/maban/styleguides/tree/gh-pages/_resourceexample#tags - the following are listed;

You can add optional tags to a resource, but they must be from one of the following existing tags:

branding
frontend
backend
voiceandtone
writing
designlanguage
code
patterns

The current 'examples page on the site - http://styleguides.io/examples - shows additional tags to these ^ e.g.

brand

rather then;

branding

Does the list on the github page require updating to include the additional tags, or do the examples not tagged using tags from the original list require tidying up? 🤔

In scottish-government.md URL should be changed to:
http://resources.mygov.scot/standards/design-style/

Tried to clone the repository, but couldn't checkout the tree (when using a Linux desktop).
Problem is caused by the painfully long filename for the Apple Watch Human Interface Guidelines.

• /images/screenshots/ https_developer.apple.com_library_prerelease_ios_documentation_UserExperience_Conceptual_WatchHumanInterfaceGuidelines_index.html_apple_ref_doc_uid_TP40014992-CH3-SW1.jpg

Terminal output

$ git clone https://github.com/maban/styleguides.git 

Cloning into 'styleguides'...
remote: Counting objects: 6657, done.
remote: Compressing objects: 100% (55/55), done.
remote: Total 6657 (delta 36), reused 34 (delta 17), pack-reused 6585
Receiving objects: 100% (6657/6657), 32.24 MiB | 10.11 MiB/s, done.
Resolving deltas: 100% (3536/3536), done.
error: unable to create file images/screenshots/https_developer.apple.com_library_prerelease_ios_documentation_UserExperience_Conceptual_WatchHumanInterfaceGuidelines_index.html_apple_ref_doc_uid_TP40014992-CH3-SW1.jpg: File name too long
fatal: unable to checkout working tree
warning: Clone succeeded, but checkout failed.
You can inspect what was checked out with 'git status'
and retry the checkout with 'git checkout -f HEAD'

Software versions

$ git --version
git version 2.11.0

Solution

• Use another operating system to rename the file.
• Commit the changed file to the repository.
• Allow others to checkout the repository so they could contribute.

safari, Twitter, and chrome. Even Pocket view.

Perhaps a lo-fi fix could be to update the READMEs to suggest all titles to be wrapped in quotes?

Was peeking at the images being uploaded and spotted a few +75 KB images. Think we need some standards sooner rather than later because 50 images x 50 KB = 2.5 MB page. Kind of blows jQuery out of the water if these aren't being optimized well.

I'm thinking 600x400 can cover up to 1920px wide screens at 1:1 pixel ratio, while doubling up for smaller hi-res screens. Most of the screenshots can be 8-bit PNGs so they'll take optimization very well.

Also, we could modify the grid to 4-per-row on giant screens, and use 400x300 (Dribbble-style) for less bandwidth yet. Any thoughts?

Looks like they have a new website focused on their brand that's fairly detailed

Brand in General
https://scoutingwire.org/bsa-brand-center/

Brand Identity in Particular
https://scoutingwire.org/bsa-brand-center/brand-identity/

For design systems-focussed conferences and meet-ups!

When filters are triggered, the layout often breaks onto separate lines. This has to do with the clear: left rules applied to the grid, such as .resource:nth-child(4n+1) { clear: left; }.

Perhaps a solution could be to use flexbox and flex-wrap? That would fix the issue and would also give us the bonus of being able to set the height of each .resource in a row to be the same height.

Hey All,
First of all, thanks for setting this up! I'm just now getting in front of my computer after wrapping up a few obligations, so thanks for doing all the groundwork. The site looks great already!

As for where this should live, I think it would be a great idea to get a dedicated domain for this resource. Hosting on Github can be weird URL-wise, and living on any one person's site could sell it short. So yeah, do you all have any suggestions for domains?

Domains like styleguid.es, webstyleguides.com, etc are taken. Generally-speaking, a reasonably self-explanatory domain would be nice. styleguides.io seems to be available. Any other suggestions?

I noticed when I added my SmashingConf talk to the talk list that a lot of them aren't showing the titles or the footer by and conf info. I didn't have time to look into it today, but am leaving this here for a reminder to take a closer look.

Over the Christmas break, I'm going to dedicate some time to enhancing styleguides.io. Is there anything you'd like me to work on in particular?

Hi,

It's very confusing to mess up Frameworks, Starting templates and Tools in one section. Currently first five projects in this section are not Tools - Barebones, Bootstrap, Foundation etc. Also Style Tyles that is an approach, not a tool, must be listed in the direffent section.

Let discuss additional section names for those items, that doesn't fit for Tools group.

Hey all!

Love this resource <3!

I was wondering if there was any thought in adding a recently added section to the site so people that 'dip in' once in a while (myself, but there could be other) can see what's been updated.

I'm not sure how automated you could make this however.

What I'll do is fork the repo and see if it's possible - and I'll try and PR a change to add something - if that's cool with y'all.

<3 great stuff!

Hi!
I just discovered this repo 3 minutes ago on Twitter, I have been doing the same, compiling resources/tools/examples for creating CSS Guidelines on https://github.com/montogeek/guidelines.

I think some of the links can be added to this resources repo. If so, can I add all the links that are missing here?

Thank you!

I have a ton of examples of brand style guides. While they're a bit deeper in scope than web style guides, do you think it's a good idea to include these into the mix? Again, the lines can be a bit gray, but I personally think it would be helpful to round these up as well.

Hi

A quick accessibility fix for you good people:

_layouts page.html needs a lang attribute to meet the WCAG 2.0 "Language Of A Page" requirement.

Keep up the good work :)

Not sure if it's lack of GPU-enabled rendering or what, but if I hover over any of the resource module boxes (each li.resource) there is a distinct lag before the scale transform kicks in and the content of every

It would be great to update the hash in the URL (i.e. styleguides.io/examples.html#branding) so that we can link to a particular flavor of style guide.

Without looking at the logic, I think this would require having each filter be mutually exclusive. As in, you wouldn't be able to search for branding+code, but I don't see that as being a core use case any way. Being able to filter and see all branding or all code style guides would be more of a primary use case.

There seem to be a few Style Guide related Twitter accounts around e.g.

https://twitter.com/guardianstyle
https://twitter.com/styleguide
https://twitter.com/tnwstyle

Would be useful to have a section on the site to capture these and any other Style Guide related social media accounts (e.g. https://www.pinterest.com/explore/style-guides/)

Hej,

styleguides.io is a great ressource and I like what you're doing.
What attracted my attention right away was the Recommended tag. In my opinion the wording is a little bit unfortunate, because I guess all links are recommended otherwise they wouldn't be on the site, right?

How about renaming it to "Favourite", "Staff Favourite", "Special", "Extra", "Noteworthy" or something along those lines?

Anyway, thanks for your time and effort. Just a suggestion. :)

Cheers,
Martin

There are now a lot of resources, so I've been adding status: recommended to the YAML front-matter on resources I want to highlight. This should make it easier for people who are looking for just a few good examples to look at. It's a bit biased just me doing it, and there are a few links I haven't had time to look at properly, particularly the talks, so please add the 'recommended' tag if you're familiar with them and think they deserve highlighting.

Personally, I'm right on the fence between styleguide or style guide? Wonder if we might discuss that.

I like concatenated phrases because it becomes a thing, but I'd never write brandguide so I kind of lean the other way.

So I ran into this a lot on This Is Responsive. A lot of people want to help, but find tools like Github confusing and intimidating (and I can't say I blame them).

I'd like to set up a Wufoo form so that people can submit resources without having to go through Github. I'm happy to monitor the submissions (in my experience it's certainly not a firehouse) and add them to the pile. It's just a nice way to be more inclusive for non-technical folks who want to help the cause.

...despite that these things exist in the YAML front matter. They're easy to spot because they're the first few entries after the recommended ones.

I tried to fix it and submit a PR but couldn't figure it out. I was thinking the problem was colons/commas in the titles, but I tried a few escaping filters on the template tags in loop_articles.html and none of them worked. I tried escape, escape_once, markdownify and xml_escape.

The list of tools is excellent, but big, and most of them are untagged, making filtering relatively useless.

I've recently been going through the process of selecting tooling for a style guide where I had some specific requirements. Based on that I thought tagging tools based on the following would be useful (some already exist):

• Tool type: Framework (e.g. Bootstrap or Foundation) / Generator
• Runtime: PHP / Ruby / Node / etc.
• CSS Preprocessort: LESS / SASS / SCSS
• Template languages or frameworks: HTML / HAML / Handlebars / React / Angular / Custom(?) / Comments (e.g. KSS)
• Can it generate a static site? Static

I'm happy to put some work into updating the tags if there's agreement on how a better way to tag the tools. Applying some tags based on the generator list at https://github.com/davidhund/styleguide-generators seems like a good place to start.

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?

I was linked to http://styleguides.maban.co.uk/ from today's Sidebar email newsletter. It gave me a 404. I did some digging and found this repository and thought you might like to know.

Clicking on the filters a few times will break the filtering functionality. It looks like the data-toggle="off" persists and is causing issues.