From b814bf27f4b7376aa3e5bbb7d074d5ba1498f308 Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Thu, 2 Nov 2023 15:05:26 -0400 Subject: [PATCH 1/2] Three new interactive examples for use with new 'CSS Math Functions' guide --- .../math-functions/function-clamp-01.css | 12 ++++++ .../math-functions/function-clamp-01.html | 24 ++++++++++++ .../math-functions/function-max-01.css | 12 ++++++ .../math-functions/function-max-01.html | 38 +++++++++++++++++++ .../math-functions/function-min-01.css | 12 ++++++ .../math-functions/function-min-01.html | 38 +++++++++++++++++++ .../css-examples/math-functions/meta.json | 25 ++++++++++++ 7 files changed, 161 insertions(+) create mode 100644 live-examples/css-examples/math-functions/function-clamp-01.css create mode 100644 live-examples/css-examples/math-functions/function-clamp-01.html create mode 100644 live-examples/css-examples/math-functions/function-max-01.css create mode 100644 live-examples/css-examples/math-functions/function-max-01.html create mode 100644 live-examples/css-examples/math-functions/function-min-01.css create mode 100644 live-examples/css-examples/math-functions/function-min-01.html create mode 100644 live-examples/css-examples/math-functions/meta.json diff --git a/live-examples/css-examples/math-functions/function-clamp-01.css b/live-examples/css-examples/math-functions/function-clamp-01.css new file mode 100644 index 000000000..7cfe158d6 --- /dev/null +++ b/live-examples/css-examples/math-functions/function-clamp-01.css @@ -0,0 +1,12 @@ +#example-container { + background-color: black; + color: white; + padding: 4px; + width: 100%; + height: 48px; +} + +#example-element { + background-color: red; + height: 100%; +} diff --git a/live-examples/css-examples/math-functions/function-clamp-01.html b/live-examples/css-examples/math-functions/function-clamp-01.html new file mode 100644 index 000000000..e27692d4c --- /dev/null +++ b/live-examples/css-examples/math-functions/function-clamp-01.html @@ -0,0 +1,24 @@ +
+
+ 
width: clamp(10%, 1px, 90%);
+ +
+ +
+ 
width: clamp(10%, 9999999px, 90%);
+ +
+
+ + diff --git a/live-examples/css-examples/math-functions/function-max-01.css b/live-examples/css-examples/math-functions/function-max-01.css new file mode 100644 index 000000000..7cfe158d6 --- /dev/null +++ b/live-examples/css-examples/math-functions/function-max-01.css @@ -0,0 +1,12 @@ +#example-container { + background-color: black; + color: white; + padding: 4px; + width: 100%; + height: 48px; +} + +#example-element { + background-color: red; + height: 100%; +} diff --git a/live-examples/css-examples/math-functions/function-max-01.html b/live-examples/css-examples/math-functions/function-max-01.html new file mode 100644 index 000000000..c40b921be --- /dev/null +++ b/live-examples/css-examples/math-functions/function-max-01.html @@ -0,0 +1,38 @@ +
+
+ 
width: max(50px, 50%);
+ +
+ +
+ 
width: max(50px, 100%);
+ +
+ +
+ 
width: max(20px, 50px, 90%);
+ +
+ +
+ 
width: max(80px, 90%);
+ +
+
+ + diff --git a/live-examples/css-examples/math-functions/function-min-01.css b/live-examples/css-examples/math-functions/function-min-01.css new file mode 100644 index 000000000..7cfe158d6 --- /dev/null +++ b/live-examples/css-examples/math-functions/function-min-01.css @@ -0,0 +1,12 @@ +#example-container { + background-color: black; + color: white; + padding: 4px; + width: 100%; + height: 48px; +} + +#example-element { + background-color: red; + height: 100%; +} diff --git a/live-examples/css-examples/math-functions/function-min-01.html b/live-examples/css-examples/math-functions/function-min-01.html new file mode 100644 index 000000000..8fd87e4f6 --- /dev/null +++ b/live-examples/css-examples/math-functions/function-min-01.html @@ -0,0 +1,38 @@ +
+
+ 
width: min(99999999px, 50%);
+ +
+ +
+ 
width: min(99999999px, 100%);
+ +
+ +
+ 
width: min(20px, 50px, 90%);
+ +
+ +
+ 
width: min(80px, 90%);
+ +
+
+ + diff --git a/live-examples/css-examples/math-functions/meta.json b/live-examples/css-examples/math-functions/meta.json new file mode 100644 index 000000000..00a34ae37 --- /dev/null +++ b/live-examples/css-examples/math-functions/meta.json @@ -0,0 +1,25 @@ +{ + "pages": { + "min": { + "cssExampleSrc": "./live-examples/css-examples/math-functions/function-min-01.css", + "exampleCode": "./live-examples/css-examples/math-functions/function-min-01.html", + "fileName": "function-min-01.html", + "title": "CSS Math Functions: min()", + "type": "css" + }, + "max": { + "cssExampleSrc": "./live-examples/css-examples/math-functions/function-max-01.css", + "exampleCode": "./live-examples/css-examples/math-functions/function-max-01.html", + "fileName": "function-max-01.html", + "title": "CSS Math Functions: max()", + "type": "css" + }, + "clamp": { + "cssExampleSrc": "./live-examples/css-examples/math-functions/function-clamp-01.css", + "exampleCode": "./live-examples/css-examples/math-functions/function-clamp-01.html", + "fileName": "function-clamp-01.html", + "title": "CSS Math Functions: clamp()", + "type": "css" + } + } +} From 6338ec13221ad252e15ee43570a7b1679f23807b Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Mon, 6 Nov 2023 15:00:31 -0500 Subject: [PATCH 2/2] Add additional work to clamp --- .../math-functions/function-clamp-01.html | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/live-examples/css-examples/math-functions/function-clamp-01.html b/live-examples/css-examples/math-functions/function-clamp-01.html index e27692d4c..a62817bcd 100644 --- a/live-examples/css-examples/math-functions/function-clamp-01.html +++ b/live-examples/css-examples/math-functions/function-clamp-01.html @@ -12,6 +12,20 @@ + +
+ 
width: clamp(25px, 1px, 150px);
+ +
+ +
+ 
width: clamp(25px, 999999px, 150px);
+ +