Foundation CSS Setup Complete Reference

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 Global Style Font Sizing
- Foundation CSS Global Style Colors
Foundation CSS Right-to-Left Support
Foundation CSS Flexbox Mode
- Foundation CSS Flexbox Enable Mode
- Foundation CSS Flexbox Mode Supported Components
- Foundation CSS Flexbox Mode Sass Reference
Foundation CSS Sass
- Foundation CSS Sass Compatibility
Foundation CSS JavaScript
- Foundation CSS JavaScript Installation & Initialization
- Foundation CSS JavaScript using Plugins
- Foundation CSS JavaScript Configuring Plugins
- Foundation CSS JavaScript Programmatic Use
- Foundation CSS JavaScript Events
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=

"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/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/foundation-sites@6.7.4/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>

Output:

Foundation CSS Setup

Article Tags :

CSS

Web Technologies