We’re extending help to millions of homeowners and renters facing financial hardships as a result of COVID-19.

My Home by Freddie Mac®

Do we own your mortgage?

Did we finance your apartment?

We are taking action to protect our employees, customers, homeowners and renters.

See our impact in your state over the last five decades.

Our Single-Family Division keeps mortgage capital flowing by purchasing mortgage loans from lenders so they in turn can provide financing options to qualified borrowers.

Our Multifamily Division provides liquidity and stability and to the rental housing market, improving access to quality, affordable housing.

For Press Inquiries Only Phone: (703) 903-3933 Email: [email protected]

For non-press inquiries, visit our FAQs page.

Join us for new and exciting career opportunities that will let you achieve more and be at your best.

Use only lowercase, and separate terms in class names by hyphens, not underscores. Name single-purpose classes using SMACSS naming scheme: container-element-modifier.

Avoid using #ids in selectors. Stick with classes.

Name multipurpose or modifier classes without block or element designation.

Write for readability – use line breaks between declarations and selectors and use 2 spaces for each level of indention. The compiler will condense spaces and strip out line returns in the minified css.

When styling sub-elements of a component, prefer writing a new class over using a tag selector where possible. This reduces selector specificity, making it easier for the user to override default styles. It also reduces the risk that tag styles will leak into other elements.

Whenever possible, avoid nesting a selector inside its parent. The purpose of nesting is to create scope, but by including the parent's class name in the child class, you've already effectively scoped it.

The deeper you nest, the more bandwidth it takes to serve your CSS and the more work it takes the browser to render it, because browsers evaluate each css rule from right to left, starting from the rightmost selector.

When you write deeply nested css such as the following, you are forcing the browser to

When styling a tag, consider using the child selector to prevent conflicts, especially for structural components that could include any HTML inside of it.

For really generic class names (such as .large or .small), or class names that are used in multiple components, chain them to the main class. Foundation often re-uses the same class names for different components, so each instance needs to be isolated from the others. It's also possible that other libraries or styles could clash with a generic word.

Avoid meaningless concatenation and write for findability. Keep in mind that other developers will be sharing the same SCSS files.

Use meaningful concatenation when generating class names based on a map of values (breakpoints, sizes, palettes) to

Use comments to document mixins, functions, variables, placeholders, magic numbers, and changes to the Foundation's defaults.

Use media queries inside the selector whenever possible.

Dynamic classes modified by JavaScript should be prefixed with the word .is-. This sets them apart as a special kind of CSS class, and also ensures that UnCSS doesn't strip them out.

Some dynamic classes modify the state of an element temporarily.

Other dynamic classes apply structural logic necessary for a plugin to function. The menu plugins are a good example of this.

Use rem-calc() for font sizes and unitless ratios for line height.

Comps from the design studio typically have pixel-based sizes and line heights. By using rem-calc() you can maintain their px value in the SCSS while outputting standard rem units. For line height ratios, divide the desired line-height by the font-size (such as 52/43)

Some dynamic classes modify the state of an element temporarily.

My Home by Freddie Mac®

Sign up for news, tips, and insights