diff --git a/src/pages/projects/sistent/components/container/code.js b/src/pages/projects/sistent/components/container/code.js new file mode 100644 index 000000000000..ee5f12f95992 --- /dev/null +++ b/src/pages/projects/sistent/components/container/code.js @@ -0,0 +1,8 @@ +import React from "react"; +import { ContainerCode } from "../../../../../sections/Projects/Sistent/components/container/code"; + +const ContainerCodePage = () => { + return ; +}; + +export default ContainerCodePage; diff --git a/src/pages/projects/sistent/components/container/guidance.js b/src/pages/projects/sistent/components/container/guidance.js new file mode 100644 index 000000000000..763ec456f972 --- /dev/null +++ b/src/pages/projects/sistent/components/container/guidance.js @@ -0,0 +1,8 @@ +import React from "react"; +import { ContainerGuidancePage } from "../../../../../sections/Projects/Sistent/components/container/guidance"; + +const LinkGuidance = () => { + return ; +}; + +export default LinkGuidance; diff --git a/src/pages/projects/sistent/components/container/index.js b/src/pages/projects/sistent/components/container/index.js new file mode 100644 index 000000000000..a7bcf30afd1f --- /dev/null +++ b/src/pages/projects/sistent/components/container/index.js @@ -0,0 +1,8 @@ +import React from "react"; +import SistentContainer from "../../../../../sections/Projects/Sistent/components/container/index"; + +const SistentContainerPage = () => { + return ; +}; + +export default SistentContainerPage; diff --git a/src/sections/Projects/Sistent/components/container/code.js b/src/sections/Projects/Sistent/components/container/code.js new file mode 100644 index 000000000000..dc55461dd067 --- /dev/null +++ b/src/sections/Projects/Sistent/components/container/code.js @@ -0,0 +1,219 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { SistentThemeProvider, Container, Box } from "@layer5/sistent"; +import { CodeBlock } from "../button/code-block"; +// import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight"; +import { SistentLayout } from "../../sistent-layout"; + +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const codes = [ + ` + + + + `, + + ` + + + + `, + + ` + + + + +`, + ` + + + + +

+ This is a nested container example. +

+ + + + +`, +]; + +export const ContainerCode = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Container

+ +

+
+ navigate("/projects/sistent/components/container")} + title="Overview" + /> + + navigate("/projects/sistent/components/container/guidance") + } + title="Guidance" + /> + + navigate("/projects/sistent/components/container/code") + } + title="Code" + /> +
+
+

+ The Container component is an essential building block for creating + layouts. Its ability to center content, provide fluid and fixed + widths, and adapt responsively to different screen sizes makes it an + invaluable tool for developers. By using the Container effectively, + you can ensure that your application maintains a clean and organized + appearance while enhancing the user experience. +

+ +

Fluid Container Example

+ +

+ By default, the Container is fluid, meaning it adjusts its width + based on the viewport size. You can control its maximum width by + utilizing the maxWidth prop. +

+
+
+ + + + + +
+ +
+
+

maxWidth Prop Values

+

+ The maxWidth prop accepts several predefined values, each + corresponding to specific breakpoints. Here are the available + options: +

+
    +
  • + "xs": This sets the maximum width to the + extra-small breakpoint (0px to 600px). The container will not + exceed this width, providing a compact layout suitable for + mobile devices. +
    • +
  • + "sm": The small breakpoint (600px to 960px) + ensures that the container expands up to a width of 600px, + making it a good choice for tablets and smaller desktops. +
    • +
  • + "md": This option sets the maximum width to the + medium breakpoint (960px to 1280px). It is useful for standard + desktop views while still accommodating smaller devices. +
    • +
  • + "lg": The large breakpoint (1280px to 1920px) + allows the container to grow larger, up to 1280px, ideal for + wide-screen displays and detailed layouts. +
    • +
  • + "xl": This sets the maximum width to the + extra-large breakpoint (1920px and above). It's particularly + beneficial for high-resolution screens where more content can be + displayed without feeling cramped. +
    • +
  • + false: If set to false, the container will have + no maximum width constraint, allowing it to stretch the full + width of its parent element. +
    • +
+
+ +
+

+ Another Example with maxWith = "md" +

+
+
+ + + + + +
+ +
+
+ +

Fixed Container Example

+ +

+ If you prefer a fixed width, you can use the fixed prop. This aligns + the container's max-width with the minimum width of the current + breakpoint, ensuring that your layout remains consistent across + different screen sizes +

+
+
+ + + + + +
+ +
+ +

Nested Container Example

+

+ A small section on nesting containers, emphasizing best practices. +

+ +
+
+ + + + + + + +
+ +
+
+
+ + ); +}; diff --git a/src/sections/Projects/Sistent/components/container/guidance.js b/src/sections/Projects/Sistent/components/container/guidance.js new file mode 100644 index 000000000000..6578572a29f9 --- /dev/null +++ b/src/sections/Projects/Sistent/components/container/guidance.js @@ -0,0 +1,164 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; +import { Row } from "../../../../../reusecore/Layout"; +import { SistentThemeProvider, Container, Box } from "@layer5/sistent"; +import { SistentLayout } from "../../sistent-layout"; + +import TabButton from "../../../../../reusecore/Button"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +export const ContainerGuidancePage = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Container

+ +

+ Containers are fundamental layout elements, used to center and + structure content horizontally. They can be fluid or fixed, helping + maintain alignment across different screen sizes and improving + readability. +

+
+ navigate("/projects/sistent/components/container")} + title="Overview" + /> + + navigate("/projects/sistent/components/container/guidance") + } + title="Guidance" + /> + + navigate("/projects/sistent/components/container/code") + } + title="Code" + /> +
+
+

+ The Container component is an essential building block for creating + layouts. Its ability to center content, provide fluid and fixed + widths, and adapt responsively to different screen sizes makes it an + invaluable tool for developers. By using the Container effectively, + you can ensure that your application maintains a clean and organized + appearance while enhancing the user experience +

+ + +

Function

+ + +

The Container serves various functions:

+ +

Fluid Container

+

+ A fluid container adapts to the width of its parent element and can + have a maximum width set by the maxWidth prop. This is + useful for creating responsive layouts that adjust based on screen + size. +

+ + + + +

+ This is a fluid container that adjusts its width based on + the screen size. +

+ + + + + +

Fixed Container

+

+ A fixed container uses predefined maximum widths based on + breakpoints, providing a consistent layout across different screen + sizes. This helps maintain a structured design that is visually + appealing. +

+ + + + +

+ This is a fixed container with a max width defined by the + current breakpoint +

+ + + + + +

Nested Containers

+

+ While nesting containers is possible, it is generally recommended to + avoid it unless necessary. Proper use of containers can enhance + layout structure without complicating the design. +

+ + + + + +

+ This is a nested container example. +

+ + + + + + + +

Labeling

+ +

+ Container labeling is essential for understanding the layout + structure. Use clear and descriptive headings to indicate the + purpose of each container. +

+ +

Use Cases

+

+ Different use cases for containers include wrapping content + sections, creating responsive grids, and maintaining consistent + padding and margins across various components. +

+ +

Responsive Design

+

+ Leveraging the container's fluid and fixed properties contributes to + a responsive design that provides a seamless user experience across + devices of all sizes. +

+
+
+ + ); +}; diff --git a/src/sections/Projects/Sistent/components/container/index.js b/src/sections/Projects/Sistent/components/container/index.js new file mode 100644 index 000000000000..03c53dfa0ded --- /dev/null +++ b/src/sections/Projects/Sistent/components/container/index.js @@ -0,0 +1,126 @@ +import React from "react"; +import { navigate } from "gatsby"; +import { useLocation } from "@reach/router"; + +import { SistentThemeProvider, Container, Box } from "@layer5/sistent"; +import TabButton from "../../../../../reusecore/Button"; +import { SistentLayout } from "../../sistent-layout"; +import { Row } from "../../../../../reusecore/Layout"; +import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode"; + +const SistentContainer = () => { + const location = useLocation(); + const { isDark } = useStyledDarkMode(); + + return ( + +
+ +

Container

+ +

+ Containers are fundamental layout elements, used to center and + structure content horizontally. They can be fluid or fixed, helping + maintain alignment across different screen sizes and improving + readability. +

+
+ navigate("/projects/sistent/components/container")} + title="Overview" + /> + + navigate("/projects/sistent/components/container/guidance") + } + title="Guidance" + /> + + navigate("/projects/sistent/components/container/code") + } + title="Code" + /> +
+
+

+ The Container component is an essential building block for creating + layouts. Its ability to center content, provide fluid and fixed + widths, and adapt responsively to different screen sizes makes it an + invaluable tool for developers. By using the Container effectively, + you can ensure that your application maintains a clean and organized + appearance while enhancing the user experience. +

+ +

Types of Container

+ +

+ Sistent has two main types of containers that cater to different + layout requirements: Fluid Containers and Fixed Containers. Each + type serves specific use cases in building responsive web + applications. +

+

1. Fluid Container

+

+ A Fluid Container automatically adjusts its width to fill the + available space based on the viewport size. It allows for a + responsive layout that adapts to different screen sizes. +

+

Usage

+

+ Ideal for layouts where you want the content to take full advantage + of the available width. The fluid nature of the container ensures + that it scales seamlessly across devices, from mobile to desktop. +

+ + + + + + + + +

2. Fixed Container

+

+ A Fixed Container has a predefined width that matches the minimum + width of the current breakpoint. This allows for a consistent and + controlled layout across different screen sizes. +

+

Usage

+

+ Suitable for designs that require specific width constraints, + ensuring that your content does not stretch too wide on larger + screens. This is particularly useful for fixed-width layouts where + the visual structure is maintained. +

+ + + + + + + +
+
+ + ); +}; + +export default SistentContainer; diff --git a/src/sections/Projects/Sistent/components/index.js b/src/sections/Projects/Sistent/components/index.js index ca05b2d29792..7814f6ed237a 100644 --- a/src/sections/Projects/Sistent/components/index.js +++ b/src/sections/Projects/Sistent/components/index.js @@ -58,7 +58,13 @@ const componentsData = [ "Links are essential and integral components of an interface. They are primarily used for navigation, guiding users to the next step in a journey or redirecting them to relevant sections or pages.", url: "/projects/sistent/components/link", }, - + { + id: 8, + name: "Container", + description: + "Containers align and center content, providing responsive layout options for different screen sizes.", + url: "/projects/sistent/components/container", + }, ]; const SistentComponents = () => { @@ -121,7 +127,6 @@ const SistentComponents = () => { ))} -