alistapart / pattern-library Goto Github PK

The seminal AListApart.com favicon appears to be missing...

If it's of interest I ran the Chrome Accessibility Developer Tools Audit (https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en) against the patterns and got the following. Happy to help fix any if wanted

[Severe] Controls and media elements should have labels (1)

Pattern library specific issue

<select name=​"section" id=​"pattern-select" class=​"nav-section-select">​…​</select>​

[Warning] Meaningful images should not be used in element backgrounds (1)

<label class=​"submit-search" for=​"submit-search">​…​</label>​

[Warning] Text elements should have a reasonable contrast ratio (18)

<a href=​"https:​/​/​etherpad.mozilla.org/​ep/​pad/​view/​ro.gtMA3Rr4lYIam9OU/​latest">​https://etherpad.mozilla.org​</a>​

These are from prism.js

<span class=​"token selector">​html ​</span>​
<span class=​"token punctuation">​{​</span>​
<span class=​"token punctuation">​:​</span>
<span class=​"token punctuation">​;​</span>​
<span class=​"token punctuation">​}​</span>​
<span class=​"token selector">​p ​</span>​
<span class=​"token punctuation">​{​</span>​
<span class=​"token punctuation">​:​</span>​
<span class=​"token punctuation">​;​</span>​
<span class=​"token punctuation">​}​</span>​

<a href=​"#" class=​"embed-link">​Embed​</a>​
<h1 class=​"deadly-subtitle">​For people who make websites.​</h1>​
<a href=​"/​issue/​386" class=​"issue-number">​…​</a>​
<span>​Issue №​</span>​
<time class=​"pubdate updated" datetime=​"2014-01-02T08:​00:​37-05:​00">​January 02, 2014​</time>​
<a class=​"issue-number" href=​"/​issue/​388">​…​</a>​
<span>​Issue №​</span>​

[Warning] These elements are focusable but either invisible or obscured by another element (6)

<a class=​"photo" href=​"/​author/​shorton">​…​</a>​
<a class=​"photo" href=​"/​author/​whitneyq">​…​</a>​
<a class=​"photo" href=​"/​author/​mikepick">​…​</a>​
<a href=​"http:​/​/​www.webydo.com/​?utm_source=deck&utm_medium=cpc&utm_content=faceviking&utm_campaign=a">​…​</a>​
<a href=​"http:​/​/​www.thoughtworks.com/​continuous-integration?utm_campaign=snap-beta&utm_medium=cpm&utm_source=the-deck&utm_content=ci-loops">​…​</a>​
<a href=​"https:​/​/​www.atlassian.com/​git?utm_source=the-deck&utm_medium=banner&utm_content=learn-the-basics-workflow&utm_campaign=git-microsite">​…​</a>​

Hey guys,

is it possible, that you could provide a base css file for the structure of your patternlib.?The ala-main.css is to specific for your porpuses imho:

e.g.
font: 400 18px/30px "Georgia Pro",georgia,serif;

Committing a dist directory is a recipe for merge conflicts. We’ll stick with _tmpl in the repo, and build dist locally.

I can’t see a link to this repo from the pattern library itself, but I think it might be useful for devs in the future.

Could this and the main site repo be set up in such a way that all CSS edits only need to be done in one place?

@Wilto @maban Should we hook the pattern library repo up to the commits twitter account?

Once the viewport is smaller than or equal to 610px, navigation to quickly navigate through the wonderful pattern library is missing.

This was confirmed on both an iPhone 4s and through a viewport inspection using Chrome's Dev Tools.

A screenshot verifying this behavior on a desktop emulating the viewports range affected:

A screenshot of the behavior on an iPhone 4s (Safari)

Spotted this strange highlighting bug from Chrome 33.0.1750.117:

Just wanted to check if anyone is working on integrating microformats 2? And if not, do you want me too?