Open In App

Foundation CSS Setup Complete Reference

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS Setup includes Default Media Queries that include media features such as width, height, color, and display the content as per the specified screen resolution and Global Style Colors is the default color palette made available for use by Foundation CSS.

Complete list of Foundation CSS Setup are listed below:

  • Foundation CSS Global Styles 
  • Foundation CSS Right-to-Left Support 
  • Foundation CSS Flexbox Mode 
  • Foundation CSS Sass 
    • Foundation CSS Sass Compatibility
  • Foundation CSS JavaScript 
  • Foundation CSS JavaScript Utilities 
    • Foundation CSS JavaScript Utility Installation
    • Foundation CSS JavaScript Box Utilities
    • Foundation CSS JavaScript Keyboard Utilities
    • Foundation CSS JavaScript MediaQuery Utilities
    • Foundation CSS JavaScript Motion & Move Utilities
    • Foundation CSS JavaScript Timer Utility
    • Foundation CSS JavaScript ImageLoader Utility
    • Foundation CSS JavaScript Touch Utility
    • Foundation CSS JavaScript Triggers Utilities
    • Foundation CSS JavaScript Throttle Utility
    • Foundation CSS JavaScript Miscellaneous Utilities
  • Foundation CSS Media Queries 
    • Foundation CSS Default Media Queries
    • Foundation CSS Media Queries Changing the Breakpoints
    • Foundation CSS Media Queries Sass
    • Foundation CSS Media Queries JavaScript
    • Foundation CSS Media Queries Sass Reference
    • Foundation CSS Media Queries JavaScript Reference

Below example will give you a brief idea about the Setup of Foundation CSS:

Example:

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Foundation CSS Global Style Colors</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet"
        href=
 
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
    </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>


Output:

Foundation CSS Setup

Foundation CSS Setup



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