These are chat archives for japgolly/scalacss

24th
Mar 2015
Matt Hughes
@matthughes
Mar 24 2015 01:58
ok. Me either :) But it would be an interesting exercise.
styling css is so much easier if you don't have any components
just one big render block :(
David Barri
@japgolly
Mar 24 2015 02:13
Yeah I'm finding that too
In other news:
Github just open-sourced their in-house CSS lib: http://primercss.io/
Chandra Sekhar Kode
@chandu0101
Mar 24 2015 02:51
@japgolly mate whats your feeling on scalacss ? i hope you wrote fair amount of scalacss in u r project!
David Barri
@japgolly
Mar 24 2015 03:22
@chandu0101 I did but not as much as you'd think; I remembered today how annoying it is to get CSS to make the browser do what you want. Like applying a max-width table columns does nothing, then you start googling and all the workarounds are pointless and/or annoying...
ergh
But overall I've been pretty happy with it. Most of the time it's AWESOME, sometimes it's annoying - we need to improve that stuff
Even some little things like adding import ScalaCssReact._ everywhere - it's annoying
And also I'm not sure what the best practice are going to be wrt generic components
Basically I feel great base, need to polish a bit more
Great for a first release anyway :)
I was especially happy when I wanted a bootstrap style label so I just copied the classnames from the website and pasted into the styles file and it worked straight away, hehe, that was awesome
How about you?
Chandra Sekhar Kode
@chandu0101
Mar 24 2015 03:28
ofc mate the first version has everything for most cases , importing stuff is fine thats dumb work. even i am wondering about generic components let us know if you find a good way :)
other than that pager i did nothing , have to write more :)
regarding table column - use flexbox instead of unflexible table tags ...
       .table {
            display: flex;
            flex-direction: column;
            box-shadow: 0 2px 4px grey;
        }
        .tableRow {
            display: flex;
            text-align: center;
            padding : 10px;
            border: 1px solid rgb(245, 245, 245);
        }
        .tableHeader {
            font-weight: bold;
        }
        .tableRowItem {
            flex: 1;
        }
Chandra Sekhar Kode
@chandu0101
Mar 24 2015 03:33
by just changing tableRowItem flex property you’ll get flexible column widths .
David Barri
@japgolly
Mar 24 2015 03:42
woah really? I've seen people using flex a lot this year but I haven't read up on it, don't know anything about it yet
Thanks for sharing that snippet, I'll play with it
That reminds me!
Hey is it ok with you if I add your yesterday's pager example to the nested-styles doc?
People were saying it needs a more detailed example
Chandra Sekhar Kode
@chandu0101
Mar 24 2015 03:45
no need to ask mate :)
David Barri
@japgolly
Mar 24 2015 03:45
hehe thanks mate :D
Chandra Sekhar Kode
@chandu0101
Mar 24 2015 03:45
if want something private ,it’ll private for ever :P
David Barri
@japgolly
Mar 24 2015 03:46
hahaha that's true
Chandra Sekhar Kode
@chandu0101
Mar 24 2015 03:47
thats a good tut to start : )
David Barri
@japgolly
Mar 24 2015 03:47
Sorta nice not to have to worry about browser prefixes
Apparently the spec is at Last Call Working Draft
Chandra Sekhar Kode
@chandu0101
Mar 24 2015 03:49
yeah , autoprefixer is a big feature for me because i love flexbox ;)
David Barri
@japgolly
Mar 24 2015 04:05
Hmm something has just clicked for me....
Flex boxes don't grow based on their content, only based on the extra space that their container has?
Like in a table, if one column has really long text in a cell, it grows more than the other columns... but with flexboxes you decide in CSS how proportionally they grow and if there's a really long cell, bad luck?
Chandra Sekhar Kode
@chandu0101
Mar 24 2015 04:09
yeah flex boxes uses extra space available! but in most cases we know which column need more space isn’t it .. ?
David Barri
@japgolly
Mar 24 2015 04:10
usually, but what about if I have two columns that can both potentially be very big?
Maybe for one user col A has big data, for another user col B has big data.
Instead of making both cols equally big, can it be a bit more dynamic?
Chandra Sekhar Kode
@chandu0101
Mar 24 2015 04:14
is that predictable behaviour ? even if yes our code will be mess
ask this question in #css IRC , many experts there :)
David Barri
@japgolly
Mar 24 2015 04:18
genius! Will do
Chandra Sekhar Kode
@chandu0101
Mar 24 2015 10:24
hehe :D , btw got answert mate ?
Otto Chrons
@ochrons
Mar 24 2015 20:39
@japgolly the docs are much better now, with more examples
I'll integrate ScalaCSS into my SPA shortly and will let you know of any issues I run into
David Barri
@japgolly
Mar 24 2015 22:19
Cool :)
Here's some sad news: #16
Using ScalaCSS adds around 40% more time to fastOptJS in an 8600 LoC Scala.JS project.
@chandu0101 You were saying file sizes are large too. Would you be able to raise a ticket similar to #16 but showing the numbers from your file size testing?