Horje
Foundation CSS Kitchen Sink Title Bar

A Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework is based on bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.

Foundation CSS Kitchen Sink has the foundation elements to work well in our websites and applications. Kitchen Sink Title Bar is used to display the menu items on the left side or the right side as the title bar.

Foundation CSS Kitchen Sink Classes:

  • title-bar:  It is used to create the title bar.
  • title-bar-left: It is used to create the title bar on the left side.
  • title-bar-right: It is used to create the title bar on the right side.
  • title-bar-title: It is used to give the title.

Syntax:

<div class="title-bar">
  ....
</div>

Example 1: The following code demonstrates the kitchen sink title bar on the left side of the bar.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Foundation CSS Kitchen Sink Title bar</title>
    <link rel="stylesheet" href=
        crossorigin="anonymous">
</head>
 
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <strong>Foundation CSS Kitchen Sink Title bar</strong>
    </center>
 
    <div class="title-bar">
        <div class="title-bar-left">
            <button class="menu-icon" type="button"></button>
            <span class="title-bar-title">GFGTitleBarLeft1</span>
            <span class="title-bar-title">GFGTitleBarLeft2</span>
        </div>
    </div>
</body>
 
</html>

Output:

Title bar on left side

Example 2: The following code demonstrates both the left and right kitchen sink title bar.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Foundation CSS Kitchen Sink Title bar</title>
 
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
        crossorigin="anonymous">
</head>
 
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks </h1>
        <strong>Foundation CSS Kitchen Sink Title bar</strong>
    </center>
 
    <div class="title-bar">
        <div class="title-bar-left">
            <button class="menu-icon" type="button"></button>
            <span class="title-bar-title">GFGTitleBarLeft</span>
        </div>
        <div class="title-bar-right">
            <span class="title-bar-title">GFGTitleBarRight</span>
        </div>
    </div>
</body>
 
</html>

Output:

Title bar on both sides

Reference link: https://get.foundation/sites/docs/kitchen-sink.html




Reffered: https://www.geeksforgeeks.org


CSS

Related
Semantic-UI Header Block Variations Semantic-UI Header Block Variations
Bulma Block Bulma Block
Semantic-UI Popup Fluid Variation Semantic-UI Popup Fluid Variation
Semantic-UI Popup Flowing Variation Semantic-UI Popup Flowing Variation
Semantic-UI Step Fluid Variation Semantic-UI Step Fluid Variation

Type:
Geek
Category:
Coding
Sub Category:
Tutorial
Uploaded by:
Admin
Views:
8