Skip to content

Commit 9dc19b0

Browse files
macloomacloo
committed
ems to rems
1 parent b73bdff commit 9dc19b0

File tree

7 files changed

+85
-45
lines changed

7 files changed

+85
-45
lines changed

‎basic.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
<body>
1010

11-
<h1>Basic HTML template </h1>
11+
<h1>Basic HTML template</h1>
1212

1313
<p>This is as basic as it gets. No CSS here. Just HTML.</p>
1414

‎boxsizing.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<h1>A box model test page with box-sizing</h1>
1515

1616
<div>
17-
<p>Below are two DIV elements. They have exactly the same CSS styles, with one exception: The top one has <code>box-sizing: border-box</code>, and the bottom one does not.</p>
17+
<p>Below are two bordered DIV elements. They have exactly the same CSS styles, with <em>one exception</em>: The top one has <code>box-sizing: border-box</code>, and the bottom one does not.</p>
1818
</div>
1919

2020
<div class="with-bs">
@@ -26,13 +26,15 @@ <h1>A box model test page with box-sizing</h1>
2626
</div>
2727

2828
<div>
29-
<p>The top DIV element is constrained to the width specified for all DIVs on this page. The bottom DIV is wider, the border width and the padding width having been <em>added</em> to the specified width, which may be given in ems, pixels, or percent.</p>
29+
<p>The top bordered DIV element is constrained to the width specified for all DIVs on this page &mdash; including the DIV that encloses this paragraph. The bottom bordered DIV is wider because the border width and the padding width have been <em>added</em> to the DIV's specified width (which may be given in rems, ems, pixels, or percent).</p>
3030

3131
<p>Read more about <a href="https://tympanus.net/codrops/css_reference/box-sizing/">box-sizing</a> and the box model.</p>
3232
</div>
3333

34-
<p class="centered">Text adapted from Wikipedia entry <a href="http://en.wikipedia.org/wiki/Ramayana">Ramayana</a>.</p>
35-
34+
<footer class="centered">
35+
<p><a href="index.html">index</a> | <a href="https://github.com/macloo/html_css_templates">GitHub</a><br>
36+
Text adapted from Wikipedia entry <a href="http://en.wikipedia.org/wiki/Ramayana">Ramayana</a>.</p>
37+
</footer>
3638

3739
</body>
3840
</html>

‎css/base.css‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
/* universal selector used to normalize box-sizing for all browsers */
2+
html {
3+
font-size: 100%;
4+
box-sizing: border-box;
5+
}
6+
27
* {
3-
box-sizing: border-box;
8+
box-sizing: inherit;
49
}
510

611
body {
@@ -28,6 +33,11 @@ h1, h2 {
2833
line-height: normal;
2934
}
3035

36+
/*
37+
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
38+
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
39+
*/
40+
3141
h1 {
3242
font-size: 3em;
3343
text-align: center;
@@ -58,7 +68,7 @@ a:hover {
5868

5969
/* media query for small screens */
6070

61-
@media (max-width: 700px) {
71+
@media (max-width: 760px) {
6272
#wrapper {
6373
border: 0;
6474
margin: 0;

‎css/boxsizing.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
html {
22
font-size: 100%;
33
}
4+
45
body {
56
font-family: 'Calibri', 'Verdana', sans-serif;
67
color: #333;
@@ -59,6 +60,12 @@ div {
5960
margin: 0;
6061
}
6162

63+
code {
64+
font-family: monospace;
65+
font-size: 1.3rem;
66+
background: #fcd7a4;
67+
}
68+
6269

6370
/* links */
6471

‎css/simple.css‎

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,60 @@
1+
/* universal selector used to normalize box-sizing for all browsers */
2+
html {
3+
font-size: 100%;
4+
box-sizing: border-box;
5+
}
6+
17
* {
2-
box-sizing: border-box;
8+
box-sizing: inherit;
39
}
410

511
body {
6-
font-family: 'Calibri', 'Verdana', sans-serif;
7-
color: #333;
8-
background: #fff9ef;
9-
margin: 2em auto;
10-
padding: 2em;
11-
max-width: 700px;
12+
font-family: 'Calibri', 'Verdana', sans-serif;
13+
color: #333;
14+
background: #fff9ef;
15+
margin: 2rem auto;
16+
padding: 2rem;
17+
max-width: 700px;
1218
}
1319

1420
img {
15-
display: block;
16-
margin: 2em auto;
17-
max-width: 100%;
21+
display: block;
22+
margin: 2rem auto;
23+
max-width: 100%;
1824
}
1925

2026

2127
/* heading and text styles */
2228

29+
/* https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
30+
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
31+
*/
32+
2333
h1 {
24-
font-family: 'Cambria', 'Georgia', serif;
25-
font-size: 3em;
26-
font-weight: normal;
27-
line-height: normal;
28-
margin: 0;
34+
font-family: 'Cambria', 'Georgia', serif;
35+
font-size: 3rem;
36+
font-weight: normal;
37+
line-height: normal;
38+
margin: 0;
2939
}
3040

3141
p {
32-
line-height: 1.5em;
42+
line-height: 1.5rem;
3343
}
3444

45+
.centered {
46+
text-align: center;
47+
padding-top: 2rem;
48+
}
3549

3650
/* links */
3751

3852
a {
39-
color: #237b93;
40-
text-decoration: underline;
53+
color: #237b93;
54+
text-decoration: underline;
4155
}
4256

4357
a:hover {
44-
color: #d332cb;
45-
text-decoration: none;
58+
color: #d332cb;
59+
text-decoration: none;
4660
}

‎index.html‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,15 @@
1414

1515
<h1>index</h1>
1616

17-
<p><a href="https://github.com/macloo/html_css_templates">GitHub repo</a> (all files)</p>
18-
1917
<p>Simple templates for starting a small project.</p>
2018

19+
<p>&gt; <a href="https://github.com/macloo/html_css_templates">GitHub repo</a> (all files)</p>
20+
21+
2122
<h2>basics</h2>
2223

2324
<p>Here's a <strong>basic</strong> vanilla <a href="basic.html">template</a> for HTML. It has no CSS. (All other pages use <a href="https://necolas.github.io/normalize.css/">Normalize.css</a>.
24-
The file has been <a href="https://developers.google.com/speed/docs/insights/MinifyResources">minified</a>.)</p>
25+
The Normalize file has been <a href="https://developers.google.com/speed/docs/insights/MinifyResources">minified</a>.)</p>
2526

2627
<p>Here is a <strong>simple</strong> <a href="simple.html">HTML page</a> that has simple styles applied; these styles work on any size device.</p>
2728

@@ -30,24 +31,31 @@ <h2>box-sizing</h2>
3031

3132
<p>When things don't fit the way you expect, box-sizing can help.</p>
3233

33-
<p><a href="boxsizing.html">CSS box-sizing example</a></p>
34+
<p>&gt; <a href="boxsizing.html">CSS box-sizing example</a></p>
3435

36+
<h2>viewport meta tag</h2>
37+
38+
<p>You'll find the viewport <code>meta</code> element in the <code>head</code> of every HTML file here. <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">Here's why.</a></p>
3539

3640
<h2>flexbox</h2>
3741

38-
<p><a href="flexbox.html">CSS flexbox example</a></p>
42+
<p>&gt; <a href="flexbox.html">CSS flexbox example</a></p>
43+
44+
<p>Videos: (1) <a href="https://www.youtube.com/watch?v=mTtG3HWjmg4">Intro to CSS flexbox</a> (2) <a href="https://www.youtube.com/watch?v=3iUscQU0yKg">Use CSS flex to style a header and nav</a> (3) <a href="https://www.youtube.com/watch?v=wOdSgNomgIo">Using CSS flex to scale images in a row</a></p>
3945

4046

4147
<h2>floats vs. grid</h2>
4248

43-
<p><a href="floats.html">CSS floats example</a></p>
49+
<p>&gt; <a href="floats.html">CSS floats example</a></p>
50+
51+
<p>&gt; <a href="grid.html">CSS grid example</a></p>
4452

45-
<p><a href="grid.html">CSS grid example</a> &mdash; Learn more about <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">CSS grid</a>.</p>
53+
<p>Learn more about <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">CSS grid</a> at MDN.</p>
4654

4755

4856
<h2>inline-block</h2>
4957

50-
<p><a href="inline-block.html">CSS inline-block compared with floats</a></p>
58+
<p>&gt; <a href="inline-block.html">CSS inline-block compared with floats</a></p>
5159

5260

5361

‎simple.html‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,27 @@
1010

1111
<body>
1212

13+
<h1>A simple page for all device sizes</h1>
1314

14-
<h1>A simple page for all device sizes</h1>
15+
<p>The idea here is to style a page so that it looks nice and is readable on devices of all sizes. Using flexible units of measurement in CSS (such as rem and percent), as well as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width">max-width</a>, makes this possible. Keep in mind the <a href="https://baymard.com/blog/line-length-readability">optimal line length</a> for readability of the text. Depending on the font, a width of 700px yields a line length of about 80-90 characters with browser default settings. Although that is more than optimal, a line-height of 1.5rem (or 150%) makes it reasonable.</p>
1516

16-
<p> &gt; <a href="index.html">Go to index</a>
17+
<p>No <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media query</a> is required here, because the CSS adapts to any screen size.</a>
1718

18-
<p>The idea here is to style a page so that it looks nice and is readable on devices of all sizes. Using flexible elements in CSS (such as em and percent), as well as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width" target="_blank">max-width</a>, makes this possible. Keep in mind the <a href="https://baymard.com/blog/line-length-readability" target="_blank">optimal line length</a> for readability of the text. Depending on the font, a width of 700px yields a line length of about 80-90 characters with browser default settings. Although that is more than optimal, a line-height of 1.5em (or 150%) makes it reasonable.</p>
19-
20-
<p>No <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries" target="_blank">media query</a> is required here, because the CSS adapts to any screen size.</a>
21-
22-
<img src="images/sita.jpg" alt="Sita">
19+
<img src="images/sita.jpg" alt="Sita">
2320

2421
<p>Ravana carries Sita away to Lanka, where Sita is kept under the heavy guard of rakshasis. Ravana demands Sita marry him, but Sita, eternally devoted to Rama, refuses. Rama and Lakshmana learn about Sita's abduction, and immediately set out to save her. During their search, they meet the demon Kabandha and the ascetic Shabari, who direct them towards Sugriva, the monkey king, and Hanuman.*</p>
2522

2623
<img src="images/rama.jpg" alt="Rama">
2724

2825
<p>Having received Hanuman's report on Sita, held prisoner in Lanka, Rama and Lakshmana proceed with their allies towards the shore of the southern sea. There they are joined by Ravana's renegade brother Vibhishana. The monkeys construct a giant floating bridge across the ocean, and the princes and their army cross over to Lanka. A lengthy battle ensues, in which Rama eventually kills Ravana.*</p>
2926

30-
<p>Below is a screenshot of the page as it would appear on an iPhone 6, rendered by Chrome Dev Tools.</p>
27+
<p>Below is a screenshot of the page as it would appear on an iPhone 6, rendered by Chrome Dev Tools.</p>
28+
29+
<img src="images/screenshot.png" alt="Screenshot">
3130

32-
<img src="images/screenshot.png" alt="Screenshot">
3331

34-
<p class="centered">* Text adapted from Wikipedia entry <a href="http://en.wikipedia.org/wiki/Ramayana">Ramayana</a>.</p>
32+
<p class="centered"><a href="index.html">index</a> | <a href="https://github.com/macloo/html_css_templates">GitHub</a><br>
33+
* Text adapted from Wikipedia entry <a href="http://en.wikipedia.org/wiki/Ramayana">Ramayana</a>.</p>
3534

3635

3736
</body>

0 commit comments

Comments
 (0)