GithubHelp home page GithubHelp logo

alistapart / pattern-library Goto Github PK

View Code? Open in Web Editor NEW
328.0 31.0 42.0 529 KB

The ALA Pattern Library.

Home Page: http://patterns.alistapart.com/

License: MIT License

CSS 18.39% PHP 24.97% JavaScript 5.50% HTML 51.14%

pattern-library's Introduction

pattern-library

The ALA Pattern Library.

Contribution Guide

Let’s build stuff, you guys.

Getting Started

Running the Project

We're using Node.js, NPM (Node Package Manager), and Grunt.js to manage the code in this repo. To preview code locally, you'll need to install Node and NPM, then run the following commands from a terminal window, in the repo directory:

$ npm install
$ grunt

Those commands do the following:

  • npm install will install the necessary node.js packages to develop on this project
  • grunt will run a series of tasks defined in gruntfile.js, such as concatenating or minifying CSS and JavaScript, and copying relevant production files to the dist directory.

Once run, you can preview the site by pointing a web server at the dist directory (see below).

We have set up a watch task to automatically rebuild the dist files whenever files are changed. When you start working, just run the following commands to run all tasks and then start the watch task:

$ grunt && grunt watch

Setting up Your Dev Environment

Using MAMP or Apache or what-have-you, you’ll want to create a virtualhost that points at […]/pattern-library/dist/. Now you can edit files in the tmpl directory, and the grunt watch task will automatically rebuild dist as you go—giving you a preview of the site as it will appear in the wild, minified and concatenated assets and all.

Adding Patterns

All patterns are separate HTML files that live in /patterns. Ideally, the file name should be the same as the pattern's main class name. Add a file to see it in the library.

If you'd like to add usage notes to a pattern, add a .txt file with the same name as the .html file and it'll get pulled into the right place.

Reporting Issues

If you encounter a bug, please report it in the issue tracker. Before opening a new issue, have a quick look to see whether a similar issue already has already been reported—if so, better to comment on that thread.

When submitting an issue, do your best to include the following:

  1. Issue description
  2. Steps to reproduce
  3. Platform/browser (including version, if possible) and devices tested

Feature Requests

If you have an idea for a new feature or a suggestion how to improve an existing feature, let us know! Open a new issue to describe your request.

Submitting

When submitting a pull request for review there are a few important steps you can take to ensure that it gets reviewed quickly and increase the chances that it will be merged (in order of descending importance):

  1. Try to limit the scope to one issue or feature
  2. Small focused commits, ideally less than 10 to 20 lines
  3. Avoid merge commits (see the section on “rebasing” below)
  4. Use descriptive commit messages

Rebasing

Often times when working on a feature or bug fix branch it's useful to pull in the latest from the parent branch. If you're doing this before submitting a pull request it's best to use git's rebase to apply your commits onto the latest from the parent branch. For example, working on new-feature branch where upstream is the remote at [email protected]:alistapart/pattern-library.git:

git checkout new-feature
git pull --rebase upstream master
## You may have to resolve some conflicts here.

You can now push to your own fork to both update it and add your commit(s), then submit your pull request. Keep in mind that it’s only a good idea to do this if you haven't already submitted a pull request, unless you want to create a new one. Have a look at Pro Git’s chapter on rebasing to learn more.

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

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.

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

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)

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;

Integrate microformats 2

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

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?

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.