https://github.com/rupertlssmith/thesett_style_lab
I first developed the 'style lab' as static HTML, then converted it to
elm-mdl, using html-to-elm along the way then converting all the various
components to elm-mdl as necessary.
The main difference with pure MDL is that I have developed modifications to
the MDL styles to gain control over the vertical rhythm and to work up the
design of various re-usable components. Mainly a table with controls (still
to do pagination, sorting etc). Also I have made a nice card layout and
modified the dialog layout to be identical to the card layout for a
consistent look.
One innovation you may enjoy is the 'debug style' toggle, which draws
borders around most html components and also draws grid lines for the 24px
vertical rhythm so I can visually check alignment to the grid.
The borders are drawn as background images using linear-gradient, so they
do not draw real 1px borders around stuff which would cause positions to
shift:
h1, h2, h3, h4, p,
dialog,
div, nav,
footer {
background-position: left top;
background-image: linear-gradient(00deg, blue 0px, transparent 1px),
linear-gradient(90deg, blue 0px, transparent 1px), linear-gradient(180deg,
blue 0px, transparent 1px), linear-gradient(270deg, blue 0px, transparent
1px);
}
The grid lines are drawn on the background, with divs stacked on top made
transparent so you can see them:
div,
footer,
header {
background-color: transparent !important;
}
dialog,
body {
background-image: linear-gradient(to bottom, hsla(200, 100%, 50%, .3)
1px, transparent 1px);
background-position: left -1px;
background-repeat: repeat;
background-size: rhythm(1) rhythm(1);
}
===============
Working with Elm is a very pleasant experience and not at all difficult to
pick it up. I can already see re-usable functions that I can refactor out
of of View code to simplify working with the same UI constructs over and
again. This is much more powerful than working with a template language
such as handlebars, as I can also pass functions as parameters to
functions, not just substitute in values to render.
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to elm-discuss+unsubscr...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
