npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@codeforamerica/style

v5.0.1

Published

Code for America's Styleguide. http://v4.style.codeforamerica.org

Downloads

328

Readme

Code for America's Style Guide

======

  • Current stable version: 4 (release-2 tag / linkable url)
  • Previous release (unsupported): 3 (master branch / linkable url)

The style guide serves as the base CSS and organizing styles for www.codeforamerica.org. The style guide is primarily a living pattern library that explains how to use our CSS to build websites. It contains:

  • A Jekyll site that serves as a living style guide and pattern library
  • A foundational CSS structure built with Sass
  • A grid-based layout system using Bourbon and Neat
  • Basic web typography
  • Code for America specific page templates
  • Polyfills that help older versions of IE support HTML5 elements, pseudoclasses, media queries, and rem units.
  • Additional vendor JavaScript to help with interactions

History and past versions

Code for America's communications and tech teams originally worked with Brighton web design firm Clearleft and Colorado branding firm Dojo4 to create a new visual design and front-end for the Code for America website. This original pattern library existed through three major releases before being retired in favor of the current trimmed-down style guide in this repo that is solely focused on providing patterns for building www.codeforamerica.org. See the original pattern library repository.

How to use it to build websites

  1. Read the docs. Complete documentation of the pattern library with copy-and-pastable code snippets is available at https://v4.style.codeforamerica.org.
  2. Add links to your document. For example, add these links to your <head> tag:
<head>
  ...
  <!-- Pattern Library Stylesheets -->
  <link rel="stylesheet" type="text/css" href="https://v4.style.codeforamerica.org/css/main.css">
  <!-- Font Vendor Stylesheets -->
  <script src="https://use.typekit.net/lkd6vsz.js"></script>
  <script>try{Typekit.load({ async: true });}catch(e){}</script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <!-- Shims For Old Browsers -->
  <!--[if lt IE 9]>
    <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="https://s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
    <script src="/js/selectivizr-min-1.0.2.js"></script>
    <![endif]-->
  ...
</head>

And add the following after all the content in your <body> tag:

<body>
  ...other content...
  <!-- SCRIPTS -->
  <script src="https://v4.style.codeforamerica.org/js/jquery-1.11.2.min.js"></script>
  <script src="https://v4.style.codeforamerica.org/js/site.js"></script>
</body>

Develop locally

Prerequisites

Jekyll is a static site generator built with Ruby that needs the following to run:

Basic steps to get up and running

First, you need the prerequisites listed above. This starter requires Jekyll to be installed in order to build and preview. To install Jekyll, clone the repo, cd into the folder, and run bundle install:

$ git clone https://github.com/codeforamerica/style-guide.git
$ cd style-guide
$ bundle install

Running Locally

To preview the site locally, use the Jekyll command:

$ bundle exec jekyll serve

The site should be viewable at localhost:4000. The styleguide is located at 'localhost:4000/styleguide'.

Contributing

We welcome bugs, questions and suggestions in the form of issues, or features and code fixes in the form of a pull request.

Submitting a Pull Request

  1. Fork the project.
  2. Create a topic branch (name it something verb-y, like fix-layout-padding).
  3. Make your changes, and commit with descriptive commit messages.
  4. Push your changes.
  5. Submit a pull request.

Submitting an Issue

We use the GitHub issue tracker to track bugs and features. Before submitting a bug report or feature request, check to make sure it hasn't already been submitted. When submitting a bug report, please include a screenshot and any additional details that can help us debug, such as your operating system and browser version.

License

Copyright (c) 2009-2015 Code for America. See the LICENSE for details.