Elementor Website Course Logo

Tools

List of Plugins used during the lessons, and any useful resources to aid your development as an amazing Web Designer. The items below will increase depending on lessons added.

Fluid Typography Calculator

Tag
Min Width (px)
Min Font Size (px)
Max Width (px)
Max Font Size (px)
h1
h2
h3
h4
h5
h6
body
p
See the Code Used
				
					// Function to add the calculator to the admin menu
function ft_calculator_admin_menu()
{
    add_menu_page(
        "Fluid Typography Calculator", // Page title
        "Typography Calculator", // Menu title
        "manage_options", // Capability
        "fluid-typography-calculator", // Menu slug
        "ft_calculator_page" // Function that displays the page content
    );
}

add_action("admin_menu", "ft_calculator_admin_menu");

// Function that generates the calculator page
function ft_calculator_page() {
    // Initialize the $useRem variable at the start of the function
    $useRem = false;

    echo '<div class="wrap"><h1>Fluid Typography Calculator</h1>';

    // Basic styles for the form and output
    echo '<style>
            .ft-form input[type="number"] {
                width: 100px;
                padding: 8px;
                margin: 4px 0;
                box-sizing: border-box;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
            .ft-form label {
                font-weight: bold;
            }
            .ft-form div {
                margin-bottom: 10px;
            }
			.ft-form textarea {
				width: 100%;  // Adjust this to your preference
				height: 150px; // Or any height that suits your layout
				padding: 8px;
				border: 1px solid #ccc;
				border-radius: 4px;
				margin-top: 10px;
			}
			
			#cssOutput, #cssVariablesOutput {
				width: 50%; // Makes the textarea take up the full width of its container
				max-width: 50%; // You can adjust this as needed
				min-width: 300px; // Ensures a minimum width
				padding: 8px;
				border: 1px solid #ccc;
				border-radius: 4px;
				margin-top: 10px;
			}

            .ft-form button {
                background-color: #4CAF50;
                color: white;
                padding: 10px 15px;
                border: none;
                border-radius: 4px;
                cursor: pointer;
            }
            .ft-form button:hover {
                background-color: #45a049;
            }
            .grid-container {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 10px;
            }
          </style>';

// Initialize variables
    $rootFontSize = isset($_POST["rootFontSize"]) ? $_POST["rootFontSize"] : 16;
    $defaultValues = [
        "h1" => [
            "MinWidth" => 380,
            "MinFontSize" => 29,
            "MaxWidth" => 1600,
            "MaxFontSize" => 68,
        ],
        "h2" => [
            "MinWidth" => 380,
            "MinFontSize" => 24,
            "MaxWidth" => 1600,
            "MaxFontSize" => 51,
        ],
        "h3" => [
            "MinWidth" => 380,
            "MinFontSize" => 20,
            "MaxWidth" => 1600,
            "MaxFontSize" => 38,
        ],
        "h4" => [
            "MinWidth" => 380,
            "MinFontSize" => 17,
            "MaxWidth" => 1600,
            "MaxFontSize" => 29,
        ],
        "h5" => [
            "MinWidth" => 380,
            "MinFontSize" => 14,
            "MaxWidth" => 1600,
            "MaxFontSize" => 22,
        ],
        "h6" => [
            "MinWidth" => 380,
            "MinFontSize" => 12,
            "MaxWidth" => 1600,
            "MaxFontSize" => 16,
        ],
        "body" => [
            "MinWidth" => 380,
            "MinFontSize" => 16,
            "MaxWidth" => 1600,
            "MaxFontSize" => 24,
        ],
        "p" => [
            "MinWidth" => 380,
            "MinFontSize" => 16,
            "MaxWidth" => 1600,
            "MaxFontSize" => 24,
        ],
    ];

    $cssOutput = ""; // Initialize traditional CSS output string
    $cssVariablesOutput = ""; // Initialize CSS variables output string

    // Check if form is submitted
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $useRem = isset($_POST["unitToggle"]) && $_POST["unitToggle"] === 'on';
        // Security check using nonce
        if (!isset($_POST["ft_calculator_nonce_field"]) || !wp_verify_nonce($_POST["ft_calculator_nonce_field"], "ft_calculator_action")) {
            echo "<p>Security check failed. Please try again.</p>";
            return;
        }

foreach (["h1", "h2", "h3", "h4", "h5", "h6", "body", "p"] as $tag) {
            $minWidth = $_POST[$tag . "MinWidth"]; // In pixels
            $minFontSizePx = $_POST[$tag . "MinFontSize"]; // In pixels or REM based on $useRem
            $maxWidth = $_POST[$tag . "MaxWidth"]; // In pixels
            $maxFontSizePx = $_POST[$tag . "MaxFontSize"]; // In pixels or REM based on $useRem

            // Handle unit conversion
            if ($useRem) {
                // Convert REM to Pixels for internal calculation
                $minFontSizePx *= $rootFontSize;
                $maxFontSizePx *= $rootFontSize;
            }

            // Convert pixel values to REM for CSS generation
            $minFontSize = $minFontSizePx / $rootFontSize; // In rem
            $maxFontSize = $maxFontSizePx / $rootFontSize; // In rem

            // Convert widths from px to vw (assuming 1rem = rootFontSize px)
            $minWidthVW = $minWidth / $rootFontSize; // In vw
            $maxWidthVW = $maxWidth / $rootFontSize; // In vw

            // Calculate the CSS
            $vwUnit =
                (($maxFontSize - $minFontSize) / ($maxWidthVW - $minWidthVW)) *
                100;
            $constant = $minFontSize - ($vwUnit * $minWidthVW) / 100;

            // Format to a maximum of 5 decimal places
            $vwUnitFormatted = number_format($vwUnit, 5, ".", "");
            $constantFormatted = number_format($constant, 5, ".", "");

            // Add to traditional CSS output
            $cssOutput .=
                "{$tag} {font-size: clamp(" .
                $minFontSize .
                "rem, " .
                $constantFormatted .
                "rem + " .
                $vwUnitFormatted .
                "vw, " .
                $maxFontSize .
                "rem);}\n";

            // Add to CSS variables output
            $cssVariablesOutput .=
                "  --{$tag}-font-size: clamp(" .
                $minFontSize .
                "rem, " .
                $constantFormatted .
                "rem + " .
                $vwUnitFormatted .
                "vw, " .
                $maxFontSize .
                "rem);\n";
        }

        // Wrap CSS variables in a :root selector
        $cssVariablesOutput = ":root {\n" . $cssVariablesOutput . "}\n";
    }

// Display the form
echo '<form class="ft-form" method="post">';
wp_nonce_field("ft_calculator_action", "ft_calculator_nonce_field");

echo '<div>
        <label for="rootFontSize">Root HTML Font Size (px):</label>
        <input type="number" id="rootFontSize" name="rootFontSize" required value="' . htmlspecialchars($rootFontSize) . '">
      </div>
      <div>
        <label for="unitToggle">Use REM Units for Font Size:</label>
        <input type="checkbox" id="unitToggle" name="unitToggle" ' . ($useRem ? 'checked' : '') . ' onchange="toggleUnits()">
      </div>';

echo '<div class="grid-container">
        <div><strong>Tag</strong></div>
        <div><strong>Min Width (px)</strong></div>
        <div><strong>Min Font Size (' . ($useRem ? 'rem' : 'px') . ')</strong></div>
        <div><strong>Max Width (px)</strong></div>
        <div><strong>Max Font Size (' . ($useRem ? 'rem' : 'px') . ')</strong></div>';

// Display input fields for each tag
foreach (["h1", "h2", "h3", "h4", "h5", "h6", "body", "p"] as $tag) {
    $minWidthValue = isset($_POST[$tag . "MinWidth"]) ? $_POST[$tag . "MinWidth"] : $defaultValues[$tag]["MinWidth"];
    $minFontSizeValue = isset($_POST[$tag . "MinFontSize"]) ? $_POST[$tag . "MinFontSize"] : $defaultValues[$tag]["MinFontSize"];
    $maxWidthValue = isset($_POST[$tag . "MaxWidth"]) ? $_POST[$tag . "MaxWidth"] : $defaultValues[$tag]["MaxWidth"];
    $maxFontSizeValue = isset($_POST[$tag . "MaxFontSize"]) ? $_POST[$tag . "MaxFontSize"] : $defaultValues[$tag]["MaxFontSize"];

echo "<div><strong>{$tag}</strong></div>
          <div><input type='number' id='{$tag}MinWidth' name='{$tag}MinWidth' class='unit-input' required value='{$minWidthValue}'></div>
          <div><input type='number' id='{$tag}MinFontSize' name='{$tag}MinFontSize' class='unit-input' step='0.01' required value='{$minFontSizeValue}'></div>
          <div><input type='number' id='{$tag}MaxWidth' name='{$tag}MaxWidth' class='unit-input' required value='{$maxWidthValue}'></div>
          <div><input type='number' id='{$tag}MaxFontSize' name='{$tag}MaxFontSize' class='unit-input' step='0.01' required value='{$maxFontSizeValue}'></div>";
}


echo '</div><input type="submit" value="Generate CSS"></form>';


    // Display the traditional CSS output
    if (!empty($cssOutput)) {
        echo "<h2>Generated CSS:</h2>";
        echo '<textarea id="cssOutput" rows="10">' . htmlspecialchars($cssOutput) . "</textarea><br>";
        echo '<button onclick="copyToClipboard(\'cssOutput\')">Copy CSS</button>';
    }

    // Display the CSS variables output
    if (!empty($cssVariablesOutput)) {
        echo "<h2>Generated CSS Variables:</h2>";
        echo '<textarea id="cssVariablesOutput" rows="10">' . htmlspecialchars($cssVariablesOutput) . "</textarea><br>";
        echo '<button onclick="copyToClipboard(\'cssVariablesOutput\')">Copy CSS Variables</button>';
    }

    // JavaScript for copy to clipboard functionality and unit conversion
    echo '<script>
            function copyToClipboard(elementId) {
                var copyText = document.getElementById(elementId);
                copyText.select();
                document.execCommand("copy");
            }

function toggleUnits() {
    var useRem = document.getElementById("unitToggle").checked;
    var rootFontSize = parseFloat(document.getElementById("rootFontSize").value);
    var fontSizeElements = document.querySelectorAll(".unit-input"); // Class for font size inputs

    fontSizeElements.forEach(function(element) {
        if (element.id.endsWith("MinFontSize") || element.id.endsWith("MaxFontSize")) {
            var value = parseFloat(element.value);
            if (!isNaN(value)) {
                if (useRem) {
                    element.value = (value / rootFontSize).toFixed(2); // Convert to REM
                } else {
                    element.value = (value * rootFontSize).toFixed(0); // Convert to Pixels
                }
            }
        }
    });
}

          </script>';

    echo "</div>";
}


// Define the function for the fluid typography calculator
function fluid_typography_calculator() {
    // Call the existing function to display the fluid typography calculator
    ft_calculator_page();
}

// Add the shortcode
add_shortcode('Fluid_calc', 'fluid_typography_calculator');

				
			

Clamp Calculator

Use this Clamp() Calculation Generator by modifying the Widths, and Select the Font Size Units. Can be used for other areas such as Margins, and more (just modify/add Classes where required). 

Excellent

Click Download for your file

Welcome