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.
Global Style Colors is 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: Highlights with a sky blue color, which marks as important.
- secondary: Highlights with a grey color which marks as of less importance.
- success: Highlights with a green color representing the completion of some action.
- alert: Highlights with a red color representing incomplete action with danger.
- warning: Highlights with a yellow color represent some warning action.
Example: The following code shows how Global font colors are used with callout components to give respective colors.
<!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 Global Style Colors
Example: The following code shows how Global Font Colors are used with button components to give respective colors.
<!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="button primary">
Primary
</div>
<div class="button secondary">
Secondary
</div>
<div class="button success">
Success
</div>
<div class="button warning">
Warning
</div>
<div class="button alert">
Alert
</div>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Foundation CSS Global Style Colors
Reference: https://get.foundation/sites/docs/global.html#colors