NoRedInk / noredink-ui / Nri.Ui.Spacing.V1

Patch changes:

Center a container on the page:

centeredContentWithSidePadding : Css.Style

This is meant to be reusable for any area that:

If you have a container that should snap flush to the edges on mobile, this isn't the right style to use.

centeredContent : Css.Style

Center content with a max width of the mobile breakpoint.

This style does not add side padding on mobile, which means that this can be used for containers that should snap flush to the edges of the mobile viewport.

centeredQuizEngineContentWithSidePadding : Css.Style

Use this style on Quiz Engine pages.

This is identical to content, except that it uses the quizEngineMobile breakpoint instead of the mobile breakpoint.

If you have a container that should snap flush to the edges on mobile, this isn't the right style to use.

quizEngineCenteredContent : Css.Style

Use this style on Quiz Engine pages.

This is identical to centeredContent, except that it uses the quizEngineMobile breakpoint instead of the mobile breakpoint.

This style does not add side padding on mobile, which means that this can be used for containers that should snap flush to the edges of the mobile viewport.

centeredNarrowContentWithSidePadding : Css.Style

Use this style on pages with a narrow (500px) breakpoint.

This is identical to content, except that it uses the narrow breakpoint instead of the mobile breakpoint.

If you have a container that should snap flush to the edges on mobile, this isn't the right style to use.

narrowCenteredContent : Css.Style

Use this style on pages with a narrow (500px) breakpoint.

This is identical to centeredContent, except that it uses the narrow breakpoint instead of the mobile breakpoint.

This style does not add side padding on mobile, which means that this can be used for containers that should snap flush to the edges of the mobile viewport.

centeredContentWithSidePaddingAndCustomWidth : Css.Px -> Css.Style

Advanced use only: center content up to a custom page width, with side padding when narrower.

centeredContentWithCustomWidth : Css.Px -> Css.Style

Advanced use only: center content up to a custom page width.

Whitespace constants and helpers:

pageTopWhitespace : Css.Style

Convenience for adding the appriopriate amount of whitespace at the end of the page with margin.

pageTopWhitespacePx : Css.Px

Every page should have 30px of whitespace separating the header nav and the page content, as well as before any secondary headers.

See the UI Style Guide and Caveats' Spacing section for more details.

pageSideWhitespace : Css.Style

Convenience for adding the appriopriate amount of whitespace on the sides of a full-width container on the page or on the page with side padding.

pageSideWhitespacePx : Css.Px

Unless content is flush with the edges of the viewport, there should be 15px of left/right spacing between the content and the viewport edge.

See the UI Style Guide and Caveats' Spacing section for more details.

pageBottomWhitespace : Css.Style

Convenience for adding the appriopriate amount of whitespace at the end of the page with margin.

pageBottomWhitespacePx : Css.Px

Every page should have 50px of whitespace at the end, so that footers don't end up spanning the middle of the page, and for consistency's sake.

See the UI Style Guide and Caveats' Spacing section for more details.

Deprecated:

verticalSpacerPx : Css.Px

DEPRECATED -- do not use. A future version of noredink-ui will remove.

horizontalSpacerPx : Css.Px

DEPRECATED -- do not use. A future version of noredink-ui will remove.