{"id":14066686,"url":"https://github.com/ThinkR-open/w3css","last_synced_at":"2025-07-29T23:32:01.467Z","repository":{"id":48376992,"uuid":"296606189","full_name":"ThinkR-open/w3css","owner":"ThinkR-open","description":"[WIP] Implementation of W3.CSS for {shiny}","archived":false,"fork":false,"pushed_at":"2023-03-27T10:44:19.000Z","size":107,"stargazers_count":6,"open_issues_count":27,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-19T19:07:28.887Z","etag":null,"topics":["golemverse","shiny"],"latest_commit_sha":null,"homepage":"","language":"R","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ThinkR-open.png","metadata":{"files":{"readme":"README.Rmd","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-09-18T11:50:02.000Z","updated_at":"2024-10-24T22:55:21.000Z","dependencies_parsed_at":"2025-07-02T06:31:49.198Z","dependency_job_id":null,"html_url":"https://github.com/ThinkR-open/w3css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ThinkR-open/w3css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThinkR-open%2Fw3css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThinkR-open%2Fw3css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThinkR-open%2Fw3css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThinkR-open%2Fw3css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ThinkR-open","download_url":"https://codeload.github.com/ThinkR-open/w3css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThinkR-open%2Fw3css/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267780014,"owners_count":24143201,"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","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["golemverse","shiny"],"created_at":"2024-08-13T07:05:13.040Z","updated_at":"2025-07-29T23:32:01.153Z","avatar_url":"https://github.com/ThinkR-open.png","language":"R","funding_links":[],"categories":["R"],"sub_categories":[],"readme":"---\noutput: github_document\n---\n\n\u003c!-- README.md is generated from README.Rmd. Please edit that file --\u003e\n\n```{r, include = FALSE}\nknitr::opts_chunk$set(\n  collapse = TRUE,\n  comment = \"#\u003e\",\n  fig.path = \"man/figures/README-\",\n  out.width = \"100%\",\n  eval = FALSE\n)\n```\n\n# w3css\n\n\u003c!-- badges: start --\u003e\n[![Lifecycle: experimental](https://img.shields.io/badge/lifecycle-experimental-orange.svg)](https://lifecycle.r-lib.org/articles/stages.html#experimental)\n[![R-CMD-check](https://github.com/thinkr-open/w3css/actions/workflows/R-CMD-check.yaml/badge.svg)](https://github.com/thinkr-open/w3css/actions/workflows/R-CMD-check.yaml)\n\u003c!-- badges: end --\u003e\n\n[WORK IN PROGRESS] There are still a lot of elements/features to implement.\n\nAn implementation of W3 CSS \u003chttps://www.w3schools.com/w3css/\u003e for 'shiny'.\n\n## Installation\n\n``` r\nremotes::install_github(\"thinkr-open/w3css\")\n```\n\n## About\n\nYou're reading the doc about version : `r pkgload::pkg_version()`\n\nThis README has been compiled on the\n\n```{r eval = TRUE}\nSys.time()\n```\n\nHere are the test \u0026 coverage results :\n\n```{r eval = TRUE}\ndevtools::check(quiet = TRUE)\n```\n\n```{r echo = FALSE, eval = TRUE}\nunloadNamespace(\"w3css\")\n```\n\n```{r eval = TRUE}\ncovr::package_coverage()\n```\n\n## Note about W3.CSS approach\n\nW3.CSS philosophy is to allow a lot of flexibily in your UI design by setting CSS class to your component.\nFor example, to create a container with a padding and centered, you'd do:\n\n```html\n\u003cdiv class=\"w3-container w3-center w3-padding-24\"\u003e\n\u003cp\u003e My content \u003c/p\u003e\n\u003c/div\u003e\n```\n\nWhich will be translated here with:\n\n```{r}\nw3_container(\n  class = w3_center(),\n  class = w3_padding(24),\n  htmltools::tags$p(\n    \"My content\"\n  )\n)\n```\n\n## Example\n\n```{r}\nlibrary(w3css)\nlibrary(shiny)\nui \u003c- function() {\n  w3_page(\n    w3_container(\n      w3_panel(\n        w3_actionButton(\n          \"w3_actionButton\",\n          \"Show Modal\"\n        )\n      ),\n      w3_panel(\n        w3_modal(\n          \"w3_modal\",\n          \"Here is a modal\",\n          \"Its body\",\n          \"Its footer\",\n          \"teal\"\n        )\n      ),\n      w3_panel(\n        w3_numericInput(\n          \"w3_numericInput\",\n          \"Enter number\",\n          value = 5,\n          min = 1,\n          max = 10,\n          step = 2\n        ),\n        w3_checkbox(\n          \"w3_checkbox\",\n          \"Click me\"\n        ),\n        w3_checkboxGroupInput(\n          \"w3_checkboxGroupInput\",\n          \"Checkbox group\",\n          choices = letters[1:4]\n        )\n      ),\n      w3_panel(\n        w3_radioButton(\n          \"w3_radioButton\",\n          label = \"Hey there\",\n          choices = letters[1:3]\n        )\n      ),\n      w3_panel(\n        w3_selectInput(\n          \"w3_selectInput\",\n          label = \"Hey there\",\n          choices = letters[1:3]\n        )\n      ),\n      w3_panel(\n        w3_textInput(\n          \"w3_textInput\",\n          \"Text\"\n        )\n      ),\n      w3_panel(\n        w3_passwordInput(\n          \"w3_passwordInput\",\n          \"password\"\n        )\n      ),\n      w3_panel(\n        w3_dateInput(\n          \"w3_dateInput\",\n          \"Pick a date\"\n        )\n      ),\n      w3_panel(\n        w3_editableListInput(\n          \"w3_editableListInput\",\n          \"Editable list\",\n          choices = names(mtcars)\n        )\n      )\n    )\n  )\n}\n\nserver \u003c- function(\n  input,\n  output,\n  session\n    ) {\n  observeEvent(input$w3_actionButton, {\n    print(input$w3_actionButton)\n    req(input$w3_actionButton \u003e 0)\n    w3_show_modal(\"w3_modal\")\n  })\n  observeEvent(input$w3_numericInput, {\n    print(input$w3_numericInput)\n  })\n  observeEvent(input$w3_checkbox, {\n    print(input$w3_checkbox)\n  })\n  observeEvent(input$w3_checkboxGroupInput, {\n    print(input$w3_checkboxGroupInput)\n  })\n  observeEvent(input$w3_radioButton, {\n    print(input$w3_radioButton)\n  })\n  observeEvent(input$w3_selectInput, {\n    print(input$w3_selectInput)\n  })\n  observeEvent(input$w3_textInput, {\n    print(input$w3_textInput)\n  })\n  observeEvent(input$w3_passwordInput, {\n    print(input$w3_passwordInput)\n  })\n  observeEvent(input$w3_dateInput, {\n    print(input$w3_dateInput)\n  })\n  observeEvent(input$w3_editableListInput, {\n    print(input$w3_editableListInput)\n  })\n}\n\nshinyApp(ui, server)\n```\n\n```{r}\npkgload::load_all()\nlibrary(shiny)\nui \u003c- function(request) {\n  w3_page(\n    w3_actionButton(\n      \"w3_actionButton\",\n      \"Update\"\n    ),\n    w3_numericInput(\n      \"w3_numericInput\",\n      \"Enter number\",\n      value = 5,\n      min = 1,\n      max = 10,\n      step = 2\n    ),\n    w3_selectInput(\n      \"w3_selectInput\",\n      \"Select\",\n      choices = letters\n    )\n  )\n}\n\nserver \u003c- function(\n  input,\n  output,\n  session\n    ) {\n  observeEvent(\n    input$w3_actionButton,\n    {\n      w3_updateNumericInput(\n        \"w3_numericInput\",\n        \"Enter number\",\n        value = 15,\n        min = 5,\n        max = 55,\n        step = 3\n      )\n      w3_updateSelectInput(\n        \"w3_selectInput\",\n        \"Select\",\n        choices = LETTERS\n      )\n    },\n    ignoreInit = TRUE\n  )\n\n  observe({\n    print(input$ w3_selectInput)\n  })\n}\n\nshinyApp(ui, server)\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FThinkR-open%2Fw3css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FThinkR-open%2Fw3css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FThinkR-open%2Fw3css/lists"}