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 🤯.
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>
| ||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 |
| ||This class sets the body font size to 100%|
| ||This class sets the font-family to use Alliance No. 1. For the full list of fallback fonts refer to the |
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…)
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.
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.
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.