Link

Get started

Primer Fluid is a Primer module that provides enhanced styling tools for GitHub’s marketing sites. At its core, Primer Fluid provides an alternate set of utilities that enable fluid scaling of typography and all spacing and sizing utilities such as margin, padding, and grid gutters. This is done using rem as units of measure as opposed to px units used in Primer proper.

So as long as you use rem as your unit of measure with any custom styles, they will scale proportionally with all other elements using rem. To make unit conversion easier there is a Rem converter mixin that will convert px values to rem to make reading your stylesheets easier without making your head 🤯.

Setup

Due to this different styling configuration there are a few setup steps required to make use of these new utilities so scaling works properly. The first step is to wrap your layout in the following classes.

<html class="html-fluid">
  <body class="body-fluid font-mktg">
    <!-- You can now use Primer Fluid utilities here -->
  </body>
</html>

What do these classes do?

Class Function
html-fluid This class sets the base font size maximum and minimum that type scales relative to. The default configuration sets the maximum base font size to 16px / 1rem and the minimum base font size to 14px / 0.875rem. Scaling between the maximum and minimum starts at the point the viewport hits the xl breakpoint and scales down to the minimum once it reaches the sm breakpoint.
body-fluid This class sets the body font size to 100%
font-mktg This class sets the font-family to use Alliance No. 1. For the full list of fallback fonts refer to the $font-family-mktg variable. It’s not required that the font-mktg class be applied to the <body> element. But if you wish to apply this font to everthing that’s where you’d want to apply it.

Design Guidelines

consistency

Consistency

Consistency builds trust and authority, and saves time when building new pages. Rely on existing components as much as possible for design elements that appear consistently across multiple landing pages (i.e. type pairings, customer stories, testimonials, page navigation), while reserving custom solutions for the aspects of the landing page you are designing that are truly unique. Consistency should also extend to labeling elements (CTAs, form fields, etc…)

narrative

Narrative

Design stories, not lists. Good storytelling ebbs and flows, and is composed of the right balance of information, anticipation, delight. When designing marketing pages be mindful of the order in which components are used. Placing a series of highly visual or highly interactive components one after another (ex: a carousel, testimonial, and video) has the potential to overwhelm visitors and neutralize the impact of each individual element. Pair high-impact components with more minimal elements for better pacing that keeps viewers engaged.

conversion

Conversion

The goal of our marketing sites is to drive conversion - whether that’s signing up for a beta, a pricing plan, or an event. CTAs should be easily accessible and positioned in consistent, expected places (i.e. header and footer). CTAs should also use contextual language, taking into consideration a visitor’s logged-in status and/or plan. The styling of CTAs (primary vs secondary button or text link) should also be appropriately assigned based on the priority of the desired action.

scanability

Scanability

Be mindful of the context in which visitors come to and view our marketing pages (ex: through a link on social media, or on their phone) and optimize for a short attention span. Remove unnecessary elements, and avoid redundant text or product images that appear to have clickable UI elements. Design for further discovery by building pathways for interested viewers to continue learning or enter conversion funnels.