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 [email protected].
For more options, visit https://groups.google.com/d/optout.
