[042.4] Style Elements

Style Elements
[07.03.2017]

Today we're going to take a break from the Single Page App we've been working on
to explore
style-elements,
which is a package for creating styles for elements, naturally enough. From the
README, The Style Elements library is a new set of primitives for working with
layout and style in Elm. We'll use it on the elm-emoji-picker I've been
building for Firestorm. Let's get started.

Project

Here we have an emoji picker. It looks OK, but I'd like to iterate on the styles
a bit and it seemed like an easy way to get started with style-elements.

We'll start by installing the package:

elm-package install -y mdgriffith/style-elements

Right now we're using some CSS in this project. Let's remove it and stop loading
it:

git rm style.css
vim index.html
# Then remove the stylesheet link tag

If we run the project again, we can see that the styles have been removed.

./run.sh

style-elements consists of Styles and Elements. We'll make a Styles
module of our own, creating a basic stylesheet with no applicable styles, as a
good basic starting point. We'll give a name to all of the things we want to
style eventually, in a union type.

Next, let's wire this into Main and replace our view with style-elements layout
functions to lay it out.

vim Main.elm

moduleMainexposing(..)import Dictexposing(Dict)-- Element is a module from style-elements, and the attributes and events-- largely mirror those of elm-lang/htmlimport Elementexposing(..)import Element.Attributesexposing(..)import Element.Eventsexposing(onClick,onInput)import Emojiexposing(Emoji,emojis)-- We only need the Html type itself now-- And we don't need to import Html attributes or eventsimport Htmlexposing(Html)import Ports-- We'll also pull in our Styles so we can specify them on various elementsimport Stylesexposing(Styles(..))-- ...-- Then our view uses Element functionsview :Model->HtmlMsgview model =let-- ...in-- We use Element.root for the base of it, passing it the stylesheet that-- should apply inside this areaElement.root Styles.stylesheet <|-- We'll just lay everything out in a column for nowcolumn None[]-- We'll include an element that's 400px wide and centered[el None[center,width (px 400)]<|-- And inside of that element we'll lay things out in columns-- againcolumn None[]-- We'll include an input...[inputText None[onInput UpdatePrefix,placeholder "Search for an emoji"]model.searchString
-- ... our selected emoji,el SelectedEmoji[]<|text selectedEmojiString
-- ... and the list of emoji we've filtered to,viewEmojiList model.searchString
]]-- The list of emoji will just be a column for nowviewEmojiList :String->ElementStylesvariation MsgviewEmojiList searchPrefix =let-- ...incolumn EmojiList[]<|List.map viewEmoji filteredEmoji
-- And an emoji is an element with the Emoji styleviewEmoji :(String,Emoji)->ElementStylesvariation MsgviewEmoji (key,(emojiString,emojiName,commonNames )as emoji )=el Emoji[onClick <|SelectEmojiemoji ]<|text emojiString

If we check out the app now, it's mostly workable. Next, I'd like to make the
emoji have some padding, and change background color when hovered:

With that, things are looking alright. I think this is a fine place to stop.

Summary

In today's episode we implemented styles for our emoji picker using
style-elements. There's a lot to like about this package. A thing I don't
currently love is how wordy the resulting HTML is, as there are inline styles on
each element. However, there's a lot of work going on on this package and it's
very nice that it frees us from thinking of CSS directly in a lot of cases. Let
me know if you use it and build something cool. See you soon!

sign up for full access

Meet your expert

I've been building web-based software for businesses for over 18 years. In the last four years I realized that functional programming was in fact amazing, and have been pretty eager since then to help people build software better.