Foundation CSS Panini Basic Templates & Pages

Last Updated : 16 Oct, 2023

Foundation CSS Panini Basic Templates and Pages facilitate the generic layout design for the website & for any page, it can only use one template. The Templates and Pages usually cover the fundamental aspects of using the Foundation CSS framework in combination with the Panini static site generator This concise guide provides essential templates and page structures for building responsive web applications efficiently. Foundation CSS with Panini is a web development combination. Foundation CSS provides styling, and Panini, a Handlebars-based static site generator, simplifies templating. It streamlines creating dynamic websites with responsive design.

Syntax

<!DOCTYPE html>
<html>
<head>
    <title>{{title}}</title>
</head>

<body>
    <h1>Hello, {{name}}!</h1>
</body>

</html>

Here, the {{title}} and {{name}} are placeholders that will be replaced with actual values when rendering the template. You can pass these values using parameters when rendering the template

There are some methods that can be used to perform Foundation CSS Panini Basic Templates & Pages, which are listed below:

Simple Template with Panini
Integrating Foundation Components

We will explore all the above methods along with their basic implementation with the help of examples.

Static HTML Templates

In this approach, we will create simple static HTML templates using the Foundation CSS classes for styling. These templates can be reused for the different pages with consistent styling, Static HTML templates are pre-designed webpage structures with fixed content and layout. They’re not dynamic and don’t change based on user input or data.

Example: In this example, we are creating an HTML template using the Foundation CSS framework. It includes a top bar with navigation links, a content section with a title, text, and a button, and a footer with a copyright notice.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title> 
          The Foundation CSS with Panini Template 
      </title> 
    <link rel="stylesheet"
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css"> 
</head> 
  
<body> 
    <div class="top-bar"> 
        <div class="top-bar-left"> 
            <ul class="menu"> 
                <li class="menu-text"> 
                    The Foundation CSS 
                </li> 
            </ul> 
        </div> 
        <div class="top-bar-right"> 
            <ul class="menu"> 
                <li><a href="#">Home</a></li> 
                <li><a href="#">About</a></li> 
                <li><a href="#">Services</a></li> 
                <li><a href="#">Contact</a></li> 
            </ul> 
        </div> 
    </div> 
    <div class="grid-container"> 
        <div class="grid-x grid-padding-x"> 
            <div class="cell"> 
                <h1> 
                    Welcome to GeeksforGeeks Website 
                </h1> 
                <p> 
                    We provide the top-notch services 
                    using Foundation CSS. 
                </p> 
                <a class="button" href="#">Learn More</a> 
            </div> 
        </div> 
    </div> 
    <footer class="footer"> 
        <div class="grid-container"> 
            <div class="grid-x grid-padding-x"> 
                <div class="cell"> 
                    <p>© 2023 Foundation CSS Examples</p> 
                </div> 
            </div> 
        </div> 
    </footer> 
  
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
  
</html>

Output:

Screenshot-2023-08-23-081041

Integrating Foundation Components

In this approach, we’ll explore how to integrate Foundation CSS components into the Panini template. Foundation provides a wide range of UI components that can enhance the visual appeal and functionality of your website.

Example: In this example, we are using the Handlebars.js library. It features a top bar and a content section with a dynamic greeting based on the provided data. It also includes Foundation CSS for styling.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>{{title}}</title> 
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css"> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="top-bar"> 
        <div class="top-bar-left"> 
            <ul class="menu"> 
                <li class="menu-text"> 
                    The Foundation Panini 
                </li> 
            </ul> 
        </div> 
    </div> 
    <div class="grid-container"> 
        <div class="grid-x grid-margin-x"> 
            <div class="cell medium-8"> 
                <h1>Hello, {{name}}!</h1> 
            </div> 
        </div> 
    </div> 
  
    <script> 
        const data = { 
            title: "The Foundation Panini", 
            name: "Geeks" 
        }; 
        const template = ` 
      <div class="top-bar"> 
        <div class="top-bar-left"> 
          <ul class="menu"> 
            <li class="menu-text">{{title}}</li> 
          </ul> 
        </div> 
      </div> 
  
      <div class="grid-container"> 
        <div class="grid-x grid-margin-x"> 
          <div class="cell medium-8"> 
            <h1>Hello, {{name}}!</h1> 
          </div> 
        </div> 
      </div> 
    `; 
        const renderedTemplate =  
                  Handlebars.compile(template)(data); 
        document.body.innerHTML = renderedTemplate; 
    </script> 
</body> 
  
</html>