{"id":15159364,"url":"https://github.com/nafg/css-dsl","last_synced_at":"2025-05-02T13:30:23.286Z","repository":{"id":30812957,"uuid":"126083484","full_name":"nafg/css-dsl","owner":"nafg","description":"Generated DSLs for CSS frameworks for scalatags and scala-js-react","archived":false,"fork":false,"pushed_at":"2025-04-21T20:19:19.000Z","size":488,"stargazers_count":10,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-21T21:29:43.420Z","etag":null,"topics":["css","dsl","scala","scalajs","scalajs-react","scalatags"],"latest_commit_sha":null,"homepage":"","language":"Scala","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nafg.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-20T21:16:21.000Z","updated_at":"2025-04-21T20:19:22.000Z","dependencies_parsed_at":"2023-11-10T14:10:02.540Z","dependency_job_id":"37ce14d1-41a9-47ef-9166-9d2022e4b6fd","html_url":"https://github.com/nafg/css-dsl","commit_stats":{"total_commits":357,"total_committers":6,"mean_commits":59.5,"dds":0.5042016806722689,"last_synced_commit":"b52537f535976d95c1a06905d6e15a90b31b256b"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nafg%2Fcss-dsl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nafg%2Fcss-dsl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nafg%2Fcss-dsl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nafg%2Fcss-dsl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nafg","download_url":"https://codeload.github.com/nafg/css-dsl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252045983,"owners_count":21685931,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","dsl","scala","scalajs","scalajs-react","scalatags"],"created_at":"2024-09-26T21:05:16.662Z","updated_at":"2025-05-02T13:30:23.011Z","avatar_url":"https://github.com/nafg.png","language":"Scala","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `css-dsl`: A DSL for CSS Frameworks\nInstead of stringly typed, noisy code like this,\n\n```scala\n\u003c.div(\n  ^.cls := (\"panel hidden-xs panel-\" + (if (success) \"success\" else \"default\")),\n  \u003c.div(\n    ^.cls := \"panel-heading\",\n    \u003c.h3(^.cls := \"panel-title\", \"Panel title\")\n  )\n)\n```\n\nwrite code like this:\n\n```scala\n\u003c.div.panel.hiddenXs(\n  if (success) C.panelSuccess else C.panelDefault,\n  \u003c.div.panelHeading(\n    \u003c.h3.panelTitle(\"Panel title\")  \n  )\n)\n```\n\n## Variants\n### CSS libraries\n * Bootstrap 3\n * Bootstrap 4\n * Bulma\n * Semantic UI\n * Fomantic UI\n * Font Awesome\n\n### Targeted Libraries\n * Scalajs-react\n * Scalatags (currently only the Text bundle for JVM)\n\n### DSL Flavors\n * As chainable extension methods on tags\n * As methods on the `C` object\n\nAdditionally, most frameworks are available with prefixed and unprefixed methods\n\n\n## Usage\n\n### Dependency Coordinates\n#### Resolver\nArtifacts 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.\n\n\u003c!-- Begin autogenerated via sbt generateInstallInstructions --\u003e\n\n#### Artifact\n\n| CSS library  | Scala DOM library        | SBT Module ID                                                       |\n|--------------|--------------------------|---------------------------------------------------------------------|\n| Bootstrap 3  | `scalatags.Text` (JVM)   | `\"io.github.nafg.css-dsl\" %% \"bootstrap3_scalatags\" % \"0.9.0\"`      |\n| Bootstrap 3  | scalajs-react (scala.js) | `\"io.github.nafg.css-dsl\" %%% \"bootstrap3_scalajsreact\" % \"0.9.0\"`  |\n| Bootstrap 4  | `scalatags.Text` (JVM)   | `\"io.github.nafg.css-dsl\" %% \"bootstrap4_scalatags\" % \"0.9.0\"`      |\n| Bootstrap 4  | scalajs-react (scala.js) | `\"io.github.nafg.css-dsl\" %%% \"bootstrap4_scalajsreact\" % \"0.9.0\"`  |\n| Bootstrap 5  | `scalatags.Text` (JVM)   | `\"io.github.nafg.css-dsl\" %% \"bootstrap5_scalatags\" % \"0.9.0\"`      |\n| Bootstrap 5  | scalajs-react (scala.js) | `\"io.github.nafg.css-dsl\" %%% \"bootstrap5_scalajsreact\" % \"0.9.0\"`  |\n| Bulma        | `scalatags.Text` (JVM)   | `\"io.github.nafg.css-dsl\" %% \"bulma_scalatags\" % \"0.9.0\"`           |\n| Bulma        | scalajs-react (scala.js) | `\"io.github.nafg.css-dsl\" %%% \"bulma_scalajsreact\" % \"0.9.0\"`       |\n| Fomantic UI  | `scalatags.Text` (JVM)   | `\"io.github.nafg.css-dsl\" %% \"fomanticui_scalatags\" % \"0.9.0\"`      |\n| Fomantic UI  | scalajs-react (scala.js) | `\"io.github.nafg.css-dsl\" %%% \"fomanticui_scalajsreact\" % \"0.9.0\"`  |\n| Font Awesome | `scalatags.Text` (JVM)   | `\"io.github.nafg.css-dsl\" %% \"fontawesome_scalatags\" % \"0.9.0\"`     |\n| Font Awesome | scalajs-react (scala.js) | `\"io.github.nafg.css-dsl\" %%% \"fontawesome_scalajsreact\" % \"0.9.0\"` |\n| Semantic UI  | `scalatags.Text` (JVM)   | `\"io.github.nafg.css-dsl\" %% \"semanticui_scalatags\" % \"0.9.0\"`      |\n| Semantic UI  | scalajs-react (scala.js) | `\"io.github.nafg.css-dsl\" %%% \"semanticui_scalajsreact\" % \"0.9.0\"`  |\n\n\n### Import\n\n| CSS library  | Prefix | Import                              |\n|--------------|--------|-------------------------------------|\n| Bootstrap 3  | None   | `import cssdsl.bootstrap3.Dsl._`    |\n| Bootstrap 3  | `bs`   | `import cssdsl.bootstrap3.BsDsl._`  |\n| Bootstrap 3  | `bs3`  | `import cssdsl.bootstrap3.Bs3Dsl._` |\n| Bootstrap 4  | None   | `import cssdsl.bootstrap4.Dsl._`    |\n| Bootstrap 4  | `bs`   | `import cssdsl.bootstrap4.BsDsl._`  |\n| Bootstrap 4  | `bs4`  | `import cssdsl.bootstrap4.Bs4Dsl._` |\n| Bootstrap 5  | None   | `import cssdsl.bootstrap5.Dsl._`    |\n| Bootstrap 5  | `bs`   | `import cssdsl.bootstrap5.BsDsl._`  |\n| Bootstrap 5  | `bs5`  | `import cssdsl.bootstrap5.Bs5Dsl._` |\n| Bulma        | None   | `import cssdsl.bulma.Dsl._`         |\n| Bulma        | `b`    | `import cssdsl.bulma.BDsl._`        |\n| Fomantic UI  | `f`    | `import cssdsl.fomanticui.FDsl._`   |\n| Font Awesome | None   | `import cssdsl.fontawesome.Dsl._`   |\n| Font Awesome | `fa`   | `import cssdsl.fontawesome.FaDsl._` |\n| Semantic UI  | `s`    | `import cssdsl.semanticui.SDsl._`   |\n\n\n\u003c!-- End autogenerated via sbt generateInstallInstructions --\u003e\n\n\n### Code\n\nThe import gives you two things:\n \n1. 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 `apply`ing modifiers and content to it).\n2. 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.\n\nFor an example illustrating both see the second snippet at the top of this file.\n\nIf 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`.\n\n## Contributing\n\nThe DSLs are generated using [ph-css](https://github.com/phax/ph-css) and [Scalameta](https://scalameta.org/).\nThe CSS is read from a CDN and parsed, class selectors are extracted, and their names are converted to camel case.\n \nIf you want to add or update a CSS framework you just have to update `build.sbt`.\n\nTo add a new target library you first have to implement it in [project/TargetImpl.scala](project/TargetImpl.scala).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnafg%2Fcss-dsl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnafg%2Fcss-dsl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnafg%2Fcss-dsl/lists"}