NoRedInk/noredink-ui
1
1
Fork 0
mirror of https://github.com/NoRedInk/noredink-ui.git synced 2024-12-18 03:01:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #78 from NoRedInk/css-reset

Browse Source 
Css reset
This commit is contained in:
Jasper Woudenberg 2018-06-22 16:30:16 +01:00 committed by GitHub
commit 0562a92458
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 147 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
styleguide-app/Examples/Button.elm
View File

@ -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"

7
styleguide-app/Examples/Fonts.elm
View File

@ -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" ]
]

9
styleguide-app/Examples/Icon.elm
View File

@ -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" ]
, Html.h4 [] [ Html.text "Images" ]
[ Headings.h3 [ Html.text "Icon" ]
, 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)
]

9
styleguide-app/Examples/Page.elm
View File

@ -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" ]
, Html.h4 [] [ Html.text "Page: Not Found" ]
[ Headings.h3 [ Html.text "Pages for problems" ]
, 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"

9
styleguide-app/Examples/Table.elm
View File

@ -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
]

5
styleguide-app/Examples/TextInput.elm
View File

@ -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

38
styleguide-app/Headings.elm Normal file
View File

@ -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

29
styleguide-app/HeadingsStyled.elm Normal file
View File

@ -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

13
styleguide-app/View.elm
View File

@ -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" ]
, Html.h3 [] [ Html.text "All Categories" ]
, Headings.h2 [ Html.text "NRI-Themed Modules" ]
, 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 []

48
styleguide-app/assets/reset.css Normal file
View File

@ -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;
}

1
styleguide-app/index.html
View File

@ -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>