Merge pull request #805 from NoRedInk/tessa/issue-804

Add MediaQuery breakpoint px values

src/Nri/Ui/MediaQuery/V1.elm

@@ -1,13 +1,28 @@
 module Nri.Ui.MediaQuery.V1 exposing
     ( mobile, notMobile
+    , mobileBreakpoint
     , quizEngineMobile
+    , quizEngineBreakpoint
     )
 
-{-| Standard media queries for NRI responsive pages.
-Can be used to create a Snippet using Css.Global.media
+{-| 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)
+            ]
 
 @docs mobile, notMobile
+@docs mobileBreakpoint
+
 @docs quizEngineMobile
+@docs quizEngineBreakpoint
 
 -}
 
@@ -15,38 +30,46 @@ import Css exposing (px)
 import Css.Media exposing (MediaQuery, maxWidth, minWidth, only, screen)
 
 
-{-| Mobile styles using a 1000px max-width
-
-`minWidth (px 1)` is for a bug in IE which causes the media query to initially trigger regardless of window size
-
-See: <http://stackoverflow.com/questions/25673707/ie11-triggers-css-transition-on-page-load-when-non-applied-media-query-exists/25850649#25850649>
-
+{-| Styles using the `mobileBreakpoint` value as the maxWidth.
 -}
 mobile : MediaQuery
 mobile =
     only screen
-        [ minWidth (px 1)
-        , maxWidth (px 1000)
+        [ --`minWidth (px 1)` is for a bug in IE which causes the media query to initially trigger regardless of window size
+          --See: <http://stackoverflow.com/questions/25673707/ie11-triggers-css-transition-on-page-load-when-non-applied-media-query-exists/25850649#25850649>
+          minWidth (px 1)
+        , maxWidth mobileBreakpoint
         ]
 
 
-{-| Non-mobile styles using a 1000px min-width
+{-| Styles using the `mobileBreakpoint` value as the minWidth.
 -}
 notMobile : MediaQuery
 notMobile =
-    only screen [ minWidth (px 1000) ]
+    only screen [ minWidth mobileBreakpoint ]
 
 
-{-| Teacher & student facing styles using a 700px max-width
+{-| 1000px
+-}
+mobileBreakpoint : Css.Px
+mobileBreakpoint =
+    px 1000
 
-`minWidth (px 1)` is for a bug in IE which causes the media query to initially trigger regardless of window size
-
-See: <http://stackoverflow.com/questions/25673707/ie11-triggers-css-transition-on-page-load-when-non-applied-media-query-exists/25850649#25850649>
 
+{-| Styles using the `quizEngineBreakpoint` value as the maxWidth.
 -}
 quizEngineMobile : MediaQuery
 quizEngineMobile =
     only screen
-        [ minWidth (px 1)
-        , maxWidth (px 750)
+        [ --`minWidth (px 1)` is for a bug in IE which causes the media query to initially trigger regardless of window size
+          --See: <http://stackoverflow.com/questions/25673707/ie11-triggers-css-transition-on-page-load-when-non-applied-media-query-exists/25850649#25850649>
+          minWidth (px 1)
+        , maxWidth quizEngineBreakpoint
         ]
+
+
+{-| 750px
+-}
+quizEngineBreakpoint : Css.Px
+quizEngineBreakpoint =
+    px 750