For me, it’s always a chore because of the unpredictability and its unintuitive
nature. I often find myself scrolling through the CSS rules for a misbehaving
element in Developer Tools, trying to figure out where a particular attribute
came from and why. What does
height: inherit do, exactly? Off to check
the documentation – again.
Then I have to figure out how to get just the right combination of attributes
to finally do what I need. If I use a CSS framework, then it’s almost inevitable
that I’ll end up sprinkling
!important on styles to get my overrides
to finally apply, which always feels like something I shouldn’t be doing.
Most people know about
box-sizing: border-box which stops weird stuff happening
with width and padding calculations. But did you know that margins of adjacent
elements can collapse together instead of being added up? It only happens sometimes
though, and there’s a whole
bunch of complicated rules to remember!
Then there are the specificity rules. How many times did you have to fight those? And don’t forget about the CSS painting order algorithm, which is extremely complex, with rules nesting six levels deep at one point!
Its features accreted seemingly ad-hoc over decades. Back in the stone age we had to do layout with tables, then CSS came along and fixed it. Then it fixed it again, with Flexbox. And then it fixed it again, with CSS Grid. Now it’s up to you to learn how all of these options work and to decide which one to use in a particular scenario.
That’s only the start though! Should you use classes or IDs? Should you come up with semantic class names? What does it even mean? Aren’t we trying to separate styling from the semantics?.. Argh!
I’m not even going to go into the differences between browsers. Did you know that Flexbox in Safari does not work quite the same as Flexbox in Firefox?
It’s hard to ever become comfortable with CSS.
It’s not hypothetical! It’s exactly how I describe my experience with using
mdgriffith/elm-ui package to build UIs.
elm-ui was created by Matthew Griffith as a replacement for both HTML and CSS,
which it treats as an output target. I like
to describe it by analogy:
Just like Elm, it gives you a much better set of primitives combined with
a type system and a helpful compiler.
elm-ui gives you a much simpler approach to building UIs compared to HTML and CSS.
But let me be clear that
elm-ui is not a panacea. As it tries to address a huge
problem space, it still has rough edges and it doesn’t replace all
of the capabilities of HTML/CSS.
Sometimes I may need to drop back to HTML and CSS (which is possible), but if I can forget about CSS 95% of the time rather than 100% of the time, I’ll still take that option gladly!
Besides, any package that takes on a huge task like this is going to have
a learning curve.
elm-ui still takes some getting used to and requires a change
Luckily, I can help you with this part: I wrote this guide and created a showcase
of common UI patterns built with
elm-ui to make your transition from HTML/CSS
as smooth as possible.
|- Getting started: title page layout|
|- Layout functions|
|- Responsive layouts|
|- Escape hatches|
|2. Page elements and controls||36|
|- Labels for inputs|
|- Radio buttons|
|- Single line text inputs|
|- Multiline text inputs|
|- A note on focus|
|- Third-party elements and controls|
|- Text appearance|
|- Font size and typeface|
|- Font color, weight and styles|
|- Other attributes|
|- Text layout|
|4. More on styling||72|
|- Specifying colours|
|- Temporary styling|
|- Multiple layouts on one page|
|5. Working with various types of content||80|
| - Optimising performance using
| - Building forms with
| - Rendering Markdown with
| - Rendering elm-markup content
| - Inserting
|- Incorporating video|
|- Using custom elements|
| - Drag & drop for lists with
|6. Organising UI code||124|
|- Structuring the code for reuse|
|- Stateful UIs|
The showcase is an extended version of elm-ui-patterns. In addition to the examples in elm-ui-patterns, you get 26 additional examples:
Many people have found the guide to be useful, here is a sample of what readers say:
Your book organizes the functionality and helps the reader understand the big picture and groups of functionality better. The book is also a nice way to discover many of the features of elm-ui that you may not know about.
— Cliff Brake
I wanted to learn elm-ui for some time, but I am not so comfortable learning things by reading API docs at the beginning. I prefer tutorials or guides. And your book is just what I was looking for! I like the structure and the pretty fast pace. I would definitely recommend this book to anyone who wants to start playing with elm-ui and, like me, prefers a guide to API docs.
— Mickey Vashchinsky (@mickeyvip)
[I] have read the guide, and really enjoyed it. Thanks! I’d recommend it, totally. I think the main reason is it shows how easy it is to get nice web UIs quickly and simply (e.g. the Slack UI example). Especially for those, like me, who aren’t experienced in CSS (e.g. back-end devs who are using Elm for the first time).
— Yoni Gibbs
I am starting frontend for personal uses and I have systems background (C, C++) and love functional languages, so Elm was like “oh God, yes”. But then, it’s difficult to make something complex, and elm-ui appeared and was again “aha, cool”. And there’s where your book actually makes a difference as the library does not have a lot of useful doc, so starting from layouts and then cover simple elements was great.
I would recommend it definitely! As explained above, if Elm wants to take over frontend, it needs libs like elm-ui, and resources like your books. Using your book I’m actually doing some real progress instead of trying to tweak internet examples.
— Pablo Bravo
Check out the sample and get on my mailing list to get Elm tips:
Hi, I’m Alex Korban. I’m an author and software consultant with an interest in functional programming, databases, and geospatial applications.
I promote Elm and run several projects to make it easier for people to learn it and use it:
Previously, I co-founded a company to help the heavy construction industry improve safety and productivity when building highways, tunnels, and other infrastructure. We did this by collecting geospatial data via mobiles and Bluetooth beacons, and then analysing and visualising it.
I’ve also written several books about C++, and a book about working with time in PostgreSQL.
Prior to that I worked on a wide range of software, such as pre-iPhone mobile applications, a flight simulator, GPS-based vehicle fleet tracking, and automatic control software for construction machines (bulldozers, excavators, and self-driving kerb laying machines).
Can I pay with PayPal?
Yes, you can pay either via PayPal or with a credit card. For credit card payments, I use Stripe, so your information is secure either way.
What if the guide isn’t useful to me?
I offer a 30-day money back guarantee, so there is no risk in buying.
What format is the guide in?
The guide is provided in PDF format as well as EPUB and Mobi. Note, however, that EPUB and Mobi versions are formatted for tablets and provided for convenience only. I don’t test them extensively, so formatting may be off – in particular, code samples may wrap awkwardly.
What version of elm-ui and Elm is used in the guide?
elm-ui 1.1.8 and Elm 0.19.1.
Will I get updates?
I will update the guide if I find errors, and you will get those updates free.
If a new version of
elm-ui is released with major changes, it might require a new
edition of the guide, which I will make available at a discount to customers who bought
the previous version of the guide.