Foundation CSS Global Styles

Last Updated : 10 Jun, 2022

Foundation CSS is an open-source & responsive front-end framework built by the ZURB foundation in September 2011, which makes it really easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

The Global Styles of Foundation framework comprises useful resets to make sure styling is consistent across all browsers. In addition to that, the SASS version of Foundation allows you to adjust the default settings as per your requirement.

Font Sizing: The default font size is set to 100% of the browser style sheet, with the default font size as 16 pixels. However, you can edit the $global-font-size variable to alter the base font size in the SASS version of Foundation CSS.
Global Style Colors: The default color palette made available for use by Foundation CSS. These Global Style Colors can be easily used to give interactive colors to Foundation CSS components such as links, callouts, or buttons.

Foundation CSS Global Style Colors Classes:

primary: This class highlights with a sky blue color, which marks as important.
secondary: This class is highlighted with a grey color which marks as of less importance.
success: This class highlights with a green color representing the completion of some action.
alert: This class highlights with a red color representing incomplete action with danger.
warning: This class highlights with a yellow color represent some warning action.

Example: The following code shows the font size of the text (paragraph tag <p>) displayed.

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" />

    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
    </script>
</head>

<body>
    <center>
        <h1 style="color: green">GeeksforGeeks</h1>
        <h3>Foundation CSS Global Font Size</h3>
        
<p>
            Welcome to GeeksForGeeks. 
            This is an example line.
        </p>

    </center>
    <script>
        $(document).foundation();
    </script>
</body>

</html>

Output:

Example: The following code shows how Global font colors are used with callout components to give respective colors.

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" />

    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
    </script>
</head>

<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3>Foundation CSS Global Style Colors</h3>
        <br />
        <div class="panel callout primary">
            Primary
        </div>
        <div class="panel callout secondary">
            Secondary
        </div>
        <div class="panel callout success">
            Success
        </div>
        <div class="panel callout warning">
            Warning
        </div>
        <div class="panel callout alert">
            Alert
        </div>
    </center>
    <script>
        $(document).foundation();
    </script>
</body>

</html>