Merge pull request #78 from NoRedInk/css-reset

Css reset

styleguide-app/Examples/Button.elm

@@ -5,6 +5,7 @@ module Examples.Button exposing (Msg, State, example, init, update)
 -}
 
 import Debug.Control as Control exposing (Control)
+import Headings
 import Html exposing (..)
 import ModuleExample as ModuleExample exposing (Category(..), ModuleExample, ModuleMessages)
 import Nri.Ui.AssetPath exposing (Asset)
@@ -207,7 +208,7 @@ buttons assets messages sizes model =
 toggleButtons : ModuleMessages Msg parentMsg -> Html parentMsg
 toggleButtons messages =
     div []
-        [ h3 [] [ text "Button toggle" ]
+        [ Headings.h3 [ text "Button toggle" ]
         , Button.toggleButton
             { onDeselect = messages.showItWorked "onDeselect"
             , onSelect = messages.showItWorked "onSelect"

styleguide-app/Examples/Fonts.elm

@@ -6,6 +6,7 @@ module Examples.Fonts exposing (example)
 
 -}
 
+import HeadingsStyled as Headings
 import Html.Styled as Html
 import Html.Styled.Attributes exposing (css)
 import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
@@ -18,13 +19,13 @@ example =
     { filename = "Nri.Ui.Fonts.V1.elm"
     , category = Fonts
     , content =
-        [ Html.h3 [ css [ Fonts.baseFont ] ] [ Html.text "baseFont" ]
+        [ Headings.h3 [ Html.text "baseFont" ]
         , Html.p [ css [ Fonts.baseFont ] ]
             [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
-        , Html.h3 [ css [ Fonts.quizFont ] ] [ Html.text "quizFont" ]
+        , Headings.h3 [ Html.text "quizFont" ]
         , Html.p [ css [ Fonts.quizFont ] ]
             [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
-        , Html.h3 [ css [ Fonts.ugFont ] ] [ Html.text "ugFont" ]
+        , Headings.h3 [ Html.text "ugFont" ]
         , Html.p [ css [ Fonts.ugFont ] ]
             [ Html.text "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz" ]
         ]

styleguide-app/Examples/Icon.elm

@@ -9,6 +9,7 @@ module Examples.Icon exposing (example, styles)
 import Assets exposing (assets)
 import Css
 import Css.Foreign exposing (Snippet, adjacentSiblings, children, class, descendants, each, everything, media, selector, withClass)
+import Headings
 import Html exposing (Html)
 import Html.Attributes exposing (style, title)
 import ModuleExample exposing (Category(..), ModuleExample)
@@ -23,14 +24,14 @@ example =
     { filename = "Nri/Ui/Icon/V1.elm"
     , category = Icons
     , content =
-        [ Html.h3 [] [ Html.text "Icon" ]
+        [ Headings.h3 [ Html.text "Icon" ]
-        , Html.h4 [] [ Html.text "Images" ]
+        , Headings.h4 [ Html.text "Images" ]
         , Html.div [ styles.class [ Container ] ]
             (List.map viewIcon imageIcons)
-        , Html.h4 [] [ Html.text "Scalable Vector Graphics (SVGs)" ]
+        , Headings.h4 [ Html.text "Scalable Vector Graphics (SVGs)" ]
         , Html.div [ styles.class [ Container ] ]
             (List.map viewIcon svgIcons)
-        , Html.h5 [] [ Html.text "Assignment Types" ]
+        , Headings.h5 [ Html.text "Assignment Types" ]
         , Html.div [ styles.class [ Container ] ]
             (List.map viewIcon assignmentTypeSvgIcons)
         ]

styleguide-app/Examples/Page.elm

@@ -8,6 +8,7 @@ module Examples.Page exposing (example, styles)
 
 import Css
 import Css.Foreign exposing (Snippet, adjacentSiblings, children, class, descendants, each, everything, media, selector, withClass)
+import Headings
 import Html exposing (Html)
 import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
 import Nri.Ui.Page.V1 as Page
@@ -20,18 +21,18 @@ example noOp =
     { filename = "Nri/Ui/Page/V1.elm"
     , category = Pages
     , content =
-        [ Html.h3 [] [ Html.text "Pages for problems" ]
+        [ Headings.h3 [ Html.text "Pages for problems" ]
-        , Html.h4 [] [ Html.text "Page: Not Found" ]
+        , Headings.h4 [ Html.text "Page: Not Found" ]
         , Page.notFound
             { link = noOp
             , name = "The Main Page"
             }
-        , Html.h4 [] [ Html.text "Page: Broken" ]
+        , Headings.h4 [ Html.text "Page: Broken" ]
         , Page.broken
             { link = noOp
             , name = "The Main Page"
             }
-        , Html.h4 [] [ Html.text "Page: No Permission" ]
+        , Headings.h4 [ Html.text "Page: No Permission" ]
         , Page.noPermission
             { link = noOp
             , name = "The Main Page"

styleguide-app/Examples/Table.elm

@@ -5,6 +5,7 @@ module Examples.Table exposing (Msg, State, example, init, update)
 -}
 
 import Css exposing (..)
+import Headings
 import Html
 import Html.Styled
 import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
@@ -70,16 +71,16 @@ example parentMessage state =
                 ]
         in
         [ Html.Styled.toUnstyled Table.keyframeStyles
-        , Html.h4 [] [ Html.text "With header" ]
+        , Headings.h4 [ Html.text "With header" ]
         , Table.view columns data
             |> Html.Styled.toUnstyled
-        , Html.h4 [] [ Html.text "Without header" ]
+        , Headings.h4 [ Html.text "Without header" ]
         , Table.viewWithoutHeader columns data
             |> Html.Styled.toUnstyled
-        , Html.h4 [] [ Html.text "Loading" ]
+        , Headings.h4 [ Html.text "Loading" ]
         , Table.viewLoading columns
             |> Html.Styled.toUnstyled
-        , Html.h4 [] [ Html.text "Loading without header" ]
+        , Headings.h4 [ Html.text "Loading without header" ]
         , Table.viewLoadingWithoutHeader columns
             |> Html.Styled.toUnstyled
         ]

styleguide-app/Examples/TextInput.elm

@@ -5,6 +5,7 @@ module Examples.TextInput exposing (Msg, State, example, init, update)
 -}
 
 import Dict exposing (Dict)
+import HeadingsStyled as Headings
 import Html.Styled as Html
 import ModuleExample as ModuleExample exposing (Category(..), ModuleExample)
 import Nri.Ui.TextInput.V3 as TextInput
@@ -64,7 +65,7 @@ example parentMessage state =
                         , type_ = TextInput.number
                         , showLabel = True
                         }
-                    , Html.h3 [] [ Html.text "invisible label" ]
+                    , Headings.h3 [ Html.text "invisible label" ]
                     , TextInput.view
                         { label = "Criterion"
                         , isInError = False
@@ -86,7 +87,7 @@ example parentMessage state =
                         , type_ = TextInput.text
                         , showLabel = False
                         }
-                    , Html.h3 [] [ Html.text "Writing Style" ]
+                    , Headings.h3 [ Html.text "Writing Style" ]
                     , TextInput.writing
                         { label = "Writing!"
                         , isInError = False

styleguide-app/Headings.elm

@@ -0,0 +1,38 @@
+module Headings exposing (h1, h2, h3, h4, h5)
+
+import HeadingsStyled
+import Html
+import Html.Styled
+
+
+h1 : List (Html.Html msg) -> Html.Html msg
+h1 =
+    toRootHtml HeadingsStyled.h1
+
+
+h2 : List (Html.Html msg) -> Html.Html msg
+h2 =
+    toRootHtml HeadingsStyled.h2
+
+
+h3 : List (Html.Html msg) -> Html.Html msg
+h3 =
+    toRootHtml HeadingsStyled.h3
+
+
+h4 : List (Html.Html msg) -> Html.Html msg
+h4 =
+    toRootHtml HeadingsStyled.h4
+
+
+h5 : List (Html.Html msg) -> Html.Html msg
+h5 =
+    toRootHtml HeadingsStyled.h5
+
+
+toRootHtml : (List (Html.Styled.Html msg) -> Html.Styled.Html msg) -> (List (Html.Html msg) -> Html.Html msg)
+toRootHtml node =
+    \children ->
+        List.map Html.Styled.fromUnstyled children
+            |> node
+            |> Html.Styled.toUnstyled

styleguide-app/HeadingsStyled.elm

@@ -0,0 +1,29 @@
+module HeadingsStyled exposing (h1, h2, h3, h4, h5)
+
+import Html.Styled exposing (Html)
+import Nri.Ui.Text.V2 as Text
+
+
+h1 : List (Html msg) -> Html msg
+h1 =
+    Text.heading
+
+
+h2 : List (Html msg) -> Html msg
+h2 =
+    Text.heading
+
+
+h3 : List (Html msg) -> Html msg
+h3 =
+    Text.subHeading
+
+
+h4 : List (Html msg) -> Html msg
+h4 =
+    Text.subHeading
+
+
+h5 : List (Html msg) -> Html msg
+h5 =
+    Text.subHeading

styleguide-app/View.elm

@@ -4,6 +4,7 @@ import Css exposing (..)
 import Css.Foreign exposing (Snippet)
 import DEPRECATED.Css.File exposing (Stylesheet, compile, stylesheet)
 import DEPRECATED.Css.Namespace
+import Headings
 import Html exposing (Html, img)
 import Html.Attributes exposing (..)
 import Html.CssHelpers
@@ -26,7 +27,7 @@ view model =
             , Html.div [ class [ StyleGuideContent ] ]
                 (case model.route of
                     Routes.Doodad doodad ->
-                        [ Html.h2 []
+                        [ Headings.h2
                             [ Html.a [ Html.Attributes.href "#" ] [ Html.text "(see all)" ] ]
                         , nriThemedModules model.moduleStates
                             |> List.filter (\m -> m.filename == ("Nri/" ++ doodad))
@@ -38,7 +39,7 @@ view model =
                     Routes.Category category ->
                         [ Html.section [ class [ Section ] ]
                             [ newComponentsLink
-                            , Html.h2 [] [ Html.text (toString category) ]
+                            , Headings.h2 [ Html.text (toString category) ]
                             , nriThemedModules model.moduleStates
                                 |> List.filter (\doodad -> category == doodad.category)
                                 |> List.map (ModuleExample.view True)
@@ -50,8 +51,8 @@ view model =
                     Routes.All ->
                         [ Html.section [ class [ Section ] ]
                             [ newComponentsLink
-                            , Html.h2 [] [ Html.text "NRI-Themed Modules" ]
+                            , Headings.h2 [ Html.text "NRI-Themed Modules" ]
-                            , Html.h3 [] [ Html.text "All Categories" ]
+                            , Headings.h3 [ Html.text "All Categories" ]
                             , nriThemedModules model.moduleStates
                                 |> List.map (ModuleExample.view True)
                                 |> Html.div []
@@ -66,7 +67,7 @@ view model =
 newComponentsLink : Html Msg
 newComponentsLink =
     Html.div []
-        [ Html.h2 [] [ Html.text "New Styleguide Components" ]
+        [ Headings.h2 [ Html.text "New Styleguide Components" ]
         , Html.div []
             [ Html.text "Future styleguide components can be found in "
             , Html.a [ href "https://app.zeplin.io/project/5973fb495395bdc871ebb055" ] [ Html.text "this Zepplin" ]
@@ -99,7 +100,7 @@ navigation route =
                 ]
     in
     Html.div [ class [ CategoryMenu ] ]
-        [ Html.h4 []
+        [ Headings.h4
             [ Html.text "Categories" ]
         , Html.ul [ class [ CategoryLinks ] ] <|
             Html.li []

styleguide-app/assets/reset.css

@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

styleguide-app/index.html

@@ -3,6 +3,7 @@
 <head>
 	<meta charset="utf-8">
 	<title>NoRedInk style guide</title>
+  <link href="assets/reset.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
   <script src="assets/custom-elements/custom-elements.min.js"></script>
   <script src="assets/custom-elements/native-shim.js"></script>