Git Product home page Git Product logo

pattern-library's Introduction

A List Apart

We dipped our collective toes in the GitHub waters when we open-sourced our embeddable comments script last year. We’ve got much bigger things underway now: we’re open-sourcing the code that powers alistapart.com.

Contributing to an open-source project can be tough, and it can take time to get the hang of things. We want to help with that. If you’re inexperienced with GitHub, our goal is to provide you with a great place to send your first-ever pull requests—to help you get comfortable contributing to a large open-source effort, participating in issue threads, and reviewing code.

Contributing

We’re currently using ExpressionEngine, which makes it tricky to clone the repo and run the site locally—at least, with this first incarnation of the repo. We’re exploring ways to make that better.

For right now, we’d love to have your eyes on our dev site, which directly mirrors our dev branch. Don’t hesitate to file a new issue or join us in the issue tracker if anything catches your eye.

By joining our conversations as we weigh the pros and cons of certain approaches, you’ll be better armed to make the same decisions on your own projects. If you’re already well-versed in the ways of GitHub we’d love to have your eyes on how we’ll be doing things over the next few weeks, and your help building a welcoming, low-pressure place to learn the ins and outs of contributing to an open source project.

Deployment status from dploy.io

pattern-library's People

Contributors

aarongustafson avatar benedfit avatar maban avatar murtaugh avatar snyk-bot avatar vinspee avatar wilto avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pattern-library's Issues

Integrate microformats 2

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

Results of Chrome Accessibility Audit

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>​

Link to repo

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.

Edit CSS in only one place

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?

Base css for apart structure

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;

Navigation missing for users w/ viewports smaller than 610px

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.

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

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.