Skip to content

Instantly share code, notes, and snippets.

@pdamoc pdamoc/Basic.elm
Created Jun 20, 2017

Embed
What would you like to do?
Styles isolation
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"))
]
]
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
{
"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"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.