Open In App

Foundation CSS Prototyping Utilities Component Styling

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Prototyping Utilities Component Styling Classes in Foundation CSS.

In Foundation CSS, Prototyping Utilities Components Styling is used to give style to the components by adding radius, border, shadow, to it. It is mainly used with cards, tables, buttons, images, etc.

Foundation CSS Prototyping Utilities Component Styling classes:

  • rounded: This class can be used to give the rounded corner to the component.
  • shadow: This class can be used to give the shadow to the component.
  • bordered: This class can be used to give the border to the component
  • radius: This class can be used to give the radius to the component.
  • switch: This class can be used to create a switch.
  • switch-input: This class can be used to add any style to the input.
  • switch-paddle: This class can be used to add any styles to the background and paddle of the switch.

Syntax:

<div class="bordered || radius || rounded || 
     shadow || switch">
    <input class="switch-input">
    <label class="switch-paddle"></label>
    ...
</div>

Example 1: Below is the example that illustrates the use of Prototyping Utilities Components Styles using radius, bordered, rounded, and shadow classes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Foundation CSS Prototyping Utilities Component Styling</title>
  
    <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
    <link rel="stylesheet" href=
    crossorigin="anonymous">
  
    <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
    <link rel="stylesheet" href=
    crossorigin="anonymous">
  
    <!-- foundation-rtl.min.css: Compressed CSS with right-to-left reading direction -->
    <link rel="stylesheet" href=
    crossorigin="anonymous">
</head>
  
<body style="margin: 10rem;">
  <center>
    <h2 style="color: green;">
        GeeksforGeeks
    </h2>
  
    <h3>Foundation CSS Component Styling</h3>
  
    <button type="button" class=
        "button radius bordered shadow primary">
        GfG-Primary
    </button>
  
    <button type="button" class=
        "button radius rounded shadow success">
        GfG-Success
    </button>
  
    <button type="button" class=
        "button radius bordered shadow warning">
        GfG-Warning
    </button>
  </center>
</body>
  
</html>


Output:

Example 2: Below is the example that illustrates the use of Prototyping Utilities Components Styles using the switch, switch-input, and switch-paddle classes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Foundation CSS Prototyping Utilities Component Styling</title>
  
    <!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
    <link rel="stylesheet" href=
    crossorigin="anonymous">
  
    <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
    <link rel="stylesheet" href=
    crossorigin="anonymous">
  
    <!-- foundation-rtl.min.css: Compressed CSS with right-to-left reading direction -->
    <link rel="stylesheet" href=
    crossorigin="anonymous">
</head>
  
<body style="margin: 10rem;">
  <center>
    <h2 style="color: green;">
      GeeksforGeeks
    </h2>
  
    <h3>Foundation CSS Component Styling</h3>
  
    <div class="switch rounded">
      <input class="switch-input" id="gfg" 
             type="checkbox" name="gfg">
      <label class="switch-paddle" for="gfg"></label>
    </div>
  </center>
</body>
  
</html>


Output:

Reference link: https://get.foundation/sites/docs/prototyping-utilities.html#component-styling



Last Updated : 09 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads