Skip to content

Commit fe49fdc

Browse files
jessicarushjessicarush
committed
Initial commit
1 parent df3ab47 commit fe49fdc

File tree

2 files changed

+121
-0
lines changed

2 files changed

+121
-0
lines changed

‎css_min_max_clamp/base.css

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
@charset "UTF-8";
2+
3+
4+
5+
/* VARIABLES -------------------------------------------------------------- */
6+
7+
:root {
8+
--heading-font: 'Open Sans', sans-serif;
9+
--main-font: 'Open Sans', sans-serif;
10+
--minor-font: 'Open Sans', sans-serif;
11+
--heading-color: rgba(0,0,50,.9);
12+
--main-color: rgba(70,70,90,.9);
13+
--minor-color: rgb(190,190,200);
14+
--emphasis-color: rgb(27,211,165);
15+
}
16+
17+
/* DEFAULTS --------------------------------------------------------------- */
18+
19+
html {
20+
color: var(--main-color);
21+
font-family: var(--main-font);
22+
font-size: 16px;
23+
font-weight: 400;
24+
}
25+
26+
/* TYPOGRAPHY ------------------------------------------------------------- */
27+
28+
.primary-heading {
29+
color: var(--heading-color);
30+
font-family: var(--heading-font);
31+
font-size: 2rem;
32+
font-weight: 400;
33+
}
34+
35+
/* LINKS & BUTTONS -------------------------------------------------------- */
36+
37+
/* LAYOUT ----------------------------------------------------------------- */
38+
39+
.box {
40+
border: solid 2px tomato;
41+
padding: 15px;
42+
box-sizing: border-box;
43+
margin: 10px auto;
44+
}
45+
46+
.min-demo {
47+
/* Think of the `min()` value as providing the *maximum* value */
48+
width: min(50vw, 600px);
49+
}
50+
51+
.max-demo {
52+
/* Think of the `max()` value as providing the *minimum* value */
53+
width: max(50vw, 600px);
54+
}
55+
56+
.clamp-demo {
57+
width: clamp(300px, 50vw, 600px);
58+
}
59+
60+
.font-size-clamp {
61+
font-size: clamp(1rem, 5vw, 2rem);
62+
}
63+
64+
.clamp-ch {
65+
width: clamp(45ch, 50%, 75ch);
66+
}
67+
68+
/* COMPONENTS ------------------------------------------------------------- */
69+
70+
/* COSMETIC --------------------------------------------------------------- */
71+
72+
/* UTILITY ---------------------------------------------------------------- */
73+
74+
/* STATE ------------------------------------------------------------------ */

‎css_min_max_clamp/index.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS min max clamp</title>
7+
<link href="base.css" rel="stylesheet">
8+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
13+
<header>
14+
<h1 class="primary-heading">
15+
CSS min(), max(), clamp()
16+
</h1>
17+
</header>
18+
19+
<main>
20+
<div class="box min-demo">
21+
<p>width: min(50vw, 600px);</p>
22+
</div>
23+
24+
<div class="box max-demo">
25+
<p>width: max(50vw, 600px);</p>
26+
</div>
27+
28+
<div class="box clamp-demo">
29+
<p>width: clamp(300px, 50vw, 600px);</p>
30+
</div>
31+
32+
<p class="font-size-clamp">
33+
font-size: clamp(1rem, 5vw, 3rem);
34+
</p>
35+
36+
<p class="clamp-ch">
37+
<strong>width: clamp(45ch, 50%, 80ch);</strong>
38+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis risus varius metus ullamcorper eleifend id at urna. Etiam tempus consectetur sem a eleifend. Aliquam aliquet at ante aliquet efficitur. Phasellus rutrum elit non nisi pellentesque, ut tincidunt odio scelerisque
39+
</p>
40+
41+
</main>
42+
43+
<footer>
44+
</footer>
45+
46+
</body>
47+
</html>

0 commit comments

Comments
 (0)