Foundation CSS Flexbox Mode Supported Components
Last Updated :
18 Aug, 2022
Foundation CSS is a front-end framework that is open-source, free, and allows for the creation of flexible web designs. One of the most potent CSS frameworks, it features a responsive grid, cross-platform HTML and CSS UI elements, templates, and more. Additionally, it offers a variety of optional JavaScript Extension features. It renders quickly on mobile devices as well because the Fastclick.js tool has been integrated.
Using layout modules like Flexbox, which combines the display property flex with other attributes like margin and padding, etc., is a better method to construct layouts. By adding helper classes to various elements, we can quickly leverage the many pre-built components that Foundation CSS provides. FlexBox Mode is one of those UI elements. Flexbox mode makes it simpler to develop websites by substituting flexbox capabilities for Foundation’s conventional approach of employing floats, vertical alignment, table cells, etc. Contrarily, when using CSS to implement flexbox traditionally, we must include numerous attributes, such as padding and margin, in order to construct the playout. We only need to add the auxiliary classes align-left, align-bottom, etc. to Foundation’s Flexbox.
There are various CSS components that are provided by Foundation CSS, the flexbox mode is not supported by all the components. The flex display properties or the flexbox classes are supported by a group of components which are listed below how they can be used with the flexbox classes is also specified. There are no specific classes for using the flexbox mode with the components, to learn in detail about the class refer to this article Foundation CSS Flexbox Mode.
Supported Components:
- Button Group: Buttons are one of the most common UI elements in a webpage. This class is used to create a basic button group element. We can use the Flexbox Utility Classes like .align-center, .align-right, .align-spaced, or .align-justify.
- Input-Group(Forms): Input groups are different ways in which can be used to take inputs in the forms such as passwords, text, email, etc. To take inputs we need to add input tags that will take those inputs from the user. There are no direct ways in which we can implement the flexbox mode in the Input Groups, we can implement the Flexbox Utility Classes like .align-center, .align-right, .align-spaced, or .align-justify in the inline labels and buttons.
- Menu: A menu is a way of adding a list of links that can be used to navigate to different parts of the webpage. The menu items are created using <ul> and <li> elements. The Flexbox Utility Classes like .align-center, .align-right, .align-spaced, or .align-justify can be used with menu.
- Top bar: A top bar can be used to make a navigation bar with two portions, such as the left-side section, which includes the logo and a few other components, and the right-side section, which includes the sign-up/login data, etc. The Flexbox Utility Classes like .align-center, .align-right, .align-spaced, or .align-justify are used in the Advanced Layout of the Top Bar.
- Media Object: Using media object classes, a media object adds media with some content. These classes can be used whenever we need to illustrate something using media. The .middle or .bottom classes added to the media object section works upon the Flexbox Mode.
- Title: The title bar is a very simple navigation bar that contains the title and nothing else specific like buttons or a search bar. This is normally combined with an Off-canvas viewport to make a complete navigation bar. We add content to the left and right parts of the title bar with .title-bar-left and .title-bar-right classes respectively which is mainly powered by the Flexbox Mode.
- Card: A header, an image, a caption, and a footer are often included on a card. To create a card without a picture or footer, one might omit any of these components. The .card and .card-divider classes used in the Card component are Flexbox containers so we can use the Flexbox Utility classes to create customized layouts.
Example 1: In the below-given code the implementation of the .expanded class and .align-right flexbox utility classes on a button group. If expanded is not given a button group only expands till 1200px so it won’t be convenient for wider screens.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
<link rel="stylesheet" href="
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color: green;">GeeksforGeeks</h1>
<strong>Foundation CSS Flexbox Mode Supported Components</strong>
<div class="expanded button-group margin-top-2">
<a class="secondary button">
Geeks
</a>
<a class="secondary button">
For
</a>
<a class="secondary button">
Geeks
</a>
</div>
<div class="button-group align-right margin-top-2">
<a class="success button">
Geeks
</a>
<a class="success button">
for
</a>
<a class="success button">
Geeks
</a>
</div>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Example 2: In the below-given code the implementation of the .expanded class on the basic menu and .top-bar-left and .top-bar-right are used to add contents to the top bar.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
"//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" />
<link rel="stylesheet" href="
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<div class="top-bar margin-bottom-2">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">GeeksforGeeks</li>
<li><a href="#">DSA</a></li>
<li><a href="#">Algorithms</a></li>
<li><a href="#">Competitive Programming</a></li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
<h1 style="color: green;">GeeksforGeeks</h1>
<strong>Foundation CSS Flexbox Mode Supported Components</strong>
<ul class="menu expanded margin-top-3">
<li><a href="#">DSA</a></li>
<li><a href="#">Algorithms</a></li>
<li><a href="#">Competitive Programming</a></li>
</ul>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/flexbox-mode.html#supported-components
Similar Reads
Foundation CSS Flexbox Mode
Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, M
8 min read
Foundation CSS Button Group Flexbox
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
3 min read
Foundation CSS Flexbox Mode Sass Reference
Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to lay out nice responsive websites, apps, and emails and can be accessible to any device. Foundation CSS gives access to a lot of pre-built components, we can easil
2 min read
Foundation CSS Flexbox Utilities Source Ordering
Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and JavaScript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass
2 min read
Foundation CSS Flex Grid Responsive Adjustments
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay,
2 min read
Foundation CSS Flexbox Utilities
Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. Flexbox Utilities: In Foundation CSS, Flexbox classes a
3 min read
Complete Guide to CSS Flexbox
Flexbox, short for Flexible Box Layout, is a one-dimensional layout method for aligning and distributing space among items in a container. It allows you to design layouts that adapt to different screen sizes, making it ideal for responsive web design. Flex Container: The parent element that holds fl
8 min read
Primer CSS Flexbox Example Components
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
3 min read
Foundation CSS Flex Grid Collapse/Uncollapse Rows
Foundation CSS is an open-source and free front-end framework that helps us in making responsive web designs. It is one of the most advanced CSS frameworks and it works on all devices providing us with a responsive grid and HTML and CSS UI components, templates, etc. It also gives some optional func
7 min read
Foundation CSS Flex Grid Importing
Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. Flex Grid is nothing but a grid system that’s forme
2 min read