Installing Foundation

Foundation can be installed in various ways, allowing developers to choose the method that best fits their project requirements. In this guide, we'll explore two common installation methods: integrating Foundation via Content Delivery Network (CDN) and installing it using npm (Node Package Manager).

1. CDN Integration:

Using a CDN is a quick and convenient way to get started with Foundation. This approach allows you to include Foundation's CSS and JavaScript files directly from a third-party server.

Steps:

Include Foundation CSS in the <head> of your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.3/dist/css/foundation.min.css">

Include Foundation JavaScript (and its dependencies) before the closing </body> tag:

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/what-input@5.2.8/dist/what-input.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.3/dist/js/foundation.min.js"></script>

Example HTML File:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Foundation CDN Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.3/dist/css/foundation.min.css">
</head>
<body>
 
  <!-- Your content goes here -->
 
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/what-input@5.2.8/dist/what-input.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.3/dist/js/foundation.min.js"></script>
</body>
</html>

2. Installation with npm:

For projects utilizing Node.js and npm, installing Foundation through npm allows for better control, customization, and version management.

Steps:

Install Foundation using npm:
```
npm install foundation-sites
```

Include Foundation CSS and JavaScript files in your project: Add the following lines to your HTML file:

<!-- Include Foundation CSS -->
<link rel="stylesheet" href="node_modules/foundation-sites/dist/css/foundation.min.css">

<!-- Include Foundation JavaScript (and its dependencies) before the closing </body> tag -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/what-input/dist/what-input.min.js"></script>
<script src="node_modules/foundation-sites/dist/js/foundation.min.js"></script>

Example HTML File:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Foundation npm Example</title>
  <link rel="stylesheet" href="node_modules/foundation-sites/dist/css/foundation.min.css">
</head>
<body>
 
  <!-- Your content goes here -->
 
  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <script src="node_modules/what-input/dist/what-input.min.js"></script>
  <script src="node_modules/foundation-sites/dist/js/foundation.min.js"></script>
</body>
</html>

These installation methods provide flexibility based on your project needs. CDN integration is quick and suitable for simple projects, while npm installation is ideal for larger projects requiring customization and version control. Choose the method that aligns with your development workflow and project requirements.

Introduction Grid system