Styles isolation

Basic.elm

module Main exposing (..)

import Element exposing (..)
import Element.Attributes exposing (..)
import BasicStyles exposing (..)


{-| A synonym for creating tuples. This will be included in the standard library soon.

1 => 2 == (1, 2)

-}
(=>) =
    (,)


main : Program Never number msg
main =
    beginnerProgram
        { model = 0
        , update = (\_ x -> x)
        , view = view
        , stylesheet = stylesheet
        }


{-| Our view is made up of `Element`s,

which you can think of as Html with layout, positioning, and spacing built in.

-}
view _ =
    simpleColumn
        []
        [ navigation
        , simpleEl [ center, width (px 800) ] <|
            mainColumn
                [ spacing 50, paddingTop 50, paddingBottom 50 ]
                (List.concat
                    [ viewTextLayout
                    , viewRowLayouts
                    , viewGridLayout
                    , viewNamedGridLayout
                    ]
                )
        ]


navigation =
    simpleRow
        [ justify, paddingXY 80 20 ]
        [ logo [] (text "Style Elements")
        , simpleRow
            [ spacing 20 ]
            [ navOption [ alignBottom ] (text "share")
            , navOption [ alignBottom ] (text "about")
            , navOption [ alignBottom ] (text "user profile")
            ]
        ]


{-| A text layout
-}
viewTextLayout =
    [ myLabel [] (text "First, Some Text")
    , simpleTextLayout
        [ spacingXY 25 25
        , padding 60
        ]
        [ box
            [ width (px 200)
            , height (px 300)
            , alignLeft
            ]
            (text "Alignment attributes (such as alignLeft), work in all layouts. In a text layout, the result is the element is floated left.")
        , simpleParagraph
            []
            [ text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel lectus eget lorem lobortis suscipit. Fusce porta auctor purus sed tempor. Mauris auctor sapien sit amet elementum egestas. Maecenas placerat consequat mauris, at dapibus enim tristique a. Quisque feugiat ultricies lorem nec volutpat. Sed risus enim, facilisis id fermentum quis, eleifend in diam. Suspendisse euismod, urna nec consectetur volutpat, massa libero aliquam urna, hendrerit venenatis leo lacus faucibus nulla. Curabitur et mattis dolor."
            ]
        , hairlineContainer
        , simpleParagraph
            []
            [ text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel lectus eget lorem lobortis suscipit. Fusce porta auctor purus sed tempor. Mauris auctor sapien sit amet elementum egestas. Maecenas placerat consequat mauris, at dapibus enim tristique a. Quisque feugiat ultricies lorem nec volutpat. Sed risus enim, facilisis id fermentum quis, eleifend in diam. Suspendisse euismod, urna nec consectetur volutpat, massa libero aliquam urna, hendrerit venenatis leo lacus faucibus nulla. Curabitur et mattis dolor."
            ]
        , simpleParagraph
            [ width (px 500)
            , center
            ]
            [ text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel lectus eget lorem lobortis suscipit. Fusce porta auctor purus sed tempor. Mauris auctor sapien sit amet elementum egestas. Maecenas placerat consequat mauris, at dapibus enim tristique a. Quisque feugiat ultricies lorem nec volutpat. Sed risus enim, facilisis id fermentum quis, eleifend in diam. Suspendisse euismod, urna nec consectetur volutpat, massa libero aliquam urna, hendrerit venenatis leo lacus faucibus nulla. Curabitur et mattis dolor."
            ]
        , simpleParagraph
            []
            [ text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel lectus eget lorem lobortis suscipit. Fusce porta auctor purus sed tempor. Mauris auctor sapien sit amet elementum egestas. Maecenas placerat consequat mauris, at dapibus enim tristique a. Quisque feugiat ultricies lorem nec volutpat. Sed risus enim, facilisis id fermentum quis, eleifend in diam. Suspendisse euismod, urna nec consectetur volutpat, massa libero aliquam urna, hendrerit venenatis leo lacus faucibus nulla. Curabitur et mattis dolor."
            ]
        , box
            [ width (px 200)
            , height (px 300)
            , alignRight
            , spacing 100
            ]
            empty
        , simpleParagraph
            []
            [ text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel lectus eget lorem lobortis suscipit. Fusce porta auctor purus sed tempor. Mauris auctor sapien sit amet elementum egestas. Maecenas placerat consequat mauris, at dapibus enim tristique a. Quisque feugiat ultricies lorem nec volutpat. Sed risus enim, facilisis id fermentum quis, eleifend in diam. Suspendisse euismod, urna nec consectetur volutpat, massa libero aliquam urna, hendrerit venenatis leo lacus faucibus nulla. Curabitur et mattis dolor."
            ]
        , simpleParagraph
            []
            [ text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel lectus eget lorem lobortis suscipit. Fusce porta auctor purus sed tempor. Mauris auctor sapien sit amet elementum egestas. Maecenas placerat consequat mauris, at dapibus enim tristique a. Quisque feugiat ultricies lorem nec volutpat. Sed risus enim, facilisis id fermentum quis, eleifend in diam. Suspendisse euismod, urna nec consectetur volutpat, massa libero aliquam urna, hendrerit venenatis leo lacus faucibus nulla. Curabitur et mattis dolor."
            ]

        -- a "full" will expand to consume the parent padding.
        , fullBox [] <|
            text "A Full element will grow to consume parent padding!"
        ]
    ]


viewRowLayouts =
    [ myLabel [] (text "Here is a Row Layout")
    , containerRow
        [ spacingXY 20 20 ]
        [ box [ width (px 100), height (px 100) ] empty
        , box [ width (px 100), height (px 100) ] empty
        , box [ width (px 100), height (px 100) ] empty
        ]
    , myLabel [] (text "You can Align Children Individually")
    , containerRow
        [ spacingXY 20 20, height (px 400) ]
        [ box [ width (px 100), height (px 100), alignTop ] (text "top")
        , box [ width (px 100), height (px 100), verticalCenter ] (text "vcenter")
        , box [ width (px 100), height (px 100), alignBottom ] (text "bottom")
        ]
    , myLabel [] (text "Or you can set the alignment for an entire layout.")
    , containerRow
        [ spacingXY 20 20, alignRight ]
        [ box [ width (px 100), height (px 100) ] empty
        , box [ width (px 100), height (px 100) ] empty
        , box [ width (px 100), height (px 100) ] empty
        ]
    ]


viewGridLayout =
    [ myLabel [] (text "Grid Layout")
    , gridContainer
        { columns = [ px 100, px 100, px 100, px 100 ]
        , rows =
            [ px 100
            , px 100
            , px 100
            , px 100
            ]
        }
        [ spacing 20 ]
        [ area
            { start = ( 0, 0 )
            , width = 1
            , height = 1
            }
            (box [] (text "box"))
        , area
            { start = ( 1, 1 )
            , width = 1
            , height = 2
            }
            (box [ spacing 100 ] (text "box"))
        , area
            { start = ( 2, 1 )
            , width = 2
            , height = 2
            }
            (box [] (text "box"))
        , area
            { start = ( 1, 0 )
            , width = 1
            , height = 1
            }
            (box [] (text "box"))
        ]
    ]


viewNamedGridLayout =
    [ myLabel [] (text "Named Grid Layout")
    , namedGridContainer
        { columns = [ px 200, px 200, px 200, fill 1 ]
        , rows =
            [ px 200 => [ spanAll "header" ]
            , px 200 => [ span 3 "content", span 1 "sidebar" ]
            , px 200 => [ span 3 "content", span 1 "sidebar" ]
            , px 200 => [ spanAll "footer" ]
            ]
        }
        []
        [ named "header"
            (box [] (text "box"))
        , named "sidebar"
            (box [] (text "box"))
        ]
    ]

BasicStyles.elm

module BasicStyles exposing (..)

import Html
import Color
import Element exposing (..)
import Element.Attributes exposing (..)
import Style exposing (..)
import Style.Border as Border
import Style.Color as Color
import Style.Font as Font
import Style.Transition as Transition


beginnerProgram :
    { model : model
    , update : msg -> model -> model
    , view : model -> Element styles variation msg
    , stylesheet : StyleSheet styles variation
    }
    -> Program Never model msg
beginnerProgram cfg =
    Html.beginnerProgram
        { model = cfg.model
        , update = cfg.update
        , view = (Element.root cfg.stylesheet) << cfg.view
        }


{-| The type we use for identifiers for our styles.
-}
type Styles
    = None
    | Main
    | Page
    | Logo
    | NavOption
    | Box
    | Container
    | Label


{-| First, we create a stylesheet.

Styles only deal with properties that are not related to layout, position, or size.

Generally all properties only have one allowed unit, which is usually px.

If you want to use something like em

-}
stylesheet : StyleSheet Styles variation
stylesheet =
    Style.stylesheet
        [ style None [] -- It's handy to have a blank style
        , style Main
            [ Border.all 1 -- set all border widths to 1 px.
            , Color.text Color.darkCharcoal
            , Color.background Color.white
            , Color.border Color.lightGrey
            , Font.typeface [ "helvetica", "arial", "sans-serif" ]
            , Font.size 16
            , Font.lineHeight 1.3 -- line height, given as a ratio of current font size.
            ]
        , style Page
            [ Border.all 5
            , Border.solid
            , Color.text Color.darkCharcoal
            , Color.background Color.white
            , Color.border Color.lightGrey
            ]
        , style Label
            [ Font.size 25 -- set font size to 25 px
            , Font.center
            ]
        , style Logo
            [ Font.size 25
            , Font.typeface [ "helvetica", "arial", "sans-serif" ]
            ]
        , style NavOption
            [ Font.size 16
            , Font.typeface [ "helvetica", "arial", "sans-serif" ]
            ]
        , style Box
            [ Transition.all
            , Color.text Color.white
            , Color.background Color.blue
            , Color.border Color.blue
            , Border.rounded 3 -- round all borders to 3px
            , paddingHint 20
            , hover
                [ Color.text Color.white
                , Color.background Color.red
                , Color.border Color.red
                , cursor "pointer"
                ]
            ]
        , style Container
            [ Color.text Color.black
            , Color.background Color.lightGrey
            , Color.border Color.lightGrey
            ]
        ]



-- helpers


simpleColumn =
    column None


simpleEl =
    el None


mainColumn =
    column Main


simpleRow =
    row None


containerRow =
    row Container


gridContainer =
    grid Container


namedGridContainer =
    namedGrid Container


navOption =
    el NavOption


logo =
    el Logo


box =
    el Box


simpleParagraph =
    paragraph None


simpleTextLayout =
    textLayout None


hairlineContainer =
    hairline Container


myLabel =
    el Label


fullBox =
    full Box

elm-package.json

{
    "version": "1.0.0",
    "summary": "Style Element Examples",
    "repository": "https://github.com/mdgriffith/style-element-examples.git",
    "license": "BSD3",
    "source-directories": [
        "../src",
        "."
    ],
    "exposed-modules": [
       
    ],
    "dependencies": {
        "Skinney/murmur3": "2.0.4 <= v < 3.0.0",
        "elm-lang/core": "5.0.0 <= v < 6.0.0",
        "elm-lang/html": "2.0.0 <= v < 3.0.0",
        "elm-lang/svg": "2.0.0 <= v < 3.0.0",
        "BrianHicks/elm-benchmark": "1.0.0 <= v < 2.0.0",
        "elm-lang/animation-frame": "1.0.0 <= v < 2.0.0",
        "elm-lang/window": "1.0.0 <= v < 2.0.0",
        "elm-lang/virtual-dom": "2.0.0 <= v < 3.0.0"
    },
    "elm-version": "0.18.0 <= v < 0.19.0"
}