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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...