NoRedInk/noredink-ui/22.6.0

NOTE: the latest version is 35.9.3

Rerouted (regenerated, verified). Same repository and tag, but GitHub now builds the zip with different bytes, so it no longer matches the SHA-1 package.elm-lang.org recorded. The Lamdera package server serves a copy recovered from https://github.com/NoRedInk/noredink-ui.

What we checked: Tag 22.6.0 is still on github.com/NoRedInk/noredink-ui; its commit 7cae53f1af4b is from 2023-03-24 17:13 UTC, before the version was published (2023-03-27 14:55 UTC); elm.json is byte-identical to package.elm-lang.org's; the exposed modules match docs.json; the zip's SHA-1 is not the published one (GitHub's zip no longer comes out byte for byte the same), so the contents were checked instead.

The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.

Details · package.elm-lang.org's zip: https://github.com/NoRedInk/noredink-ui/zipball/22.6.0/

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

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.

1000px

750px breakpoint

quizEngineMobile : MediaQuery

Styles using the quizEngineBreakpoint value as the maxWidth.

notQuizEngineMobile : MediaQuery

Styles using the quizEngineBreakpoint value as the minWidth.

500px breakpoint

narrowMobile : MediaQuery

Styles using the narrowMobileBreakpoint value as the maxWidth

notNarrowMobile : MediaQuery

Styles using the quizEngineBreakpoint value as the minWidth.

DEPRECATED: prefer narrowMobileBreakpoint, which follows other casing conventions.