Flex Layout System
Flexible Web Components Grid System
Flex Layout Grid System - a library of web components for creating flexible flex layouts on your website.
<!-- Canvas for centering website content. -->
<flex-canvas>
<!-- Row and Column containers with gap and direction -->
<flex-box row nowrap reverse gap="20px">
<flex-cell>
<h2>Hello!</h2>
</flex-cell>
<flex-cell>
<!--Grid setup and padding between columns/rows..-->
<flex-grid gap="30px">
<flex-box>
<!--Responsive cells based on a 12-column grid.-->
<flex-cell class="cell-12 cell-sm-6">
cell 1
</flex-cell>
<flex-cell class="cell-12 cell-sm-6">
cell 2
</flex-cell>
</flex-box>
</flex-grid>
</flex-cell>
</flex-box>
</flex-canvas>
Introducing Flex Layout System: Empowering
Effortless Web
Design
Flex Layout System is a powerful library of web components designed to enhance web design development. It provides a range of flexible components for effortless layout creation and grid implementation. The primary objective of Flex Layout System is to simplify the process of building responsive layouts across different projects and frameworks.
Key advantages of Flex Layout System include its intuitive component names, which eliminate the need for complex div structures. The "flex-box" serves as the container, while the "flex-cell" acts as the adaptable building block within the grid. This simplicity improves efficiency and promotes cleaner, more maintainable code.
By importing Flex Layout System just once, you can seamlessly integrate it into any project and framework. The library offers well-designed components with thoughtful nesting, making it easy to customize gaps, grids, columns, and responsiveness. Additionally, the styles of these components are applied to the host element, allowing for effortless customization and overrides. Supplementary components are also included, providing efficient tools for rapid layout design with minimal CSS requirements.
Get Started
To get started with Flex Layout System, follow these simple steps:
Step 1: Install the package Run the following command in your project to install the Flex Layout System package from npm:
npm install flex-layout-system
If you want to use the React
version, run the following command:
npm install flex-layout-system-react
Step 2: Use It!
// ES/TS Project:
import "flex-layout-system";
// Optional. If you want to use the responsive utilities based on CSS Media Queries, import the following:
import "flex-layout-system/dist/css-responsive.min.css";
// Optional: If you want to use the responsive utilities based on the JavaScript system using the flex-media component, import the following:
import "flex-layout-system/dist/js-responsive.min.css";
If yow want to use this library in your HTML file (browser), you can use the following:
<!-- Only one of the following is required. -->
<!-- If you want to use the base layout, import the following: -->
<script src="https://unpkg.com/flex-layout-system/dist/browser-layout.min.js"></script>
<!-- If you want to use the layout with utilities, import the following: -->
<script src="https://unpkg.com/flex-layout-system/dist/browser.min.js"></script>
<!-- Optional. If you want to use the responsive utilities based on CSS Media Queries, import the following: -->
<link rel="stylesheet" href="https://unpkg.com/flex-layout-system/dist/css-responsive.min.css">
<!-- Optional: If you want to use the responsive utilities based on the JavaScript system using the flex-media component, import the following: -->
<link rel="stylesheet" href="https://unpkg.com/flex-layout-system/dist/js-responsive.min.css">
Angular
If you want to use this library in your Angular project, you can use the following:
npm install flex-layout-system
Then, in your angular.json file, add the following:
"styles": [
"node_modules/flex-layout-system/dist/css-responsive.min.css"
],
Finally, in your app.module.ts file, add the following:
import "flex-layout-system";
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
@NgModule({
...
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
NextJS
If you want to use this library in your NextJS project, you can use the following:
npm install flex-layout-system
"use client"; // This is required for NextJS, you need to add this line at the top of the file but not in page.ts file, you need to create a new file in the components folder and import it in the page.ts file with this line
import "flex-layout-system/jsx.types.d"; // Import types
import "flex-layout-system"; // Import components
// Just use the web components in your JSX file, for example:
<flex-box jc="space-between">
<span>1</span>
<span>1</span>
</flex-box>
Examples
A real-life example is this very website! Simply open the DevTools and explore the working example firsthand. Additionally, below you will find examples for each component, showcasing their usage in different scenarios. For more detailed information and documentation, please refer to our official documentation
Components
Canvas
<flex-canvas>
...
</flex-canvas>
<!-- You can set the custom width and padding -->
<flex-canvas width="1200px" pd="2em">
...
</flex-canvas>
<!-- You can disable the centering -->
<flex-canvas mg="0">
...
</flex-canvas>
The FlexCanvas component is a simple container that limits the width of its content and centers it horizontally. It provides a straightforward way to create a container with a fixed width and centered content.
By using the FlexCanvas component, you can easily ensure that your content stays within a specific width and maintains a visually balanced appearance. It helps in achieving a clean and organized layout by providing a centralized alignment for the content.
The FlexCanvas component serves as a foundational building block for your layout design, allowing you to create structured and visually pleasing arrangements. Its simplicity makes it versatile and suitable for various use cases, whether you're working on a small website or a large-scale application.
Box
<flex-box center>
...
</flex-box>
<!-- You can set the direction column/row -->
<flex-box column>
...
</flex-box>
<!-- You can set the flex gap -->
<flex-box gap="20px">
...
</flex-box>
<!-- You can set the flex wrap -->
<flex-box nowrap>
...
</flex-box>
<!-- and other useful properties -->
<flex-box fit middle spread [ac="end"]>
...
</flex-box>
<!-- When used inside a canvas -->
<flex-canvas>
<flex-box>
...
</flex-box>
</flex-canvas>
FlexBox: A versatile component for creating row or column layouts.
The FlexBox component is a highly flexible and multipurpose container that allows you to easily create both row and column layouts. Traditionally referred to as "row" or "column," we've combined these two functionalities into a single component for convenience and efficiency. The main distinction between them lies in the direction property, making it unnecessary to create separate components for each orientation.
With the FlexBox component, you can effortlessly switch between row and column layouts based on responsiveness. This is particularly useful when transitioning from a horizontal row layout to a vertical column layout as the screen size changes. By utilizing the FlexBox component, you can achieve a seamless and adaptive design that accommodates various device dimensions.
The FlexBox component offers a range of configuration options, such as defining the alignment, spacing, and order of its child elements. It provides the flexibility required to create complex and dynamic layouts while maintaining a clean and structured design.
Cell
<flex-box>
<flex-cell>
...
</flex-cell>
<flex-cell stretch>
...
</flex-cell>
</flex-box>
<flex-box>
<flex-cell width="20%">
...
</flex-cell>
<flex-cell grow="1">
...
</flex-cell>
<flex-cell order="2" fill>
...
</flex-cell>
<flex-cell order="1" class="cell-6">
...
</flex-cell>
</flex-box>
FlexCell is a component designed to be used within the FlexBox. It acts as a building block for creating grid layouts. The main purpose of FlexCell is to provide flexible and customizable cells within the grid structure.
FlexCell offers various configuration options, allowing you to adjust the sizing, alignment, and positioning of the content within each cell. It leverages flex properties to enable dynamic and responsive layouts, adapting to different screen sizes and devices.
While not required for all use cases, integrating FlexCell into your FlexBox provides additional versatility and precision when working with grid layouts. It empowers you to achieve fine-grained control over the arrangement of content within the grid, ensuring optimal visual presentation and responsive behavior.
When combined with the FlexGrid component, FlexCell becomes an integral part of building responsive and dynamic grid systems. It enables you to create adaptable layouts that automatically adjust based on different screen sizes and orientations.
Grid
<flex-grid gap="20px">
<flex-box>
<flex-cell class="cell-12 cell-sm-6">
...
</flex-cell>
<flex-cell class="cell-12 cell-sm-6">
...
</flex-cell>
</flex-box>
</flex-grid>
The Grid component is designed to facilitate grid system configuration. While using the flex gap property with the flex-box can be convenient, it may not always be ideal. Some browsers do not support flex gap, and it can also present challenges when precise column count is required.
To address these limitations, the Grid component provides a solution for setting the gaps or margins between the flex-box and flex-cell. It allows you to achieve accurate column alignment and spacing within the grid layout.
By utilizing the Grid component, you can easily customize and fine-tune the gaps between cells, ensuring precise control over the layout. This is particularly useful when aiming for consistent spacing or when working with designs that require specific column counts.
The Grid component enhances the flexibility and versatility of the FlexBox and FlexCell by providing an additional layer of control over margins and gaps. It enables you to create visually appealing and well-structured grid layouts that cater to specific design requirements.
Media
Additional Component - Tool
<flex-media breakpoints="780,1200,1400,1600">
<flex-grid gap="20px">
<flex-box>
<flex-cell class="cell-12 cell-sm-6">
...
</flex-cell>
<flex-cell class="cell-12 cell-sm-6">
...
</flex-cell>
</flex-box>
</flex-grid>
</flex-media>
The FlexMedia component serves as an alternative to media queries and provides enhanced functionality for responsive design. It supports breakpoints from "xs", "sm", "md", "lg", "xl" to "xxl", allowing for precise control over layout changes at different screen sizes.
What sets the FlexMedia component apart is its ability to track changes not only in the document window but also relative to itself (the container). This feature is particularly useful in projects where screen divisions or resizing, such as a sliding map on a booking website, are essential.
The FlexMedia component is included in the full package, full.min.js,
and requires
the
corresponding js-responsive.min.css styles. It is not compatible with
css-responsive
styles.
Other Utility Components
<stacked-box>
<stacked-cell xb="0" yb="0">
...
</stacked-cell>
<stacked-cell z="100" stretch overlay>
...
</stacked-cell>
</stacked-box>
StackedBox / StackedCell
There are two additional components available: StackedBox and StackedCell. These components are designed to facilitate the creation of collages using absolute positioning. They offer a convenient way to arrange and position elements within a layout using CSS logical properties, such as 'inset'.
StackedBox provides a container for arranging stacked cells, allowing you to create visually appealing collages with ease. StackedCell, on the other hand, represents individual cells within the collage and offers features like z-index control and overlay options.
With StackedBox and StackedCell, you can easily achieve complex collage layouts by precisely controlling the position, order, and overlapping of elements. By utilizing CSS logical properties and absolute positioning, you have the flexibility to create captivating designs for various scenarios.
<fit-box cover fill round>
<img src="https://picsum.photos/200/200" width="200" alt="">
</fit-box>
<flex-box stretch fill>
<flex-cell>
<s-box block h="100px"></s-box>
</flex-cell>
<flex-cell>
<fit-box stretch>
<div class="box">box</div>
</fit-box>
</flex-cell>
</flex-box>
FitBox
FitBox is a component designed for content filling purposes. It is used when there is a need to stretch a block to occupy the entire width and height of its container or to fit a child element within the container.
When applied to a block, FitBox ensures that it expands to cover the full width and height of its container, creating a visually immersive experience. This can be particularly useful when creating full-screen sections or hero banners that span the entire viewport.
<a-ratio ratio="4/3">
<img src="example.jpg" alt="Example Image" />
</a-ratio>
AspectRatio
The AspectRatio component maintains element proportions regardless of container or screen size. It ensures consistent aspect ratios for media elements, such as images or videos, resulting in visually appealing layouts.
By applying the AspectRatio component to an element, you can define the desired aspect ratio, such as 16:9 or 4:3. The component dynamically adjusts the element's width and height to maintain the specified ratio, preserving the visual integrity of the content.
<flex-box>
<flex-cell>
...
</flex-cell>
<space-box size="4em"></space-box>
<flex-cell>
...
</flex-cell>
</flex-box>
SpaceBox
The SpaceBox component is a versatile tool that allows for flexible spacing and positioning of content within a layout. It provides fine-grained control over padding and margin properties, enabling precise adjustments to the spacing around and inside the container.
The SpaceBox component is particularly useful when you need to add spacing between rows or columns in a flex system, such as a flex container or grid layout. It allows you to create consistent and adjustable gaps between elements, improving the overall layout and visual structure.
<s-box fz="3em" fb>
I am a StyleBox with a font size of 2em.
<span>
I am a child element with a font size of base font size.
</span>
</s-box>
StyleBox
Introducing StyleBox, a powerful tool designed to streamline your styling workflow and accelerate web development. With StyleBox, you can effortlessly customize the appearance of your elements without the need for extensive external style sheets.
StyleBox offers a unique capability to apply styles exclusively to its child elements, while preserving the internal styles of those elements. With this feature, you can precisely control the appearance of specific components without affecting their nested elements.
<flex-box column>
<flex-cell>...</flex-cell>
<flex-divider dark mg="2em" width="3px" stretch></flex-divider>
<flex-cell>...</flex-cell>
</flex-box>
<flex-box row>
<flex-cell>...</flex-cell>
<flex-divider dark mg="2em" width="3px" stretch></flex-divider>
<flex-cell>...</flex-cell>
</flex-box>
FlexDivider
FlexDivider is a versatile component designed for effortless content separation within layouts. It provides a simple yet effective way to create divisions between sections or columns, adapting seamlessly to different orientations and color themes.
<sr-only>
Invisible to the naked eye, but not to screen readers.
</sr-only>
ScreenReaderOnly
The sr-only component is designed to improve web accessibility by hiding information visually while keeping it available for assistive technologies like screen readers. This means it can be used to provide additional context or detailed descriptions without cluttering the visual design.
<ltr-only>
+97205000000
</ltr-only>
LtrOnly
The LtrOnly component is designed to ensure the correct display of specific text elements such as phone numbers, regardless of the text direction settings of the web page. This is particularly useful in multilingual interfaces where different text directions may be used.