These are chat archives for japgolly/scalacss

6th
Sep 2016
Barry Kern
@bskern
Sep 06 2016 18:38
If I just want to use plain bootstrap is there anything wrong with just putting in their classes directly on my elements? Of the various scalajs scalajs/react tutorials sometimes I see more done on the scalacss side but I am not certain why. I have created basic react elements and used scalacss to style them but now I am trying to copy a site I did in react & bootstrap and I am not sure how to proceed
Otto Chrons
@ochrons
Sep 06 2016 18:48
@bskern it's fine, but it's also "stringly typed" so it's easy to make mistakes that are hard to find :)
Justin du Coeur, AKA Mark Waks
@jducoeur
Sep 06 2016 18:50
Yaas. But I should note that this is exactly what I'm doing for my product -- I haven't bothered to facade out the Bootstrap classes yet. Basically, doing raw class-based Bootstrap is no worse in Scala.js than it is in plain HTML; it's just not any better.
Otto Chrons
@ochrons
Sep 06 2016 18:50
I've just used simple wrapping to get some safety,
  def styleWrap(classNames: String*) = style(addClassNames(classNames: _*))
  object listGroup {
    val listGroup = styleWrap("list-group")
    val item = styleWrap("list-group-item")
}
also gives a bit of abstraction, if you later want to switch from Bootstrap to some other CSS framework (but not really enough abstraction)
Barry Kern
@bskern
Sep 06 2016 18:52
gotcha
checking my assumptions /understanding...the benefits of styleWrap would be well style naming is clearer, would avoid typo issues compile time for something like listGroup.itm but you would still be stung at runtime if you supplied wrong bootsrap class name to styleWrap
Otto Chrons
@ochrons
Sep 06 2016 19:02
yea
and you can bundle multiple classes into a single style,
  val navbar = styleWrap("nav", "navbar-nav")
Barry Kern
@bskern
Sep 06 2016 19:05
so would this never work <.nav(^.className := "navbar navbar.inverse", might be my lack of understanding of this whole eco system btu oddly enough my site does utilize top navbar
Barry Kern
@bskern
Sep 06 2016 19:45
hmm getting this error message ...type mismatch expected TagMod actual scalacss.StyleA...for <.span(Style.navbarBrand,s"Weather ${P.currentTemp} - ${P.desc}")...val navbarBrand = styleWrap("navbar-brand") second snippet from my object where I have defined styleWrap as above and it extends StyleSheet.Inline the other styles in the object and this small react component seem good
Barry Kern
@bskern
Sep 06 2016 20:08
was missing some imports