css-dsl: A DSL for CSS Frameworks

Instead of stringly typed, noisy code like this,

<.div(
  ^.cls := ("panel hidden-xs panel-" + (if (success) "success" else "default")),
  <.div(
    ^.cls := "panel-heading",
    <.h3(^.cls := "panel-title", "Panel title")
  )
)

write code like this:

<.div.panel.hiddenXs(
  if (success) C.panelSuccess else C.panelDefault,
  <.div.panelHeading(
    <.h3.panelTitle("Panel title")  
  )
)

Variants

CSS libraries

• Bootstrap 3
• Bootstrap 4
• Bulma
• Semantic UI
• Fomantic UI
• Font Awesome

Targeted Libraries

• Scalajs-react
• Scalatags (currently only the Text bundle for JVM)

DSL Flavors

• As chainable extension methods on tags
• As methods on the C object

Additionally, most frameworks are available with prefixed and unprefixed methods

Usage

Dependency Coordinates

Resolver

Artifacts are published to Bintray and synced to Bintray JCenter. For SBT use resolvers += Resolver.jcenterRepo or useJCenter := true (prefixed with ThisBuild / if needed). For other build tools add https://jcenter.bintray.com as a maven repository.

Artifact

CSS library	Scala DOM library	SBT Module ID
Bootstrap 3	scalatags.Text (JVM)	"io.github.nafg.css-dsl" %% "bootstrap3_scalatags" % "0.9.0"
Bootstrap 3	scalajs-react (scala.js)	"io.github.nafg.css-dsl" %%% "bootstrap3_scalajsreact" % "0.9.0"
Bootstrap 4	scalatags.Text (JVM)	"io.github.nafg.css-dsl" %% "bootstrap4_scalatags" % "0.9.0"
Bootstrap 4	scalajs-react (scala.js)	"io.github.nafg.css-dsl" %%% "bootstrap4_scalajsreact" % "0.9.0"
Bootstrap 5	scalatags.Text (JVM)	"io.github.nafg.css-dsl" %% "bootstrap5_scalatags" % "0.9.0"
Bootstrap 5	scalajs-react (scala.js)	"io.github.nafg.css-dsl" %%% "bootstrap5_scalajsreact" % "0.9.0"
Bulma	scalatags.Text (JVM)	"io.github.nafg.css-dsl" %% "bulma_scalatags" % "0.9.0"
Bulma	scalajs-react (scala.js)	"io.github.nafg.css-dsl" %%% "bulma_scalajsreact" % "0.9.0"
Fomantic UI	scalatags.Text (JVM)	"io.github.nafg.css-dsl" %% "fomanticui_scalatags" % "0.9.0"
Fomantic UI	scalajs-react (scala.js)	"io.github.nafg.css-dsl" %%% "fomanticui_scalajsreact" % "0.9.0"
Font Awesome	scalatags.Text (JVM)	"io.github.nafg.css-dsl" %% "fontawesome_scalatags" % "0.9.0"
Font Awesome	scalajs-react (scala.js)	"io.github.nafg.css-dsl" %%% "fontawesome_scalajsreact" % "0.9.0"
Semantic UI	scalatags.Text (JVM)	"io.github.nafg.css-dsl" %% "semanticui_scalatags" % "0.9.0"
Semantic UI	scalajs-react (scala.js)	"io.github.nafg.css-dsl" %%% "semanticui_scalajsreact" % "0.9.0"

Import

CSS library	Prefix	Import
Bootstrap 3	None	import cssdsl.bootstrap3.Dsl._
Bootstrap 3	bs	import cssdsl.bootstrap3.BsDsl._
Bootstrap 3	bs3	import cssdsl.bootstrap3.Bs3Dsl._
Bootstrap 4	None	import cssdsl.bootstrap4.Dsl._
Bootstrap 4	bs	import cssdsl.bootstrap4.BsDsl._
Bootstrap 4	bs4	import cssdsl.bootstrap4.Bs4Dsl._
Bootstrap 5	None	import cssdsl.bootstrap5.Dsl._
Bootstrap 5	bs	import cssdsl.bootstrap5.BsDsl._
Bootstrap 5	bs5	import cssdsl.bootstrap5.Bs5Dsl._
Bulma	None	import cssdsl.bulma.Dsl._
Bulma	b	import cssdsl.bulma.BDsl._
Fomantic UI	f	import cssdsl.fomanticui.FDsl._
Font Awesome	None	import cssdsl.fontawesome.Dsl._
Font Awesome	fa	import cssdsl.fontawesome.FaDsl._
Semantic UI	s	import cssdsl.semanticui.SDsl._

Code

The import gives you two things:

1. Chainable extension methods on the target library's tag type (scalatags ConcreteHtmlTag[String] or scalajs-react's TagOf[Node]). These methods return a modified version of the tag which allows you to chain them, and then continue as usual (for instance applying modifiers and content to it).
2. The C object, which methods with the same name but that return a class modifier directly (scalatags Modifier or scalajs-react TagMod). This allows you to use classes conditionally.

For an example illustrating both see the second snippet at the top of this file.

If you use a prefixed flavor the method names are the same except they start with the chosen prefix, and the first letter after the prefix is capitalized. So for example bootstrap4.Dsl will use tableHover while bootstrap4.BsDsl will use bsTableHover.

Contributing

The DSLs are generated using ph-css and Scalameta. The CSS is read from a CDN and parsed, class selectors are extracted, and their names are converted to camel case.

If you want to add or update a CSS framework you just have to update build.sbt.

To add a new target library you first have to implement it in project/TargetImpl.scala.