Foundation CSS Global Style Colors

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.

Output:

👁 Foundation CSS Global Style Colors

Example: The following code shows how Global Font Colors are used with button components to give respective colors.

Output:

👁 Foundation CSS Global Style Colors

Reference: https://get.foundation/sites/docs/global.html#colors