Foundation CSS Global Styles

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.

The Global Styles of Foundation framework comprises useful resets to make sure styling is consistent across all browsers. In addition to that, the SASS version of Foundation allows you to adjust the default settings as per your requirement.

• Font Sizing: The default font size is set to 100% of the browser style sheet, with the default font size as 16 pixels. However, you can edit the $global-font-size variable to alter the base font size in the SASS version of Foundation CSS.
• Global Style Colors: 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: This class highlights with a sky blue color, which marks as important.
• secondary: This class is highlighted with a grey color which marks as of less importance.
• success: This class highlights with a green color representing the completion of some action.
• alert: This class highlights with a red color representing incomplete action with danger.
• warning: This class highlights with a yellow color represent some warning action.

Example: The following code shows the font size of the text (paragraph tag <p>) displayed.

Output:

👁 Image

Example: The following code shows how Global font colors are used with callout components to give respective colors.

Output:

👁 Image

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