Layouts

Landing page layout

Located at _layouts/landing.html, this is the layout that is used for the landing page on seedfund.nsf.gov.

Landing page general front matter

The primary template uses Jekyll front matter heavily to account for variations within the site. Below are the the potential front matter attributes that you can use. Some are listed as (optional). These can be used to alter the appearance of a page.

Attribute Value Type What it does
title NSF SBIR String Title for the page visible in blue banner at the top of the page
permalink / String Path that the page renders relative to the site’s baseurl
layout landing String Sets the page layout to primary

Landing page hero front matter

Attribute Value Type What it does
hero: image /assets/img/hero-2.png String Path to the image to used for the background of the hero
hero: callout: alt Up to $225,000 seed funding. String Text to use in the hero title
hero: callout: text 0% equity. String Additional text to use in the hero title
hero: button: href /how-to-apply/ String URL where you want the button to go
hero: button: text Start your application String Main button text
hero: button: subtext Deadline: String Additional supporting button text

Secondary page layout

The most common layout on the site. Used for sub pages.

Located at _layouts/project-page.html, this is the template for creating new project pages as well as project cards that show up at /what-we-deliver/.

Secondary page front matter

The primary template uses Jekyll front matter heavily to account for variations within the site. Below are the the potential front matter attributes that you can use. Some are listed as (optional). These can be used to alter the appearance of a page.

Attribute Value Type What it does
title NSF SBIR String Title for the page visible in blue banner at the top of the page
permalink /about/ String Path that the page renders relative to the site’s baseurl
layout secondary String Sets the page layout to secondary

Grid

The layout and grid structure inherits from the U.S. Web Design Standards and makes some slight adjustments. Layout changes are not overrides of the standards, but a handful of CSS classes have been added to compliment the Standards.

Class name What it does
usa-width-tablet A class that allows certain content, namely the project cards, and the blog previews to respond at a different breakpoint, $tablet-screen (768px).
usa-flex Wrapper class that sets display: flex, and can be used to create more flexible layouts.
Classes used with usa-flex usa-flex-baseline, usa-flex-end, usa-flex-pull-right, usa-flex-always, usa-flex-wrap, usa-flex-vertically-top, usa-flex-pull-right, and usa-flex-vertically-bottom.
usa-grid-reversed This class can be used to alternate the order that content appears in mobile vs desktop screen widths.
content-wide In the Standards, the primary way to improve readability is via the usa-content class, which limits content to 75 characters. Instead of relying on this mechanism, the site wraps site content with the content-focus class, limiting the entire grid to roughly 100 characters.
content-focus When the the grid needs to be wider, content-wide is used and the content width is controlled by using partial grid layouts.