Foundation CSS Setup Complete Reference
Last Updated :
11 Jul, 2022
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 >
< link rel = "stylesheet"
href =
< 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...