Nri.Ui.MediaQuery.V1

Patch changes:

remove min-width:1 from media queries in order to support better composibility
adds narrowMobileBreakpoint and deprecates narrowMobileBreakPoint
adds withViewport for convenience when matching specific viewport size ranges
fix not queries to not overlap with the regular breakpoint queries

Standard media queries for responsive pages.

import Css
import Css.Media as Media
import Nri.Ui.MediaQuery.V1 as MediaQuery


style : Css.Style
style =
    Media.withMedia
        [ MediaQuery.mobile ]
        [ Css.padding (Css.px 2)
        ]

anyMotion : List Style -> Style

prefersReducedMotion : List Style -> Style

highContrastMode : List Style -> Style

notHighContrastMode : List Style -> Style

withViewport : Maybe Px -> Maybe Px -> List Style -> Style

MediaQuery.withViewport
    MediaQuery.narrowMobileBreakpoint
    MediaQuery.quizEngineBreakpoint
    [ Css.flexDirection Css.column
    ]

1000px breakpoint

mobile : MediaQuery

Styles using the mobileBreakpoint value as the maxWidth.

notMobile : MediaQuery

Styles using the mobileBreakpoint value as the minWidth.

mobileBreakpoint : Px

1000px

750px breakpoint

quizEngineMobile : MediaQuery

Styles using the quizEngineBreakpoint value as the maxWidth.

notQuizEngineMobile : MediaQuery

Styles using the quizEngineBreakpoint value as the minWidth.

quizEngineBreakpoint : Px

750px

500px breakpoint

narrowMobile : MediaQuery

Styles using the narrowMobileBreakpoint value as the maxWidth

notNarrowMobile : MediaQuery

Styles using the quizEngineBreakpoint value as the minWidth.

narrowMobileBreakpoint : Px

500px

narrowMobileBreakPoint : Px

DEPRECATED: prefer narrowMobileBreakpoint, which follows other casing conventions.

NoRedInk/noredink-ui/24.5.0

Nri.Ui.MediaQuery.V1

1000px breakpoint

750px breakpoint

500px breakpoint

Modules