6 ms·
I loved the simplicity, and wanted to know how it was done. https://github.com/asciimoo/cssplot/blob/master/cssplot.css https://github.com/asciimoo/cssplot/blo
by BoppreH 12y ago
I loved the simplicity, and wanted to know how it was done.
https://github.com/asciimoo/cssplot/blob/master/cssplot.css https://github.com/asciimoo/cssplot/blob/master/cssplot.css
.bar-chart ul li[data-cp-size="0"] {
height: 0%;
}
.bar-chart ul li[data-cp-size="1"] {
height: 1%;
}
.bar-chart ul li[data-cp-size="2"] {
height: 2%;
}
...
Still find it cool, but a 1200 line CSS may be a bit too much for a practical application.
- aligajani 12y agoJust shows what CSS can do but won't use it in production.
- Myztiq 12y agoEventually once browser support is there we can reduce this to about 70 lines. By using .scatterplot ul li[data-cp-y] { bottom: attr(data-cp-y %); }
- TazeTSchnitzel 12y agoI really wish browsers supported the second attribute of attr(). None do.
- OutThisLife 12y agoThis will be so awesome.
- evanm 12y agoCouldn't this be reduced by, like, a lot by simply using this CSS3 gem? height: attr(sata-cp-size px);
- bennettfeely 12y agoSomeday, but right now the support for using 'attr()' function in properties other than 'content' is very poor.
- nness 12y agoCorrect, attr() for use with anything than the content property is unsupported by most browsers. (https://developer.mozilla.org/en-US/docs/Web/CSS/attr https://developer.mozilla.org/en-US/docs/Web/CSS/attr)
- RussianCow 12y agoYes, once we get to the point where we can stop supporting IE <= 9. :)
- girvo 12y agoConverting it to a LESS mixin (or similar) would be interesting, it'd allow you to bring in only the needed styles for the graphs you've used :)
- notjustanymike 12y agoChecking the source code, it actually starts out as LESS
- JoelSutherland 12y agoIt's very redundant so it gzips to 3kb.