What is the function of the ZURB Foundation

ZURB Foundation: The CSS framework for responsive frontends

The Foundation framework is characterized by a high degree of flexibility, which primarily results from the modular structure. You can decide before the download which components you need and which you do not - in this way you can easily put together your own individual version of the web code collection without having to download modules that you do not need. If you find out afterwards that you need a component that has been deselected, simply add it to the framework at a later date. You can just as easily remove modules that you no longer have use for. This ensures that you have exactly the functions available that you need to implement your web project at all times.

For Foundation 6.0, for example, you can choose from over 40 components from the following seven areas:

  • Grid: The decisive component for responsive web design is the standard 1200 pixel wide, flexible grid layout. You can also deselect this module, but the system is the basis for a Cross-device and cross-resolution design Of your web project. Since version 6.0 you also have the option of choosing the “Flex Grid” module, which is still one of the options More flexible element positioning based on the Flexbox model from CSS enables (for example, a horizontal and vertical alignment of the objects).
  • general: The general modules (to which the grid is officially listed) include, on the one hand, the float and visibility classes, which you can use to set rules of behavior for the Positioning and visibility of individual elements can define. On the other hand, you will also find a form component and that in this area typography-Module with basic font and text formatting.
  • Controls: All the important interactive elements of your web project are included here. These are, for example, buttons that forward the user after a click or close selected elements. There are also modules with which you can use sliders and buttons integrate with on / off switch.
  • navigation: Of course, navigation elements should not be missing for the front-end design and so you also have a large selection of modules for your ZURB Foundation project with which you Menu bars and menus design (accordion, drilldown, dropdown), add navigation paths (breadcrumbs) or paginate pages - i.e. add page numbers.
  • Containers: Containers are a great way to enclose multiple elements such as text, images or videos in a common area. Styles for typical content widgets such as accordion, tabs, dropdown areas or modal dialogs can be found here.
  • Media: Under the heading "Media" you will find modules of the Foundation framework that you need to integrate multimedia elements. The “Flex Video” component supports you, for example, with the Embedding of videos and ensures that the content is adapted to the different display sizes and resolutions. There are also components for preview images and tooltips, among other things.
  • Plug-ins: Finally, you can select some useful extensions for ZURB-Foundation that will make working with the web framework easier for you. With the "Motion UI" library, for example, you can download a useful library (only for the Sass variant) that makes creating flexible UI transitions and animations child's play.

You can also choose some Define standard settings for the framework. This includes options for changing the number or spacing of columns and the maximum width of the grid system, various color settings and the definition of the text direction (left to right or right to left). If you want to test the framework first without finding out about the individual modules, you can also use it as a complete version ("Complete") Or in a slimmed-down basic variant ("Essential“) Download.