Description
Generate distinct ordered integer breakpoint widths with a caller-selected minimum gap and exact feasibility checks.
An interface fixture makes content and state explicit so a consumer can test a rendering or interaction. Literal labels, modeled states, and calculated geometry remain separate from what a browser or assistive technology actually displays or announces.
Generate distinct ordered integer breakpoint widths with a caller-selected minimum gap and exact feasibility checks.
When to use this tool
Use this generator to create reproducible responsive breakpoint set cases from the supplied model or bank. Inspect the returned evidence before using cases in a test or exercise.
How to use the tool and how it works
- Supply count, minimumWidthPx, maximumWidthPx, minimumGapPx in the field shapes below. Set seed when you need an explicit replay.
- Run the tool and correct any input error. For generated controls, distinguish a successful fixture containing an invalid case from failure to generate the fixture.
- Read widthsPx, mediaQueries. Use the conventions below and keep answer-bearing fields separate when presenting an exercise.
Sample distinct positions from a compressed integer width interval, sort them, and expand by index times minimumGapPx minus one to enforce the requested spacing. Return ascending widths and corresponding min-width media-query strings.1
Delegated operations used for this result: sort numbers; unique. Their calculation or parsing conventions apply to the corresponding result fields.2, 3
| Input field | Meaning and units | Accepted input |
|---|---|---|
| count | Requested count; the mechanics explain whether one draw expands into several returned records. | Required. Safe integer; minimum 1; maximum 64. |
| minimumWidthPx | Minimum Width Px | Required. Safe integer; minimum 0. |
| maximumWidthPx | Maximum Width Px | Required. Safe integer; minimum 0. |
| minimumGapPx | Minimum Gap Px | Required. Safe integer; minimum 1. |
| seed | Optional numeric seed; takes precedence over context randomness. Without either, use the fixed tool.io default seed. | Optional. Safe integer. |
| Output field | Interpretation | Returned shape |
|---|---|---|
| widthsPx | Widths Px | Required. Array of Safe integer; minimum 0.; minimum items 1; maximum items 64. |
| mediaQueries | Media Queries | Required. Array of Text; maximum UTF-16 length 128.; minimum items 1; maximum items 64. |
| randomness | Replay metadata: source is seed or context; seed is the normalized 32-bit seed or null for a context source. | Required. Object; no unknown keys. |
| randomness.seed | Optional numeric replay seed; normalization and precedence are explained below. | Required. Safe integer. or Null. |
| randomness.source | Source | Required. Text; one of "context", "seed". |
An explicit safe-integer seed takes precedence over injected context randomness and is normalized to an unsigned 32-bit integer. With no seed and no context source, replay uses the fixed tool.io default seed. A context source must return finite values from zero inclusive to one exclusive; its advancing state must be retained separately. randomness records the source and normalized seed, or null for context. These generators are not cryptographic random sources.
{
"input": {
"count": 3,
"minimumWidthPx": 320,
"maximumWidthPx": 960,
"minimumGapPx": 320,
"seed": 42
},
"output": {
"widthsPx": [
320,
640,
960
],
"mediaQueries": [
"@media (min-width: 320px)",
"@media (min-width: 640px)",
"@media (min-width: 960px)"
],
"randomness": {
"seed": 42,
"source": "seed"
}
}
}Limitations and assumptions
- The inclusive range must have enough room for all gaps. Generated breakpoints are synthetic candidate thresholds, not recommendations derived from devices, layout content, or measured traffic.
- A replay requires the same complete input and implementation. Randomized construction does not guarantee uniform coverage of every feasible output; finite samples can repeat unless a distinct-selection rule is explicitly stated.
- The field tables state structural bounds; cross-field constraints and bounded search or output budgets also apply. Unknown keys are rejected where the object contract disallows them. Input errors are distinct from null fields and deliberate invalid controls in a successful output.
Alternative or Complementary methods
For a supplied example, inspect the returned construction or delegated check directly. To evaluate a consumer, also test cases chosen for its own boundaries; a generated finite corpus does not establish exhaustive coverage.
References
Similar or alternative tools
- Random UI Theme Color Set Generator
Generate a random accent for a supplied opaque background under explicit contrast policies, select black/white text roles by the imported luminance contrast calculation and return role checks; not a complete theme or accessibility certification.
- Random Heading Hierarchy Mutation Corpus Generator
Mutate caller heading sequences at a constructible interior position to introduce an upward skip, retaining baseline and mutated markup and the existing outline heuristic.