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

Major version changes:

Patch changes:

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 Css.Style -> Css.Style

prefersReducedMotion : List Css.Style -> Css.Style

highContrastMode : List Css.Style -> Css.Style

notHighContrastMode : List Css.Style -> Css.Style

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

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

1000px breakpoint

mobile : Css.Media.MediaQuery

Styles using the mobileBreakpoint value as the maxWidth.

notMobile : Css.Media.MediaQuery

Styles using the mobileBreakpoint value as the minWidth.

mobileBreakpoint : Css.Px

1000px

750px breakpoint

quizEngineMobile : Css.Media.MediaQuery

Styles using the quizEngineBreakpoint value as the maxWidth.

notQuizEngineMobile : Css.Media.MediaQuery

Styles using the quizEngineBreakpoint value as the minWidth.

quizEngineBreakpoint : Css.Px

750px

500px breakpoint

narrowMobile : Css.Media.MediaQuery

Styles using the narrowMobileBreakpoint value as the maxWidth

notNarrowMobile : Css.Media.MediaQuery

Styles using the quizEngineBreakpoint value as the minWidth.

narrowMobileBreakpoint : Css.Px

500px