The following rules are designed to enable maximum re-use and flexibility of UI components. They also make it easier for future Gravity releases to evolve the overall look and feel, without needing to make lots of per-component changes.
All UI components should:
display: block;
behaviour or equivalent.padding: 1rem;
but instead do padding: $grav-sp-m;
.Our CSS approach is inspired by Heydon Pickering‘s “Axiomatic CSS and Lobotomized Owls“ article.
We therefore have a global “lobotomized owl” (* + *
) CSS rule that sets a default vertical margin-top
between successive block elements, but not above the first element. Components and pages are encouraged to just let this rule do its thing as much as possible and only selectively override it when absolutely necessary.
The SASS variable $grav-sp-vertical-gap
defines the size of this standard vertical gap.
Similarly, all components inherit font-family
and line-height
by default. As much as possible you should accept these values. Only override them when you have good reason to do so.
By default, the <body>
element has a small outer margin (defined by $grav-page-content-inset
) on all sides, so that oage content doesn’t touch the edges of the screen or browser window. Furthermore, once the viewport exceeds a certain width, the <body>
element gets locked to a fixed width (defined by $grav-page-content-max-width
) and appears centered within the viewport.
The default page layout behaviour can be overridden by adding the .grav-o-full-bleed
class to the <body>
element. This will remove all margins and remove the <body>
‘s max-width
. Elements within will therefore fill the entire width of the viewport - i.e. be “full bleed”. There will also no longer be a margin above and below the first and last elements respectively.
If you want to “box in” specific child elements so that they have the same horizontal behaviour as <body>
does by default - i.e. small margins left and right on narrow viewports and a centered with a fixed width on wider viewports - you can do so by adding the .grav-o-full-bleed__content
class to them.
Note that nesting elements with .grav-o-full-bleed__content
is not supported as it will create oversized margins on small viewports.
Gravity provides various means for having “sticky” page footers, i.e. a page footer that “sticks” to the bottom of the viewport on short pages where it would otherwise appear higher up. On pages with enough content to be taller than the viewport, the page scrolls as usual with the footer appearing at the end.
<body>
Pages whose footers are direct children of the <body>
element will have the sticky footer behaviour by default.
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
...
<footer>
This page footer will be sticky by default!
</footer>
</body>
</html>
If the sticky footer is not desired in the above scenario, you can disable it by adding the .grav-o-sticky-footer--unstick
class to the <body>
element.
If your page contents, including the footer, are not direct children of <body>
, but instead nested in some other top-level container, you can enable the sticky footer behaviour by adding the .grav-o-sticky-footer
class to the container that is the immediate parent of the page footer. This can be useful for single page apps (SPA), that often use a <div>
container within <body>
to wrap the app’s contents.
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
<!--
This DIV is the "root" container of the app.
Normally, the footer within will not be sticky.
But, adding the .grav-o-sticky-footer class
reinstates this behaviour
-->
<div id="root" class="grav-o-sticky-footer">
...
<footer>
This page footer will be sticky!
</footer>
</div>
</body>
</html>