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")
)
)- Bootstrap 3
- Bootstrap 4
- Bulma
- Semantic UI
- Fomantic UI
- Font Awesome
- Scalajs-react
- Scalatags (currently only the Text bundle for JVM)
- As chainable extension methods on tags
- As methods on the
Cobject
Additionally, most frameworks are available with prefixed and unprefixed methods
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.
| 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" |
| 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._ |
The import gives you two things:
- Chainable extension methods on the target library's tag type (scalatags
ConcreteHtmlTag[String]or scalajs-react'sTagOf[Node]). These methods return a modified version of the tag which allows you to chain them, and then continue as usual (for instanceapplying modifiers and content to it). - The
Cobject, which methods with the same name but that return a class modifier directly (scalatagsModifieror scalajs-reactTagMod). 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.
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.