{"id":51482570,"url":"https://github.com/animagram-jp/css","last_synced_at":"2026-07-07T03:01:21.298Z","repository":{"id":342777882,"uuid":"1174883263","full_name":"animagram-jp/css","owner":"animagram-jp","description":"Css universal design boilerplate. Works without interference to HTML.","archived":false,"fork":false,"pushed_at":"2026-07-05T14:24:37.000Z","size":199,"stargazers_count":1,"open_issues_count":2,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-05T16:05:23.033Z","etag":null,"topics":["css","dads","derivative","front-end","html","html5","javascript","ui","universal-design"],"latest_commit_sha":null,"homepage":"https://animagram-jp.github.io/css/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/animagram-jp.png","metadata":{"files":{"readme":"README.md","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,"zenodo":null,"notice":"NOTICE","maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["Andyou007"]}},"created_at":"2026-03-07T00:19:30.000Z","updated_at":"2026-07-05T14:24:41.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/animagram-jp/css","commit_stats":null,"previous_names":["animagram-jp/dads","animagram-jp/css"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/animagram-jp/css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animagram-jp%2Fcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animagram-jp%2Fcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animagram-jp%2Fcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animagram-jp%2Fcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/animagram-jp","download_url":"https://codeload.github.com/animagram-jp/css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/animagram-jp%2Fcss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35212581,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-07T02:00:07.222Z","response_time":90,"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":["css","dads","derivative","front-end","html","html5","javascript","ui","universal-design"],"created_at":"2026-07-07T03:01:20.543Z","updated_at":"2026-07-07T03:01:21.278Z","avatar_url":"https://github.com/animagram-jp.png","language":"CSS","funding_links":["https://github.com/sponsors/Andyou007"],"categories":[],"sub_categories":[],"readme":"# css\n\nCss universal design boilerplate. Works without interference to HTML.\n\n- CSS drives appearance; HTML structure is not dictated by CSS.\n- Single-element components: one class on a semantic or just select block/inline element, no wrappers.\n- Multi-element components: composed from semantic tags only (`table \u003e th`, `details \u003e summary`, etc.), no div wrappers required by CSS.\n- div-based layouts must be rewritten to use semantic elements (`article`, `section`, `figure`, etc.)\n- JS that holds state belongs to WAM (Web Application Module) layer; CSS-only components must render correctly without JS.\n\n## Version\n\n| Version | Status    | Date       | Description |\n|---------|-----------|------------|-------------|\n| 0.1.0   | Released  | 2026-03-09 | create following DADS(html) |\n| 0.1.1   | Released  | 2026-04-28 | update following DADS(html) |\n| 0.1.2   | Current   | 2026-06-06 | rename to css repository |\n\n## Reference\n\n- [DADS(html)](https://github.com/digital-go-jp/design-system-example-components-html)\n\n## Changelog\n\n- CSS/JS components only, no build tooling from Dads(html).\n- Custom font-family applied in global.css.\n- Single html and replace images with svg placeholders.\n- Unwrap single element css components.\n- Delete div wrapper in table.css.\n- Delete table/scroll-shadow.js\n- Edit radio.css to remove wrapper divs.\n- Edit input-text.css to remove wrapper span.\n- Delete language-selector and edit menu-list-box to list-box.\n- Edit form-control-label.css and textarea.css.\n- Add input-number.\n- Change button, input, textarea to display:inline-flex.\n- Normalize dads-size (renamed from dada-size) betweeen button, input and textarea.\n- Edit heading to remove wrapper hgroup dependency and rename to class dads-h.\n- Make dads-size=\"md\" fallback when no selecting.\n- rename input-text to input and assemble input-number into input.css.\n\n## `dads-size` — Size Scale\n\nThe `size` attribute (`dads-size=\"sm\"` etc.) controls the physical density of a component. The intended shared values per tier are:\n\n| `dads-size` | height | padding (block) | padding (inline) | font-size | line-height |\n|-------------|--------|-----------------|------------------|-----------|-------------|\n| `xs`        | 1.75rem | 0.125rem        | 0.5rem           | 0.875rem  | 1           |\n| `sm`        | 2.5rem  | —               | —                | 1rem      | —           |\n| `md`        | 3rem    | —               | —                | 1rem      | —           |\n| `lg`        | 3.5rem  | —               | —                | 1rem      | —           |\n\n`—` = Components unique as below\n\n### button\n\n| `dads-size` | min-height | padding (block) | padding (inline) | font-size | line-height |\n|-------------|------------|-----------------|------------------|-----------|-------------|\n| `xs`        | 1.75rem    | 0.125rem        | 0.5rem           | 0.875rem  | 1           |\n| `sm`        | 2.5rem     | 0.125rem        | 0.75rem          | 1rem      | 1           |\n| `md`        | 3rem       | 0.5rem          | 1rem             | 1rem      | 1           |\n| `lg`        | 3.5rem     | 0.75rem         | 1rem             | 1rem      | 1           |\n\n### input\n\n| `dads-size` | height  | padding (block) | padding (inline) | font-size | line-height | width  |\n|-------------|---------|-----------------|------------------|-----------|-------------|--------|\n| `sm`        | 2.5rem  | 0.75rem         | 1rem             | 1rem      | 1.7         | 12rem  |\n| `md`        | 3rem    | 0.75rem         | 1rem             | 1rem      | 1.7         | 12rem  |\n| `lg`        | 3.5rem  | 0.75rem         | 1rem             | 1rem      | 1.7         | 12rem  |\n\n### input-number\n\n| `dads-size` | height  | button width | input        | font-size | line-height | 全体 width |\n|-------------|---------|--------------|--------------|-----------|-------------|------------|\n| `sm`        | 2.5rem  | 2rem         | flex: 1      | 1rem      | 1.7         | 12rem      |\n| `md`        | 3rem    | 2rem         | flex: 1      | 1rem      | 1.7         | 12rem      |\n| `lg`        | 3.5rem  | 2rem         | flex: 1      | 1rem      | 1.7         | 12rem      |\n\n### select\n\n| `dads-size` | height  | padding-inline-start | padding-inline-end | line-height |\n|-------------|---------|----------------------|--------------------|-------------|\n| `sm`        | 2.5rem  | 1rem                 | 2.5rem             | 1           |\n| `md`        | 3rem    | 1rem                 | 2.5rem             | 1           |\n| `lg`        | 3.5rem  | 1rem                 | 2.5rem             | 1           |\n\n### textarea\n\n| `dads-size` | padding (block) | padding (inline) | font-size | line-height | width  |\n|-------------|-----------------|------------------|-----------|-------------|--------|\n| `sm`        | 0.75rem         | 1rem             | 1rem      | 1.5         | 100%   |\n| `md`        | 0.75rem         | 1rem             | 1rem      | 1.6         | 100%   |\n| `lg`        | 0.75rem         | 1rem             | 1rem      | 1.7         | 100%   |\n\n### checkbox\n\n| `dads-size` | 行高   | input-size | hover-size | gap     | border-width | padding-block | label font-size | line-height |\n|-------------|--------|------------|------------|---------|--------------|---------------|-----------------|-------------|\n| `sm`        | 40px   | 1.25rem    | 1.5rem     | 0.25rem | 0.125rem     | 0.625rem      | 1rem            | 1           |\n| `md`        | 48px   | 1.625rem   | 2rem       | 0.5rem  | 0.125rem     | 0.6875rem     | 1rem            | 1           |\n| `lg`        | 56px   | 2.25rem    | 2.75rem    | 0.5rem  | 0.1875rem    | 0.625rem      | 1rem            | 1           |\n\n#### radio\n\n| `dads-size` | 行高   | outer-size | inner-size | hover-size | gap     | border-width | padding-block | label font-size | line-height |\n|-------------|--------|------------|------------|------------|---------|--------------|---------------|-----------------|-------------|\n| `sm`        | 40px   | 1.25rem    | 0.625rem   | 1.5rem     | 0.25rem | 0.125rem     | 0.6rem        | 1rem            | 1           |\n| `md`        | 48px   | 1.625rem   | 0.75rem    | 2rem       | 0.5rem  | 0.125rem     | 0.6875rem     | 1rem            | 1           |\n| `lg`        | 56px   | 2.25rem    | 1rem       | 2.75rem    | 0.75rem | 0.1875rem    | 0.625rem      | 1rem            | 1           |\n\n## License\n\n```\nSPDX-License-Identifier: Apache-2.0\nCopyright (c) 2026 Andyou \u003candyou@animagram.jp\u003e\n```\n\nAlso see [Notice](./NOTICE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanimagram-jp%2Fcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanimagram-jp%2Fcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanimagram-jp%2Fcss/lists"}