Page Grid Component
<div class="page-grid-container">
<div class="page-grid">
<!-- grid content goes here -->
</div>
</div>
Any content that is off-grid , a full bleed banner for example, should be placed outside of these two elements.
Grid areas are definable with CSS Grid syntax .
Responsive Methodology
When working with responsive web pages, the mindset should always be mobile-first. This means that your default styles (outside of media queries) should be targeting phones - the smallest of screens. As such, there is no need to have a minimum threshold by wrapping mobile styles inside a media query.
Though our minimum screen width support starts at 320px , in theory this means that default styles will support devices much narrower than that since we don't set a minimum. The 320px is, at best, an implied breakpoint.
Subsequent media queries should increase in screen width and alter the UI styling additively avoiding style declaration duplications when possible. The following CSS shows the grid layout of the Skin website itself.
nav {
display: none;
}
main {
grid-area: ~"1 / 1 / span 1 / span 8";
}
footer {
grid-area: ~"2 / 1 / span 1 / span 8";
} /* If you're using SASS, alternatively, you can reference our constant for the page width - @_screen-size-SM */ /* See below for all the references. */
@media all and (min-width: 512px) {
nav {
grid-area: ~"1 / 1 / span 1 / span 3";
}
main {
grid-area: ~"1 / 4 / span 1 / span 13";
}
footer {
grid-area: ~"2 / 1 / span 1 / span 16";
}
} /* If you're using SASS, alternatively, you can reference our constant for the page width - @_screen-size-MD */ /* See below for all the references. */
@media all and (min-width: 768px) {
nav {
grid-area: ~"1 / 1 / span 1 / span 2";
}
main {
grid-area: ~"1 / 3 / span 1 / span 14";
}
}
You can see that for small screens, our top-level landmark elements simply span the full width of the grid. For large screens, things are a little more interesting, and we specify exactly how many rows and columns each landmark should occupy on the grid.
Here is the corresponding HTML.
<body>
<header>
<!-- header content (off-grid) -->
</header>
<div class="page-grid-container">
<div class="page-grid">
<nav>
<!-- nav content -->
</nav>
<main>
<!-- main content -->
</main>
<footer>
<!-- footer content -->
</footer>
</div>
</div>
</body>
You can see how it looks on this page by enabling our debug mode , which gives a quick visual indication of the grid columns.
Page Grid SASS/CSS Properties
We've set up CSS properties and SASS constants to provide developers with easy reference for responsive adjustments of UIs. The CSS properties allow for customization of page grid for UIs that require it, but please use them sparingly and be mindful of the impact those overrides can have .
The CSS properties to allow for customization
These properties allow for costumization of page grid for UIs that require it, but please use them sparingly and be mindful of the impact those overrides can have .
--page-grid-number-cols: 0; /* The number of columns. */
--page-grid-outside-margins: 0; /* The left/right margins outside page grid. */
--page-grid-column-gaps: 0; /* The gaps between grid columns.*/
--page-grid-row-gaps: 0; /* The gaps between grid rows.*/
--page-grid-column-widths: 0; /* The widths of grid columns. If columns is changed, this will need a new calculation to distribute evenly withing the grid.*/
--page-grid-max-width: 0 /* The maximum width of the page.*/;
Additionally, we've set up SASS constants for easier reference of the current breakpoints as well as some other dimension/spacing values.
Please do NOT overwrite these!
They are meant to be consumed ONLY as constants for read-only purposes as references.
@_screen-size-XS: 320px;
@_screen-size-SM: 512px;
@_screen-size-MD: 768px;
@_screen-size-LG: 1024px;
@_screen-size-XL: 1280px;
@_screen-size-XL2: 1440px;
@_screen-size-XL3: 1680px;
@_screen-size-XL4: 1920px;
@_page-grid-max-width: 1584px;
@_page-grid-number-cols-small: 8;
@_page-grid-number-cols-large: 16;
@_page-grid-outside-margins-small: 16px;
@_page-grid-outside-margins-large: 32px;
@_page-grid-outside-margins-max: 48px;
@_page-grid-column-gaps-small: var(--spacing-100);
@_page-grid-column-gaps-large: var(--spacing-200);
@_page-grid-row-gaps-small: var(--spacing-100);
@_page-grid-row-gaps-large: var(--spacing-200);
Subgrids
Subgrids allow you to create alignment of child elements on the same grid as page grid. Currently, subgrid only has partial support (with and without CSS Subgrid support), but fallbacks allow for a seamless implementation. You will need to add a bit of CSS on your implementation side to accomplish this.
Firstly, you will need to add a class of page-grid__subgrid to the internal subgrid:
<div class="page-grid-container">
<div class="page-grid">
<main>
<!-- main grid content here -->
</main>
<article id="featured-1" class="featured page-grid__subgrid">
<div class="featured__article">
<h2>Featured Post 1</h2>
<p>
This is a wider card with supporting text below as a natural lead-in
to additional content.
</p>
</div>
<div class="featured__thumbnail">Thumbnail</div>
</article>
</div>
</div>
Additionally, you will need to set up the corresponding subgrid CSS as such to allow for support of subgrids in browsers that do not yet have support:
/* Set up subgrid columns */
@supports not (grid-template-columns: subgrid) {
.featured {
column-gap: var(--spacing-large);
grid-template-columns: repeat(8, 1fr);
}
}
Page Grid Guide
To see how the page grid system (engine) works in conjunction with various types of implementations (templates), check out the page grid guide that includes various examples.
Page Grid Use Guide