cfpb / consumerfinance.gov

Django project protecting American consumers

consumerfinance.gov

The primary repository for consumerfinance.gov. This Django project includes the front-end assets and build tools, Jinja templates for front-end rendering, code to configure our CMS, Wagtail, and several standalone Django apps for specific parts of the site.

Documentation

Full documentation for this project is available in the docs/ directory and online.

Quickstart

This quickstart requires a working Docker Desktop installation and git:

• Clone the repository:

  git clone https://github.com/cfpb/consumerfinance.gov.git
  cd consumerfinance.gov

• One of the following runtimes:

  • Set up and run the Docker containers via docker-compose:

    docker-compose up

  • Set up and run the Docker containers via Kubernetes via Helm:

    ./build-images.sh && ./helm-install.sh

  if you see an error like:

  Error: Kubernetes cluster unreachable: Get "http://localhost:8080/version": dial tcp [::1]:8080: connect: connection refused
  

  then you need to activate Kubernetes in your docker desktop settings!

  This may take some time, as it will also load initial data and build the frontend.

consumerfinance.gov should now be available at http://localhost:8000.

Our documentation will be available at http://localhost:8888 (docker-compose only).

The Wagtail admin area will be available at http://localhost:8000/admin/, which you can log into with the credentials admin/admin.

Getting the package

Packages are tagged into one of three groups: main Branch -> latest, PRs -> pr-#, and Release -> major.minor.patch. The github SHA of the commit packaged should be listed as a label. To see our Docker image packages you can vist Packages page

Getting help

Use the issue tracker to follow the development conversation. If you find a bug not listed in the issue tracker, please file a bug report.

Getting involved

We welcome your feedback and contributions. See the contribution guidelines for more details.

Additionally, you may want to consider contributing to the Design System, which is the front-end pattern library used in this project.

Open source licensing info

1. TERMS
2. LICENSE
3. CFPB Source Code Policy

Credits and references

This project uses Design System as the basis of its user interface and layout components.

consumerfinance.gov's Issues

Press Resources design tweaks for the "Press Contacts" section

• I noticed that the headers on that page have 30px margins under them which is larger than the normal heading margin when they are headers for just text. Maybe we can call them .content_block-header or something and give them the 30px margins?
• The intro text "We are committed to engaging..." is in Georgia but it should be Avenir Regular. You can use the new .short-desc class to fix that.
  
• This looks like the first time we're actually collapsing some content.
  

Specificity & list-links

I noticed that the state border color changes on a .list_link within a .list__links list are being overridden, so a visited .list_link will have @pacific borders on mobile sizes. This seems to be due to specificity, since a dotted @pacific border is applied to .list__links .list_link. I can substitute .jump-link in my offices page instance, but I don't know if that will always be the case.

About > Doing business with us > Small, women-owned, and minority-owned businesses LINK NEEDED

PDF link -
http://files.consumerfinance.gov/f/201310_cfpb_omwi_opportunities_trifold_final.pdf

Remove instances of the demo_title block

@Scotchester I think the demo_title is no longer needed right? We should delete them from our templates.

Testing .custom-input

.custom-input testing: http://himedlooff.github.io/cfgov-refresh/blog_static/landing.html

Browsers

• Chrome (31)
• Safari (6,7)
• FF (28)
• IE11
• IE10
• IE9
• IE8
• IE7
• Opera (12)
• iOS (6,7)
• Android (4.4,4.3)
• Blackberry Bold 😃

Accessibility

• Keyboard friendly
• Screen reader friendly

Other

• Is useable without CSS
• Is useable without JS

Form field height

It'd be great if the topics and authors field box height to match the date range box height in the filter menu.

Perhaps they should match the default button height.

Should we automatically set a readable max-width on select elements?

Initial conversation is here: #147 (comment)

Some questions that come to mind are:

1. What elements would need to be targeted?

h1-6, p, ul

2. What approach should we take?

Target the elements directly?

h1-6, p, ul { max-width: @readable-max-width; }

Target the elements when inside of a class?

.readable-max { h1-6, p, ul { max-width: @readable-max-width; } }

Add a class to anything you want to have a max-width? (this is not automatic but worth mentioning)

.readable-max { max-width: @readable-max-width; }

Jump-to-page pagination not working with filters

Somehow this slipped through the cracks. It was working with ajax pagination because we did some work in JS to grab the current URL but now that I have commented out ajax pagination it is no longer working.

One idea that @Scotchester and I came up with is to include a hidden form field for each active filter in the pagination form. Tested this manually and it works.

About > Doing business with us -- contact info

we have a rule to remove personal contact information and to use contact CMS. we should enforce that rule here in case [email protected] leaves CFPB.

cf-icons not working in IE7

There is an open issue in cf-icons: cfpb/cf-icons#3

We might be able to pick up where @ascott1 left off: https://github.com/ascott1/cf-icons/blob/gh-pages/src/less/icons-ie7.less, ascott1/cf-icons@63d6677

Press Resources design tweaks for the "Photos and Bios" section

• The lockup for "Director Richard Cordray" looks like it needs some work on small screens.
• .list__links should align icons to the right edge.
  
• .jump-link should use Avenir Medium and should align the icon to the right edge while vertically centering it.
  
• Can you move the .jump-link pattern to .misc? This should make it easier for us to remember to port it to a CF pattern.
• I need to ditch my .link__block-on-small pattern in favor of your jump link for consistency.

Testing .post-previews

.post-preview testing: http://cfpb.github.io/cfgov-refresh/blog_static/landing.html

Browsers

• Chrome
• Safari
• FF
• IE11
• IE10
• IE9
• IE8
• IE7
  • Icons not working but we are aware, everything else is looking good
• Opera
• iOS6
• Android 4.3
• Blackberry Bold
  • Seeing an issue where .date breaks to two lines. (Fixed it with white-space: nowrap)

Accessibility

• Keyboard friendly
• Screen reader friendly
  • Hidden text for the cat slugs to give them more context

Other

• Is useable without CSS
• Flexible from small to large screens

More robust link patterns

I was in need in a simple standalone Avenir link and realized we didn't have a pattern for it so I added .styled-link. We also have .jump-link which is kind of similar but does way more. We also have link styles for links. I'm wondering if we can consolidate and create a .link base class and build off of that instead.

.link	simple webfont link
.link__large	bumps up to 18px
.link__rwd	regular link on large screens and a block link on small screens
.link__jump	auto adds the right caret icon
.link__jump-download	auto adds download icon

.link could possibly replace the need for .list_link.
It could also be used as a base for the __jump modifiers.
For .list__links we could specify that all .links here will get the .link__rwd behavior.
For .__jump's we could specify that these automatically get the .link__rwd behavior too.

Still need to account for links with icons in front of them but maybe it could be done similarly to how __jump.

Am I missing any other link styles?

design tweaks

All this feedback is minor

Simply documenting things I see so they aren't forgotten. Backlog and prioritize accordingly.

Sidebar on contact us has some odd spacing happening.

need tighter spacing here at the start of a new section

Add JS module loader?

Had a discussion with @jimmynotjim @himedlooff @sebworks ... it sounds like it would be helpful to modularize the JS in this repo and use a module loader. Using browserify and following the architecture of owning-a-home probably makes the most sense.

Transition on the filter menu

Let's switch the transition on the drop down filter menu to an ease-out.

Testing .custom-select

.custom-select testing: http://himedlooff.github.io/cfgov-refresh/blog_static/landing.html

Browsers

• Chrome (31)
• Safari (6,7)
• FF (28)
• IE11
• IE10
• IE9
• IE8
• IE7
• Opera (12)
• iOS (6,7)
• Android (4.4,4.3)
• Blackberry Bold

Accessibility

• Keyboard friendly
• Screen reader friendly

Other

• Is useable without CSS
• Is useable without JS

Readme update: Test how required the environment variable actually are

Per discussion #247 (comment) and #247 (comment)

Breakpoint labels?

We've tried and failed before, but now that we are starting to see clearer layout patterns it might be beneficial to create breakpoint labels based specifically on content-specific layout patterns; like the breakpoints used in .content_main, .content_sidebar, .content-l. We might have other breakpoints but they don't all need to be accounted for in this "content-layout breakpoint scale". I think limiting the scope like this might prove more successful.

So far I think we have:

Label	Range	Site layout
Mobile	0 – 599	Single column
Tablet	600 – 800	Single column with extra wrapper gutters
Desktop	801 – 1170	Two columns (1170px is the max-width on .wrapper)

Thoughts?

There is no license

Testing .post insets

.post testing: http://cfpb.github.io/cfgov-refresh/blog_static/post.html

Browsers

• Chrome (31)
• Safari (6,7)
• FF (28)
• IE11
• IE10
• IE9
• IE8
• IE7
  • Icons not working (this issue is already noted)
• Opera (12)
• iOS6
• Android (4.4,4.3)
• Blackberry Bold
  • Noticing that multi-word category slug headers are breaking to two lines for no apparent reason. I'm willing to live with this since I can't find much about this on the web.

Accessibility

• Keyboard friendly
• Screen reader friendly
  • Updated .tags to avoid screen readers from speaking "bullet".
  • <span class="visually-hidden">Category:</span> prepended to category headers for added context.

Other

• Is useable without CSS
• Flexible from small to large screens

Full-width content footers?

@ell0ell0, the issue you noted here appears on all pages with content footers: #182 (comment)

What can we do about it @Scotchester, @virginiacc?

Testing Chosen.js

Chosen.js testing: http://cfpb.github.io/cfgov-refresh/blog_static/landing.html

Browsers

• Chrome (31)
• Safari (6,7)
• FF (28)
• IE11
• IE10
• IE9
• IE8
  • Everything works well except for the bg img. The issue is with Legacssy and an issue has been created here: robinpokorny/grunt-legacssy#7
• IE7 N/A Chosen is disabled on IE7, a standard select menu is the fallback
• Opera (12)
• iOS (6,7)
  • Chosen is disabled on the iphone and ipod, a standard select menu is the fallback
  • Chosen is NOT disbaled on the ipad and does not work well because it activates the select underneath it. It's also very difficult to close it once opened.
• Android (4.4,4.3) N/A Chosen is disabled on Android, a standard select menu is the fallback
• Blackberry Bold
  • Chosen is NOT disabled on Blackberry and suffers from a known issue where clicking on the drop down will activate items underneath it

Accessibility

• Keyboard friendly
• Screen reader friendly
  • Not screen reader friendly, we will address this in the next sprint

Other

• Is useable without CSS

Screenshot

There should be a screenshot in the README, like this:

(dummy issue to upload the image)

Responsive and non-responsive .media?

A possible need for a responsive and non-responsive version of .media popped up. Sometimes if the content is narrow you might just want to keep .media as-is without stacking the _image and _body. Any thoughts?

Add sheer-layouts to the docs nav

Add to Travis

Standardize heading bottom margins

@ell0ell0 says they should always be 30px (optically) for h1, h2, h3, h4, and 15px for h5, h6.

Testing .post

.post testing: http://cfpb.github.io/cfgov-refresh/blog_static/post.html

Browsers

• Chrome (31)
• Safari (6,7)
• FF (28)
• IE11
• IE10
• IE9
• IE8
• IE7
  • Icons not working (this issue is already noted)
• Opera (12)
• iOS (6,7)
• Android (4.4,4.3)
• Blackberry Bold

Accessibility

• Keyboard friendly
• Screen reader friendly
  • ✓ Proper use of headings
  • ✓ Share buttons are icons but have visually hidden text that are used by screen readers

Other

• Is useable without CSS
• Flexible from small to large screens

JS error on post pages

URL

Any post page like /blog/spring-2014-rulemaking-agenda.

Actual Behavior

I am getting the following JS error.

Uncaught TypeError: Cannot read property 'split' of undefined

Steps to Reproduce

Open a post page in Chrome and open up the console.

Screenshot

Review patterns for potential promotion to Capital Framework

After the Blogs section gets buttoned up we should review the patterns that we came up with to see which ones would be good candidates to move to Capital Framework. This is an effort to avoid duplicate work across the different teams.

Testing .hero

.hero testing: http://cfpb.github.io/cfgov-refresh/blog_static/landing.html

Browsers

• Chrome (31)
• Safari (6,7)
• FF (28)
• IE11
• IE10
• IE9
• IE8
• IE7
• Opera (12)
• iOS (6,7)
• Android (4.4,4.3)
• Blackberry Bold

Accessibility

• Keyboard friendly
• Screen reader friendly

Other

• Is useable without CSS
• Flexible from small to large screens

Centering on mobile

the-bureau page contains media blocks whose content (image & body) becomes centered at mobile sizes via a media__centered class. The office index page, however, introduces a new pattern of media blocks whose image centers on mobile while the body remains left-aligned.

It seems like it would be more useful to add a general-purpose .centered-on-mobile class (or two classes, one for inline & the other for block elements) that could be applied to the appropriate parts of the media object rather than handle this behavior through .media modifiers.

Thoughts? Preferences?

Testing .popular-stories

Chosen.js testing: http://cfpb.github.io/cfgov-refresh/blog_static/landing.html

Browsers

• Chrome (31)
• Safari (6,7)
• FF (28)
• IE11
• IE10
• IE9
• IE8
• IE7
• Opera (12)
• iOS (6,7)
• Android (4.4,4.3)
• Blackberry Bold

Accessibility

• Keyboard friendly
• Screen reader friendly

Other

• Is useable without CSS

Need tighter spacing at the start of a new section

From @ell0ell0:

need tighter spacing here at the start of a new section

Missing IE alternate stylesheet

We need to create the IE alternate stylesheet.

• Add legacssy to create a media query-free stylesheet.
• Add the alternate stylesheet to the cssmin task.

Inline labels on date selectors are not accessible

The current color (@gray-50 or BABBBD) does not have enough contrast on white.

Two possible solutions:

1. Darken the test color to standard @gray. (@gray-80 also does not have enough contrast). The drawback to this approach is that the selected color (@black) isn't quite as differentiated.
2. Move the labels outside of (above) the select box itself. The drawback to this approach is that the inline placeholders become semi-redundant.

Semi-relatedly, I think we probably also need labels for "From" and "To". Adding those would make option 2 pretty difficult.

So, I would vote for option 1. I think the color difference between @gray and @black is adequate.

/cc @juidai @ell0ell0 @duelj

Improve grunt workflow

Combine the grunt commands into a single one: perhaps automatically run what grunt does immediately after grunt vendor automatically?

Print styles

I'm likely developing print styles for Owning a Home and would like to contribute some back to the refresh. @himedlooff has started work at https://github.com/cfpb/cfgov-refresh/tree/gh-pages/docs/print

Some print style standards to start:

• output link href attribute
• output URLs for media like youtube videos, share? or hide them?
• use HTML5 boilerplate as template

drop down selected state

When a item is selected on a drop down menu the text should switch to black.

Margin/padding utilities proposal

I'm really starting to feel the need for some margin (and even padding) utilities so that we can easily override default margins without having to recreate margin modifiers on each block/base-class.

I think the scale we're dealing with is as follows, @ell0ell0 or @duelj can you confirm?

@Scotchester, @virginiacc, thoughts? One thing I'm not sure about is using the abstract names. The only advantage is that we can change the underlying value while being able to keep the same name. I think the likelihood of that is very low, we're not going to change from 5 to 3 for example. I guess though in a future redesign it would be helpful.

Scale	Abstract name	Margin top classes	Margin bottom classes
5	XS	.u-mt-xs	.u-mb-xs
10	S	.u-mt-s	.u-mb-s
15	M	.u-mt-m	.u-mb-m
20	ML	.u-mt-ml	.u-mb-ml
30	L	.u-mt-l	.u-mb-l
45	XL	.u-mt-xl	.u-mb-xl
60	XXL	.u-mt-xxl	.u-mb-xxl

Also @virginiacc already created .u-mb0 which for consistency we could rename to .u-mb-0. I think the dash is helpful when dealing with abstract names instead of numbers.

Long options in select boxes need line-height

Blog - Date on mobile

Let's make sure the date on the blog tucks above the categories at the appropriate width for mobile.

_vars-budget has trailing comma in array

https://github.com/cfpb/cfgov-refresh/blob/gh-pages/budget/_vars-budget.html#L8
has a trailing comma for the last item in the array. This looks like it shouldn't be there.

About > Doing business with us > Small, women-owned, and minority-owned businesses content suggestions

Merge the title of "Current awards to small businesses" with "FY13" into "FY13 awards to small businesses"

Export demos for each pattern

It's hard to get a high-level view of what patterns we have. This is because the docs are quite dense. It would be great to generate the "demo" view for patterns in this project, like we do in Capital Framework.

Jump link in press section has l/r borders on hover

Press section borders stretch too far horizontally

Here's the design:

Here's what it looks like:

Also the color should match the border separating the side nav from the main content.

Testing jquery.cf_input-split

jquery.cf_input-split testing: http://himedlooff.github.io/cfgov-refresh/blog_static/landing.html

Browsers

• Chrome (31)
• Safari (6,7)
• FF (29)
• IE11
• IE10
• IE9
• IE8
• IE7
• Opera (12)
• iOS (6,7)
• Android (4.4,4.3)
• Blackberry Bold

Accessibility

• Keyboard friendly
• Screen reader friendly

Other

• Is useable without CSS
• Is useable without JS

Broken logo stuff

I'm getting an error about a missing file logo_smex.svg, the filename is actually logo_sm-ex.svg.
We should also update the logo in the footer and make sure we are linking to the right logo in the following meta tag in the head: <meta property="og:image" content="http://www.consumerfinance.gov/wp-content/themes/cfpb_nemo/_/img/logo.svg">.