Skip to content

Commit c81da71

Browse files
tajmonetajmone
committed
Apply Modular Scale
Now the stylesheet uses modular scale, exposed via global CSS variables (on :root) which end users can re-use to extend the stylesheet, or modify their values to change the scale ratio and/or base font-size. The ToC was improved, reducing font-sizes, and ensuring that a ToC position at "top" has a nice frame to distinguish it from the main text. Start documenting the work done so far, along with the pending taks, within the README of the New Default Theme.
1 parent c763ef4 commit c81da71

File tree

4 files changed

+177
-16
lines changed

4 files changed

+177
-16
lines changed

‎css__default-new/README.md

+51
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@ An attempt to Sassify and improve the default PML stylesheet according to [SMACS
1111
- [About](#about)
1212
- [Goals](#goals)
1313
- [Going SMACSS](#going-smacss)
14+
- [Stylesheet Status](#stylesheet-status)
1415
- [Links](#links)
16+
- [Free Online Books](#free-online-books)
1517
- [CSS for Printed Media](#css-for-printed-media)
1618

1719
<!-- /MarkdownTOC -->
@@ -63,11 +65,49 @@ Furthermore, the fact that all classes are prefixed with `pml-` doesn't help muc
6365
6466
But then, since currently PML doesn't empower the end user to control the generated HTML tags and their classes, we'll have to work with what we can, and "make do" whatever PML throws at us. Hopefully, comments in the Sass sources will help to clarify the pros and cons of the current PML template situation, and help up work around such limitations.
6567
68+
69+
# Stylesheet Status
70+
71+
The following task-list is a provisional roadmap for the stylesheet work.
72+
73+
74+
- [ ] **DOCUMENT PAGE** — i.e. the document contents "proper," regardless of the page layout, responsive design issues, etc., focusing on the quality of the web typography adopted in the contents, with the goal to improve readability via elegant "typesetting".
75+
- [ ] **modular scale** — apply a modular scale to the various font sizes used in the document:
76+
- [x] **major second** &rarr; ratio: `1.125` (8:9) — this is a nice scale since it allows to cover all elements from the doc title (`<h1>`) down to the body text without excessive font size difference, yet retain an harmonious growth.
77+
- [x] **CSS variables**: All modular scale values are exposed to the user via global `:root` vars: `--ms6` .. `--ms0` .. `--ms-6`.
78+
- [x] `--ms6` .. `--ms1` are used for headings `<h1>` .. `<h5>`, with `<h6>` sharing the same size of `<h5>` but being italicized to distinguish between them. Var `--ms0` is used for main body text (`<body>`, `<p>`, ecc.), and `--ms-1` for `<small>` and any other smaller element that might need it.
79+
- [ ] Fix those elements in the stylesheet which are still using the original font-size definitions:
80+
- [x] `.pml-quote-text*` (block quotes)
81+
- [ ] Now use `--ms*` vars instead, by needs thorough checking and adjusting.
82+
- [x] `.pml-code`, `.pml-inline-code`, `.pml-input`, `.pml-output` (verbatim/code elements)
83+
- [x] Custom values replaced with `--ms-1` (i.e. small).
84+
- [ ] **printed-media stylesheet** (postponed to later on)
85+
- [ ] **Typography** — apply best practices CSS rules to enforce good typography on the entire document:
86+
- [ ] Carefully pick good fonts that pair well:
87+
- [ ] **Serif** (currently using a Serif font for both body and titles)
88+
- [ ] **Sans-serif?** (i.e. for headings and titles)
89+
- [ ] **Monospace**
90+
- [ ] For each chosen font, ensure that proper ratios are adopted for line-height, letter-spacing, etc., according to typographic guidelines.
91+
- [ ] **Body text** — ensure that paragraph and other main body text elements are given proper CSS rules to control:
92+
- [ ] [Measure][§2.1.2] (aka _line length_): between 45 to 75 characters, according to font-face and context (e.g. columns can have shorter measure).
93+
- [ ] [Hyphenation][§2.4].
94+
- [ ] [Orphans/Widows][§2.4.8].
95+
- [ ] Ragging (alignment/justification): apply rules to prevent "rivers" (for browsers which support advanced features).
96+
- [ ] Indentation & Vertical-Spacing: automatically handled via CSS rules that follow standard pagination rules (all paragraphs indented except first, spacing before and after quotations, etc.).
97+
- [ ] **Titles/Captions**: ensure that they are given extra letter-spacing, and dedicated hyphenation and orphan rules.
98+
6699
-------------------------------------------------------------------------------
67100
68101
# Links
69102
103+
104+
## Free Online Books
105+
70106
- [SMACSS] — _Scalar and Modular Architecture for CSS_ (+ free eBook).
107+
- [WebTypography.net]
108+
- _[The Elements of Typographic Style Applied to the Web]_ — by Richard Rutter, 2005.
109+
- [clagnut/webtypography] — book sources at GitHub.
110+
71111
72112
## CSS for Printed Media
73113
@@ -87,4 +127,15 @@ But then, since currently PML doesn't empower the end user to control the genera
87127
88128
[SMACSS]: http://smacss.com "SMACSS website + free book"
89129
130+
<!-- WebTypography.net -->
131+
132+
[WebTypography.net]: http://webtypography.net/ "The Elements of Typographic Style Applied to the Web, by Richard Rutter, 2005"
133+
134+
[clagnut/webtypography]: https://github.com/clagnut/webtypography "Source repository of R.Rutter's “The Elements of Typographic Style Applied to the Web”"
135+
136+
[The Elements of Typographic Style Applied to the Web]: http://webtypography.net/toc/ "The Elements of Typographic Style Applied to the Web, by Richard Rutter, 2005"
137+
[§2.1.2]: http://webtypography.net/2.1.2 "The Elements of Typographic Style Applied to the Web: §2.1.2. Choose a comfortable measure"
138+
[§2.4]: http://webtypography.net/2.4.1 "The Elements of Typographic Style Applied to the Web: §2.4. Etiquette of Hyphenation & Pagination"
139+
[§2.4.8]: http://webtypography.net/2.4.8 "The Elements of Typographic Style Applied to the Web: §2.4.8. Never begin a page with the last line of a multi-line paragraph"
140+
90141
<!-- EOF -->

‎css__default-new/sass/_base.scss

+99-11
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,72 @@
1010

1111
// --- Jonathan Snook, "SMACSS" (2011)
1212

13+
@use "sass:map";
14+
15+
$measure: 60ch;
16+
17+
// ======================
18+
// Modular Scale Settings
19+
// ======================
20+
21+
// Modular scale provides harmonious typographic font sizes by applying a
22+
// constant ratio to each font increase and decrease. Best results are usually
23+
// obtained by using one of these three scales, from the 17 available scales:
24+
25+
// 1.125 => (8:9) "major second"
26+
// 1.2 => (4:5) "minor third"
27+
// 1.25 => (5:6) "major third"
28+
29+
// The other scales introduce growth factors which are either too abrupt or too
30+
// subtle. I'm picking the "major second" scale here (ratio 1.125) since it
31+
// provides reasonable defaults to work with. We're exposing the scale values to
32+
// the user via global CSS variables on ":root", so that they can be reused by
33+
// additional custom CSS, and they core values (base font size and scale ratio)
34+
// might also be easily tweaked directly in the generated stylesheet.
35+
36+
// Value "--ms0" is used for the main body text font size (<p> etc.), whereas
37+
// "--ms5" to "--ms1" are used for headings <h1> to <h5>, and <h6> uses the same
38+
// size as <h5> but with added italic. Using a dedicated scale value for <h6>
39+
// ("--ms1") would have lead to <h1> having value "--ms6", which would be far
40+
// too big, compared to the body text; furthermore, <h6> is rarely used
41+
// (shouldn't even be used in good publications), and having it in italic is
42+
// enough to distinguish it from <h5>.
43+
44+
// Anything smaller than the body text should use the "negative" MS vars (e.g.
45+
// <small> = "--ms-1"), although it's unlikely that any typographic element
46+
// might need to be smaller than "--ms-1". Still, these "negative" MS variables
47+
// could come on hand for alignment or spacing purposes, so I'm leaving them
48+
// here even if they are unused by the stylesheet.
49+
50+
// For more info on modular scale in web typography, read:
51+
52+
// https://every-layout.dev/rudiments/modular-scale/
53+
54+
$ms: (
55+
// https://www.modularscale.com/?1.25&rem&1.125
56+
base: 1.25rem,
57+
ratio: 1.125 // => "major second" (8:9)
58+
);
59+
60+
:root {
61+
--measure: #{$measure}; /* max chars per line */
62+
/* modular scale */
63+
--ratio: #{map.get($ms, "ratio")}; /* major second (8:9) */
64+
--ms6: calc(var(--ms5) * var(--ratio));
65+
--ms5: calc(var(--ms4) * var(--ratio));
66+
--ms4: calc(var(--ms3) * var(--ratio));
67+
--ms3: calc(var(--ms2) * var(--ratio));
68+
--ms2: calc(var(--ms1) * var(--ratio));
69+
--ms1: calc(var(--ms0) * var(--ratio));
70+
--ms0: #{map.get($ms, "base")}; /* base font size */
71+
--ms-1: calc(var(--ms0) / var(--ratio));
72+
--ms-2: calc(var(--ms-1) / var(--ratio));
73+
--ms-3: calc(var(--ms-2) / var(--ratio));
74+
--ms-4: calc(var(--ms-3) / var(--ratio));
75+
--ms-5: calc(var(--ms-4) / var(--ratio));
76+
--ms-6: calc(var(--ms-5) / var(--ratio));
77+
}
78+
1379
/* basics */
1480

1581
html {
@@ -19,32 +85,54 @@ html {
1985
body {
2086
height: 100%;
2187
margin: 0;
22-
font-family: Verdana, "Open Sans", sans-serif;
23-
line-height: 1.7;
88+
font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
89+
font-weight: normal;
90+
font-size: var(--ms0);
91+
line-height: 1.4;
2492

2593
/* can be used to globally increase/decrease text size
2694
font-size: 1.2em;
2795
*/
2896
}
2997

30-
98+
small {
99+
font-size: var(--ms-1);
100+
}
31101

32102
/* titles */
33103

34104
h1, h2, h3, h4, h5, h6 {
35-
font-weight: normal;
105+
// font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
106+
font-weight: bold;
36107
color: darkgreen;
37108

38109
margin-top: 1em;
39110
margin-bottom: 0px;
40111
}
41112

42-
h4, h5, h6 {
43-
font-size: 1em;
113+
h1 {
114+
text-align: center;
115+
font-size: var(--ms5);
116+
}
117+
h2 {
118+
font-size: var(--ms4);
119+
}
120+
h3 {
121+
font-size: var(--ms3);
122+
}
123+
h4 {
124+
font-size: var(--ms2);
125+
}
126+
h5, h6 {
127+
font-size: var(--ms1);
128+
}
129+
h6 {
130+
font-style: italic;
44131
}
45132

133+
46134
.pml-doc-title {
47-
font-size: 2.2em;
135+
// font-size: 2.2em; // use ms instead!
48136
margin-top: 0.2em;
49137
}
50138

@@ -130,8 +218,8 @@ h4, h5, h6 {
130218
}
131219

132220
.pml-quote-text-prefix, .pml-quote-text-suffix {
133-
font-family: "Times New Roman";
134-
font-size: 1.5em;
221+
// font-family: "Times New Roman";
222+
font-size: var(--ms1); // was: 1.5em
135223
font-weight: bold;
136224
font-style: italic;
137225
margin-top: -0.4em;
@@ -154,7 +242,7 @@ h4, h5, h6 {
154242
}
155243

156244
.pml-quote-text {
157-
font-size: 1.2em;
245+
font-size: var(--ms1); // was: 1.2em
158246
}
159247

160248
.pml-quote-text .pml-paragraph {
@@ -203,7 +291,7 @@ h4, h5, h6 {
203291
}
204292

205293
.pml-code, .pml-input, .pml-output {
206-
font-size: 0.9em;
294+
font-size: var(--ms-1); // was: 0.9em
207295
line-height: 1.4;
208296
border-radius: 7px;
209297
margin-top: 0.5em;

‎css__default-new/sass/_layout.scss

+4-1
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,10 @@
4949
.pml-doc-text {
5050
flex-grow: 0;
5151
flex-shrink: 3;
52-
max-width: 800px;
52+
max-inline-size: 60ch; // see https://every-layout.dev/rudiments/axioms/#global-defaults
53+
// min-width: 72rch; // i.e. approx. 72 characters "body text"/"measure"
54+
// max-width: 72rch;
55+
// max-width: 800px; // <- original PML CSS
5356
}
5457

5558
.pml-doc-left, .pml-doc-text, .pml-doc-right {

‎css__default-new/sass/_modules.scss

+23-4
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,29 @@
2222

2323
.pml-toc-title {
2424
margin-top: 0.7em;
25+
font-size: var(--ms1);
26+
}
27+
28+
// ToC Position: Top
29+
// =================
30+
article.pml-doc-text > nav.pml-toc {
31+
background: #fbfbfb;
32+
border-width: 1px;
33+
border-radius: 5px;
34+
border-color: #ddd;
35+
border-style: solid;
36+
margin: 1.5em 0;
37+
padding: 0.5em 0.75em 0.75em 0.75em;
38+
.pml-toc-title {
39+
margin-top: 0;
40+
}
41+
}
42+
43+
.pml-toc-tree {
44+
margin-left: 1em;
45+
li {
46+
font-size: var(--ms-1);
47+
}
2548
}
2649

2750
.pml-toc ul {
@@ -54,7 +77,3 @@
5477
.pml-toc summary::-webkit-details-marker {
5578
margin-left: -1em;
5679
}
57-
58-
.pml-toc-tree {
59-
margin-left: 1em;
60-
}

0 commit comments

Comments
 (0)