https://github.com/animagram-jp/css
Css universal design boilerplate. Works without interference to HTML.
https://github.com/animagram-jp/css
css dads derivative front-end html html5 javascript ui universal-design
Last synced: 18 days ago
JSON representation
Css universal design boilerplate. Works without interference to HTML.
- Host: GitHub
- URL: https://github.com/animagram-jp/css
- Owner: animagram-jp
- License: apache-2.0
- Created: 2026-03-07T00:19:30.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2026-07-05T14:24:37.000Z (20 days ago)
- Last Synced: 2026-07-05T16:05:23.033Z (19 days ago)
- Topics: css, dads, derivative, front-end, html, html5, javascript, ui, universal-design
- Language: CSS
- Homepage: https://animagram-jp.github.io/css/
- Size: 194 KB
- Stars: 1
- Watchers: 0
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Notice: NOTICE
Awesome Lists containing this project
README
# css
Css universal design boilerplate. Works without interference to HTML.
- CSS drives appearance; HTML structure is not dictated by CSS.
- Single-element components: one class on a semantic or just select block/inline element, no wrappers.
- Multi-element components: composed from semantic tags only (`table > th`, `details > summary`, etc.), no div wrappers required by CSS.
- div-based layouts must be rewritten to use semantic elements (`article`, `section`, `figure`, etc.)
- JS that holds state belongs to WAM (Web Application Module) layer; CSS-only components must render correctly without JS.
## Version
| Version | Status | Date | Description |
|---------|-----------|------------|-------------|
| 0.1.0 | Released | 2026-03-09 | create following DADS(html) |
| 0.1.1 | Released | 2026-04-28 | update following DADS(html) |
| 0.1.2 | Current | 2026-06-06 | rename to css repository |
## Reference
- [DADS(html)](https://github.com/digital-go-jp/design-system-example-components-html)
## Changelog
- CSS/JS components only, no build tooling from Dads(html).
- Custom font-family applied in global.css.
- Single html and replace images with svg placeholders.
- Unwrap single element css components.
- Delete div wrapper in table.css.
- Delete table/scroll-shadow.js
- Edit radio.css to remove wrapper divs.
- Edit input-text.css to remove wrapper span.
- Delete language-selector and edit menu-list-box to list-box.
- Edit form-control-label.css and textarea.css.
- Add input-number.
- Change button, input, textarea to display:inline-flex.
- Normalize dads-size (renamed from dada-size) betweeen button, input and textarea.
- Edit heading to remove wrapper hgroup dependency and rename to class dads-h.
- Make dads-size="md" fallback when no selecting.
- rename input-text to input and assemble input-number into input.css.
## `dads-size` — Size Scale
The `size` attribute (`dads-size="sm"` etc.) controls the physical density of a component. The intended shared values per tier are:
| `dads-size` | height | padding (block) | padding (inline) | font-size | line-height |
|-------------|--------|-----------------|------------------|-----------|-------------|
| `xs` | 1.75rem | 0.125rem | 0.5rem | 0.875rem | 1 |
| `sm` | 2.5rem | — | — | 1rem | — |
| `md` | 3rem | — | — | 1rem | — |
| `lg` | 3.5rem | — | — | 1rem | — |
`—` = Components unique as below
### button
| `dads-size` | min-height | padding (block) | padding (inline) | font-size | line-height |
|-------------|------------|-----------------|------------------|-----------|-------------|
| `xs` | 1.75rem | 0.125rem | 0.5rem | 0.875rem | 1 |
| `sm` | 2.5rem | 0.125rem | 0.75rem | 1rem | 1 |
| `md` | 3rem | 0.5rem | 1rem | 1rem | 1 |
| `lg` | 3.5rem | 0.75rem | 1rem | 1rem | 1 |
### input
| `dads-size` | height | padding (block) | padding (inline) | font-size | line-height | width |
|-------------|---------|-----------------|------------------|-----------|-------------|--------|
| `sm` | 2.5rem | 0.75rem | 1rem | 1rem | 1.7 | 12rem |
| `md` | 3rem | 0.75rem | 1rem | 1rem | 1.7 | 12rem |
| `lg` | 3.5rem | 0.75rem | 1rem | 1rem | 1.7 | 12rem |
### input-number
| `dads-size` | height | button width | input | font-size | line-height | 全体 width |
|-------------|---------|--------------|--------------|-----------|-------------|------------|
| `sm` | 2.5rem | 2rem | flex: 1 | 1rem | 1.7 | 12rem |
| `md` | 3rem | 2rem | flex: 1 | 1rem | 1.7 | 12rem |
| `lg` | 3.5rem | 2rem | flex: 1 | 1rem | 1.7 | 12rem |
### select
| `dads-size` | height | padding-inline-start | padding-inline-end | line-height |
|-------------|---------|----------------------|--------------------|-------------|
| `sm` | 2.5rem | 1rem | 2.5rem | 1 |
| `md` | 3rem | 1rem | 2.5rem | 1 |
| `lg` | 3.5rem | 1rem | 2.5rem | 1 |
### textarea
| `dads-size` | padding (block) | padding (inline) | font-size | line-height | width |
|-------------|-----------------|------------------|-----------|-------------|--------|
| `sm` | 0.75rem | 1rem | 1rem | 1.5 | 100% |
| `md` | 0.75rem | 1rem | 1rem | 1.6 | 100% |
| `lg` | 0.75rem | 1rem | 1rem | 1.7 | 100% |
### checkbox
| `dads-size` | 行高 | input-size | hover-size | gap | border-width | padding-block | label font-size | line-height |
|-------------|--------|------------|------------|---------|--------------|---------------|-----------------|-------------|
| `sm` | 40px | 1.25rem | 1.5rem | 0.25rem | 0.125rem | 0.625rem | 1rem | 1 |
| `md` | 48px | 1.625rem | 2rem | 0.5rem | 0.125rem | 0.6875rem | 1rem | 1 |
| `lg` | 56px | 2.25rem | 2.75rem | 0.5rem | 0.1875rem | 0.625rem | 1rem | 1 |
#### radio
| `dads-size` | 行高 | outer-size | inner-size | hover-size | gap | border-width | padding-block | label font-size | line-height |
|-------------|--------|------------|------------|------------|---------|--------------|---------------|-----------------|-------------|
| `sm` | 40px | 1.25rem | 0.625rem | 1.5rem | 0.25rem | 0.125rem | 0.6rem | 1rem | 1 |
| `md` | 48px | 1.625rem | 0.75rem | 2rem | 0.5rem | 0.125rem | 0.6875rem | 1rem | 1 |
| `lg` | 56px | 2.25rem | 1rem | 2.75rem | 0.75rem | 0.1875rem | 0.625rem | 1rem | 1 |
## License
```
SPDX-License-Identifier: Apache-2.0
Copyright (c) 2026 Andyou
```
Also see [Notice](./NOTICE).