Skip to content
Tags with meyer-reset styles applied for elm-css
Elm
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
LICENSE
README.md
elm.json

README.md

Lime Reset

Provides tags that include "reset" styles similar to Yelp's lemon-reset library for React.

For an explanation of why Yelp originally moved away from relying on page-global css resets and the benefits of including the resets opaquely within tags, I recommend reading this blog post from their engineering team.

Effectively these tags have styling as if this stylesheet was applied to them.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

These tags use elm-css for their implementation. This is necessary because the stylesheet that is being replicated makes use of the :before and :after css pseudo-selectors in order to style the blockquote and q tags. As far as I am aware it is impossible to use pseudo-selectors with inline css, so making an inline stylesheet with (as is done by elm-css) is the only way to make these tags in a redistributable way. As a consequence, these tags do not produce the Html msg from elm/html but instead make the Html msg from rtfieldman/elm-css.

You can’t perform that action at this time.