dosomething / forge

🎨 The DoSomething.org pattern library.

Forge

This is Forge, our interface framework and pattern library. It defines a set of base styles and common patterns shared throughout our website. It's a strong foundation for building beautiful interfaces.

Forge was built for our internal needs at DoSomething.org, but it could also work for your organization. Feel free to fork this repository and use it as a starting point for your own pattern library, or read more about why we open-source our code.

Usage

You can get your own copy of Forge using NPM:

npm install @dosomething/forge

Include the bundled dist/forge.css and dist/forge.js in your page. Be sure to include jQuery 1.11+ and the bundled Modernizr build dist/modernizr.js. That's it! Check out the online pattern library and start building.

Forge supports Chrome 46+, Firefox 42+, Safari 8+, Android 4+, iOS 8+, and Internet Explorer 8+ (with polyfills). For IE 8 support, you'll need to include HTML5Shiv and Respond.js.

Local Development

You can also run the pattern library on your local machine! Here's the steps:

1. Fork & clone this repository.
2. Run npm install to configure dependencies.
3. Run npm start to build assets, watch for changes, and run styleguide server.
4. Check it out at localhost:3000 in your browser!

License

©2016 DoSomething.org. Forge is free software, and may be redistributed under the terms specified in the LICENSE file. The name and logo for DoSomething.org are trademarks of Do Something, Inc and may not be used without permission.

forge's Issues

Semantic grid

We're looking into using SCSS mix-ins to form a semantic grid (a la Bourbon Neat) to better separate presentation from markup.

Grunt plug-ins missing from NPM configuration file

Grunt is throwing an error when called due to a handful of missing plug-ins added when the build process was updated.

Update Colors

Color variables should be updated to match new branding.

PushState for Modals

Modals should support loading in content two different ways:

1. Load in contents of a given URL via AJAX into a modal. If supported, update the page URL in the location bar and let the user hit the back button to get back to the original page. This should pass an X-PJAX header (or equivalent) to toggle whether containing layout is rendered or not.
2. Load in contents from a pre-loaded element in the page by ID in data-id attribute. (current behavior)

If both are specified, load the pre-loaded div contents and use pushState to update the canonical URL without an AJAX request. This lets us "fake" loading the real page so the user can just copy the location in the address bar if they want to bookmark or share the link.

Port Updated Branding

After the re-branding effort is concluded Neue's default styles will need to be updated to reflect the changes.

Anticipated updates:

• multiple new typefaces
• updated colors

Target: January, 2014

Visible Layout Gutters

By applying padding to the wrapper the background image does not reach the outer edges of its container.

Current layout:

Modified layout:

Static Site Generator w/KSS?

If we still want to keep the generated documentation approach without needing a server there are a few ways to get up and running with Middleman.

http://www.stephentudor.com/blog/2012/01/10/kss-and-middleman.html
http://mikefowler.me/2013/10/14/static-styleguides-kss-node/

Standardize namespacing convention

Modules are currently namespaced with a double hyphen whereas the rest of the library uses single hyphens. In a more complicated system a double hyphen makes sense to namespacing, however, this library is simple enough that a single hyphen convention will do fine – even if it is not academically correct.

Small change. Anyone can take this one.

Feature lock D7.x

Locally install a copy of Neue DS to the Do Something 7.x site to prevent any development features from landing in the current "old world" production application.

Remove unused styles

Let's clean out any unused patterns in the Pattern Library when more of the design process is completed. Suggest any candidates by commenting below.

🐗

nav – text treatment on hover

Underline on hover feels unintentional and should be replaced with a different state indication.

Private fork of Neue no longer necessary

Merge mmwtsn/pattern-library upstream and delete. This will bring Neue DS up to date with the various font changes made downstream.

Update Ruby Version

Is there a reason why we're using an outdated version of Ruby (Heroku, Wercker, gem dependency, etc.)?

Custom bullet style

Keri's bullet style is smaller than the default style generated by most browsers. All list items with bullets should display using her style.

Coding standards for z-indexing

Mr. Watson suggested using increments of 100 to separate feature "layers", so we have some room to fiddle with things in between. We should revisit that at some arbitrary date in the future because it seems like a smart idea. 🍎

Clarify wrapper class names

Current classes of "with-copy" "full-width" and "page-width" work well in theory but can be confusing in practice. If possible, they should be clarified in the new Pattern Library.

Button Style Updates

Old styles should be removed. According to the mocks the following changes should be made:

• color: #fff;
• margin: 0.25rem 0;
• no gradient on hover

This list is likely not complete.

Documentation does not include relevant classes

Example: "wrapper" is missing form the documentation printed out at styleguide.dosomething.org/

16 Column Grid

Aligning our current campaign layout to a 12 column grid is not possible in a few key areas.

One solution would be to increase the column count in the system. More columns along with smaller gutter values would allow for us to work around Bourbon Neat's lack of support for page gutters by using a single column on either side of our main layout as gutters.

Here's a visualization of this system (note: the underlying mock has not been aligned):

Prevent build error if "dist" branch does not exist

If a "dist" branch cannot be found either locally or at origin the Grunt task will throw an error. This could theoretically be gated with something along these lines:

$ git branch -r | grep 'build'

Proxima Nova semi-bold naming

Font is not named correctly. Causing request to 404 and those font-weight assignments to fall back to Trebuchet. It appears to be a capitalization issue.

Form Validation

Based on prototype built earlier, create a validation library for Neue. This should allow us to create any validation functions we want, and specify a form to be checked against them using something like a data-validate attribute.

Add position:sticky polyfill for pin-to-top behavior

Replace existing pin-to-top code with a polyfill for position: sticky instead. We get the advantage of a native implementation on iOS/Safari and falls back to a JavaScript implementation otherwise.

Clean up old branding

Remove patterns that no longer make sense in the New World (old campaign widgets, etc.); remove old branding and replace with new branding wherever possible. 🔥

Build system

Set up a better build system. Should be cleaning everything up pre-tag and packaging up assets on a separate dist branch before tagging, so that we'll have nicely packaged assets both with and without Bower. This also allows us to have a sane dev environment without making compromises solely for the sake of cleaning up the distribution.

Firefox flexbox issue

Bourbon Neat doesn't support outer gutters

It appears that, out of the box, Bourbon Neat does not support gutters applied to the main layout region. This causes a few issues with out recent campaign designs.

Proposed solutions include:

• using a third party outer-container() mixin
• nesting the main layout element inside a wider element with a margin applied

Lyposuction (Remove Prototype Examples)

All non-essential example files should be broken out to slim down this repository. In-browser prototypes, in particular, do not belong in here.

Whatever technology or environment that makes sense for them should be used. Neue can be loaded via Bower.

Update Fonts for IE

We need to update the new typefaces with Internet Explorer-friendly versions at some point.

Highlight relevant nav. item on scroll

One of the feature branches has a bit of JavaScript to handle this functionality. It should be abstracted and included as it is useful for both the new campaign navigation and the Style Guide-style site.

Minification Only Upon Build

In order to avoid developing with minified CSS and JS files, we should target a build/ directory for release.

Mobile First!

Our breakpoints are desktop first. Let's get those reversed so that mobile grid columns are able to hit 100%.

Icomoon icons not showing up in Firefox

Certain icons in the Icomoon font are not rendering in Firefox:

Possibly related GitHub Issue

Visual grid is not showing mobile columns.

🐦

Missing compiled assets

Sinatra's default public directory is still pointing to "assets" rather than the new "dist" directory.

Add position: sticky polyfill

We should be using a position: sticky polyfill for native implementation of this pattern on iPhone/Safari.

Update Build Structure

As per last week's conversation with Desmond, we need to provide both the separate SCSS partials as well as the minified CSS. Proposed directory names: modules or partials and dist.

Abstract Carousel Logic

There is a image slideshow (carousel) in the Action Page's "Prove It" section. Right now the markup is hard-coded into the campaign template. It would be swell if that was generated automatically by the pattern library.

Suggested functionality:

1. Developer applies js-carousel class to wrapping container
2. prev and next buttons are automatically created and added to the DOM
3. Additional id and classes applied to the images as necessary

Rename package to neue

Any reason why we could not rename this repo/package to "neue" instead of "ds-neue"? Would this break the world?

Temporarily Remove Imagemin?

Imagemin has been hanging during the watch/compile process. I'm proposing that it's temporarily removed until the initial site build is complete.

Validation doesn't work with modal forms.

If the .js-validate labels don't exist in the form when the document is loaded, then the Validation code doesn't create the right label structure to show messages.

Wrapper doesn't wrap!

There is an overflow issue with the wrapper class if child elements are floated. This should do the trick:

.wrapper {
  overflow: hidden;
}

Soleil!

Soleil was approved during the final design rounds. We should replace Proxima Nova Bold for Soleil Bold.

http://www.myfonts.com/fonts/type-together/soleil/bold/

Update Typography

Typographic styles need to be ported form the Style Guide.

Pin-to-top shouldn't need to be initialized

We can probably just scan the page to find if there's a '.js-pin-to-top' and then only bind the scroll handler if that match is found.�

JQuery dependency update

We're currently requiring 1.10 in Neue, but presumably using 1.11 on the app. We should probably find out a minimum version number here, and require greater-than rather than specifying an exact version. 🏯

Navigation menu/footer display issue

Some crazy z-indexing business seems to be going on.

Grunt Deploy Dependency

grunt deploy should first call grunt prod to ensure that tests are run with the latest compiled code. Otherwise, an test suite error could prevent grunt deploy from executing if a local build has not happened since the last pull.

Feature lock styleguide.dosomething.org

Disable automated deployment to Heroku in Wercker to prevent internal branding updates from being released publicly.

Default Campaign Navigation Anchors to White

As Keri has control over this process and variable navigation colors were not in the spec the default should be white.

That said, we haven't talked about overrides yet. This is technically application specific. I'm leaning towards keeping this in paraneue_ds. Thoughts, @DFurnes?