Foundation Laravel Package
zurb/foundation
Foundation is a responsive front-end framework for building sites and apps on any device. Includes a customizable grid, Sass mixins, JavaScript plugins, and accessibility support, with docs and releases available to help you go from prototype to production.
title: Flexbox Mode description: For browsers with cutting-edge support, some of Foundation's key components can be converted to flexbox. video: 'KxafSdyTCIg' sass:
- scss/components/_flex.scss
- scss/util/_flex.scss
Flexbox Mode
Foundation components use a combination of floats, vertical alignment, table cells, and various other CSS hacks to get layouts looking right. These days though, there's a better way... if you are happy with the below browser support!
Enabling flexbox mode replaces those hacks with flexbox properties, streamlining how layouts are made, and making sizing and alignment of elements much easier.
Flexbox mode is only supported in these browsers:
- The latest Chrome and Firefox
- Safari 6+
- IE/Edge 10+
- iOS 7+
- Android 4.4+
Enabling Flexbox Mode
Using the Sass version of Foundation, you can enable flexbox mode two ways:
If you use the foundation-everything() mixin in your main Sass file, pass in the parameter true to enable flexbox mode.
[@include](https://github.com/include) foundation-everything(true);
If you included each component manually (like our starter projects do), open your settings file (basic template: scss/_settings.scss, ZURB template: src/assets/scss/_settings.scss) and set $global-flexbox to true, and remove the [@include](https://github.com/include) for the float grid and replace it with the one for the flex grid, along with the helper classes (basic template: scss/app.scss, ZURB template: src/assets/scss/app.scss):
$global-flexbox: true;
// [@include](https://github.com/include) foundation-grid;
[@include](https://github.com/include) foundation-flex-grid;
[@include](https://github.com/include) foundation-flex-classes;
Supported Components
Besides the flex grid, these components have flexbox modes:
In general, all of the components work exactly the same. However, a few of them require slight changes to CSS classes used to work properly. Refer to the documentation for each to find out what's different.
How can I help you explore Laravel packages today?