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..a62817bcd --- /dev/null +++ b/live-examples/css-examples/math-functions/function-clamp-01.html @@ -0,0 +1,38 @@ +
+
+ 
width: clamp(10%, 1px, 90%);
+ +
+ +
+ 
width: clamp(10%, 9999999px, 90%);
+ +
+ +
+ 
width: clamp(25px, 1px, 150px);
+ +
+ +
+ 
width: clamp(25px, 999999px, 150px);
+ +
+
+ + 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" + } + } +}