Skip to content

Commit

Permalink
variable formatting and demo layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@theorosendorf
theorosendorf committed Sep 22, 2024
1 parent 69ec9de commit cf29656
Show file tree
Hide file tree
Showing 3 changed files with 156 additions and 119 deletions.
42 changes: 21 additions & 21 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,18 +91,18 @@ You can also see Textblock in action at [Textblock.io](https://textblock.io).
- **`target`** (required): The CSS selector for the element that should be resized, e.g., `".your-class"`, `"#some-id p"`.
- **`minWidth`**: The minimum container width. Default: `320`.
- **`maxWidth`**: The maximum container width. Default: `960`.
- **`fontSizeMinWidth`**: The font size at the minimum width. Default: `1.0`.
- **`fontSizeMaxWidth`**: The font size at the maximum width. Default: `1.8`.
- **`lineHeightMinWidth`**: The line height at the minimum width (unitless). Default: `1.33`.
- **`lineHeightMaxWidth`**: The line height at the maximum width (unitless). Default: `1.25`.
- **`variableGradeMinWidth`**: The font weight (for variable fonts) at the minimum width, e.g., `450`.
- **`variableGradeMaxWidth`**: The font weight at the maximum width, e.g., `400`.
- **`fontSize_MinWidth`**: The font size at the minimum width. Default: `1.0`.
- **`fontSize_MaxWidth`**: The font size at the maximum width. Default: `1.8`.
- **`lineHeight_MinWidth`**: The line height at the minimum width (unitless). Default: `1.33`.
- **`lineHeight_MaxWidth`**: The line height at the maximum width (unitless). Default: `1.25`.
- **`variableGrade_MinWidth`**: The font weight (for variable fonts) at the minimum width, e.g., `450`.
- **`variableGrade_MaxWidth`**: The font weight at the maximum width, e.g., `400`.
- **`container`**: Determines whether the element's own width (`"self"`) or its parent container's width (`"parent"`) is used. Default: `"parent"`.
- **`fontSizeUnits`**: The units for font size, e.g., `"em"`, `"px"`, `"rem"`. Default: `"em"`.
- **`fontSize_Units`**: The units for font size, e.g., `"em"`, `"px"`, `"rem"`. Default: `"em"`.

For a better sense of context, set your root em to `10px` with `html { font-size: 62.5%; }`. This makes your em units base 10 so `2.4em` = `24px`. But any number will do because once you start adjusting the min/max numbers, the experience is more visual than calculated. And if you prefer a more scientific approach, Textblock gives you the control you need for setting systems like modular scales.

If you’re using variable fonts, the `variableGradeMinWidth` / `variableGradeMaxWidth` parameters provide a way to simulate grades (micro-variations in weight to set smaller sizes slightly bolder).
If you’re using variable fonts, the `variableGrade_MinWidth` / `variableGrade_MaxWidth` parameters provide a way to simulate grades (micro-variations in weight to set smaller sizes slightly bolder).

### Example

Expand All @@ -111,14 +111,14 @@ Textblock([{
 target: ".some-class",
 minWidth: 280,
 maxWidth: 800,
 fontSizeMinWidth: 1.9,
 fontSizeMaxWidth: 2.6,
 lineHeightMinWidth: 1.33,
 lineHeightMaxWidth: 1.25,
 variableGradeMinWidth: 366,
 variableGradeMaxWidth: 300,
 fontSize_MinWidth: 1.9,
 fontSize_MaxWidth: 2.6,
 lineHeight_MinWidth: 1.33,
 lineHeight_MaxWidth: 1.25,
 variableGrade_MinWidth: 366,
 variableGrade_MaxWidth: 300,
 container: "self",
 fontSizeUnits: "rem"
 fontSize_Units: "rem"
}]);
```

Expand All @@ -128,15 +128,15 @@ Textblock([{
Textblock([
 {
  target: ".some-class",
  fontSizeMinWidth: 1.9,
  fontSizeMaxWidth: 2.6
  fontSize_MinWidth: 1.9,
  fontSize_MaxWidth: 2.6
 },
 {
  target: ".another-class",
  fontSizeMinWidth: 2.4,
  fontSizeMaxWidth: 3.6,
  variableGradeMinWidth: 450,
  variableGradeMaxWidth: 400,
  fontSize_MinWidth: 2.4,
  fontSize_MaxWidth: 3.6,
  variableGrade_MinWidth: 450,
  variableGrade_MaxWidth: 400,
  container: "self"
 }
]);
Expand Down
195 changes: 116 additions & 79 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
container: "self"
},
{
target: ".mars",
target: "#mars",
minWidth: 400,
maxWidth: 800,
minWidth_FontSize: 4,
Expand Down Expand Up @@ -74,6 +74,18 @@
maxWidthLineHeight: 1.2,
minWidthVariableGrade: 425,
maxWidthVariableGrade: 400
},
{
target: "#parameters",
minWidth: 800,
maxWidth: 1024,
fontSize_MinWidth: 1.8,
fontSize_MaxWidth: 1.8,
lineHeight_MinWidth: 1,
lineHeight_MaxWidth: 1,
variableGrade_MinWidth: 425,
variableGrade_MaxWidth: 400,
container: "parent"
}
]);
</script>
Expand All @@ -83,27 +95,28 @@
#legacy-params-0-10-0 {
margin-top: 1em;
}
#legacy-params-0-10-0 table {
margin: 1em 0;
font-size: 0.875em;
#parameters {
width: 100%;
padding-top: 3em;
padding-bottom: 2em;
}
#legacy-params-0-10-0 code {
font-family: Courier, monospace;
font-size: 0.875em;
#parameters th,
#parameters td {
padding: 0.5em 2em 0.5em 0.5em;
}
#legacy-params-0-10-0 th {
font-weight: bold;
#parameters td {
border-top: 1px solid lightgray;
}
#legacy-params-0-10-0 th,
#legacy-params-0-10-0 td {
padding: 0.5em 2em 0.5em 0;
#parameters th {
font-weight: bold;
}
#legacy-params-0-10-0 td {
border-top: 1px solid lightgray;
#parameters td.latest,
#parameters td.latest {
color: #000;
}
#parameters {
width: 100%;
padding-top: 2em;
#parameters th:not(.latest),
#parameters td:not(.latest) {
color: #9e9e9e;
}
</style>
</head>
Expand All @@ -126,14 +139,6 @@ <h1>Some Seriously Awful Typesetting Ahead</h1>
</p>
</div>

<div class="mars" style="margin-top: 2em">
<p>
With font-size inversely related to container width, and variable weight and line-height
directly related — Textblock adjusts size, leading, and grades to cast continuously responsive
type. It works over your current CSS as a progressive enhancement.
</p>
</div>

<div id="legacy-params-0-9-9">
<p>
<u>With legacy parameter names from v0.9.9</u> — Textblock adjusts size, leading, and grades to
Expand All @@ -148,60 +153,92 @@ <h1>Some Seriously Awful Typesetting Ahead</h1>
cast continuously responsive type. It works over your current CSS as a progressive enhancement.
Some parameter names have changed:
</p>
<table id="parameters">
<thead>
<tr>
<th>v0.9.9</th>
<th>v0.10.0</th>
<th>v0.12.0</th>
<th>latest</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>minFontSize</code></td>
<td><code>minWidthFontSize</code></td>
<td><code>minWidth_FontSize</code></td>
<td><code>fontSizeMinWidth</code></td>
</tr>
<tr>
<td><code>maxFontSize</code></td>
<td><code>maxWidthFontSize</code></td>
<td><code>maxWidth_FontSize</code></td>
<td><code>fontSizeMaxWidth</code></td>
</tr>
<tr>
<td><code>units</code></td>
<td><code>units</code></td>
<td><code>fontSize_Units</code></td>
<td><code>fontSizeUnits</code></td>
</tr>
<tr>
<td><code>minLineHeight</code></td>
<td><code>minWidthLineHeight</code></td>
<td><code>minWidth_LineHeight</code></td>
<td><code>lineHeightMinWidth</code></td>
</tr>
<tr>
<td><code>maxLineHeight</code></td>
<td><code>maxWidthLineHeight</code></td>
<td><code>maxWidth_LineHeight</code></td>
<td><code>lineHeightMaxWidth</code></td>
</tr>
<tr>
<td><code>minVariableGrade</code></td>
<td><code>minWidthVariableGrade</code></td>
<td><code>minWidth_VariableGrade</code></td>
<td><code>variableGradeMinWidth</code></td>
</tr>
<tr>
<td><code>maxVariableGrade</code></td>
<td><code>maxWidthVariableGrade</code></td>
<td><code>maxWidth_VariableGrade</code></td>
<td><code>variableGradeMaxWidth</code></td>
</tr>
</tbody>
</table>
</div>
<table id="parameters">
<thead>
<tr>
<th class="latest">Latest — v1.x</th>
<th>v0.12.0 (legacy)</th>
<th>v0.10.0 (legacy)</th>
<th>v0.9.9 (legacy)</th>
</tr>
</thead>
<tbody>
<tr>
<td class="latest">target</td>
<td>target</td>
<td>target</td>
<td>target</td>
</tr>
<tr>
<td class="latest">minWidth</td>
<td>minWidth</td>
<td>minWidth</td>
<td>minWidth</td>
</tr>
<tr>
<td class="latest">maxWidth</td>
<td>maxWidth</td>
<td>maxWidth</td>
<td>maxWidth</td>
</tr>
<tr>
<td class="latest">fontSize_MinWidth</td>
<td>minWidth_FontSize</td>
<td>minWidthFontSize</td>
<td>minFontSize</td>
</tr>
<tr>
<td class="latest">fontSize_MaxWidth</td>
<td>maxWidth_FontSize</td>
<td>maxWidthFontSize</td>
<td>maxFontSize</td>
</tr>
<tr>
<td class="latest">fontSize_Units</td>
<td>fontSize_Units</td>
<td>units</td>
<td>units</td>
</tr>
<tr>
<td class="latest">lineHeight_MinWidth</td>
<td>minWidth_LineHeight</td>
<td>minWidthLineHeight</td>
<td>minLineHeight</td>
</tr>
<tr>
<td class="latest">lineHeight_MaxWidth</td>
<td>maxWidth_LineHeight</td>
<td>maxWidthLineHeight</td>
<td>maxLineHeight</td>
</tr>
<tr>
<td class="latest">variableGrade_MinWidth</td>
<td>minWidth_VariableGrade</td>
<td>minWidthVariableGrade</td>
<td>minVariableGrade</td>
</tr>
<tr>
<td class="latest">variableGrade_MaxWidth</td>
<td>maxWidth_VariableGrade</td>
<td>maxWidthVariableGrade</td>
<td>maxVariableGrade</td>
</tr>
<tr>
<td class="latest">container</td>
<td>container</td>
<td>container</td>
<td>container</td>
</tr>
</tbody>
</table>

<div id="mars" style="margin-top: 2em">
<p>
With font-size inversely related to container width, and variable weight and line-height
directly related — Textblock adjusts size, leading, and grades to cast continuously responsive
type. It works over your current CSS as a progressive enhancement.
</p>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit cf29656

Please sign in to comment.