Container

Last updated: 16 days ago

Category: Basic

Web content needs to be contained within a defined area called an outer container. This container wraps all content and enables responsive scaling. Users can easily achieve cross-device responsiveness...

Scrollable Container16 days agoDisplay & Align16 days agoText Direction16 days agoContainer16 days agoFlex Layout16 days agoGrid Layout17 days ago

Introduction

The outermost container needs to adapt to screen sizes for responsive layouts that optimally display content. This framework uses the _container class for responsive containers with these characteristics:

Uses three width measurements (fixed width, screen-relative width, and parent-relative width), taking the smallest value
Supports multiple sizes: _container-xxs(600px), _container-xs(800px), _container-sm(1000px), _container-md(1200px), _container-lg(1400px), _container-xl(1600px), _container-xxl(1800px)
On mobile, uses (100vw - margins) for width
When nested in other containers, may use 100% width
Defaults to display:block but can be overridden for flex layouts

Responsive Width

Apply the _container style class to elements to make them responsive. No additional styling is needed - it automatically maintains optimal display width across devices.

Device Type	Width Formula
Small mobile screens	100% - (16×2)px
Small tablets	100% - (16×4)px
Large tablets	100% - (16×6)px
HD tablets	100% - (16×8)px
Laptops/Normal desktop	100% - (14×12)px
2K desktop displays	100% - (14×16)px
4K desktop displays	100% - (14×20)px

Usage: Simply add class="_container" to enable responsive width behavior.

Output
HTML
JS

Responsive Box (Click to Hide)
```
                
                
            
```

                
                let demo0001 = document.querySelector('#demo0001');
                demo0001btn01.onclick=()=>{
                    demo0001.setAttribute('class','_pos-fixed _pos-sb _w-full');
                }
                demo0001btn02.onclick=()=>{
                    demo0001.setAttribute('class','_d-none');
                }
                demo0001.onclick=()=>{
                    demo0001.setAttribute('class','_d-none');
                }

Optional Sizes

The _container class alone creates a responsive container with maximum width constraints across devices. We provide several preset sizes for layout purposes.

Class	Width	Device Compatibility
`_container-xxs`	600px	Tablets & desktops
`_container-xs`	800px	Tablets & desktops
`_container-sm`	1000px	Tablets & desktops
`_container-md`	1200px	Tablets & desktops
`_container-lg`	1400px	Tablets & desktops
`_container-xl`	1600px	Tablets & desktops
`_container-xxl`	1800px	Tablets & desktops

Behavior Notes:

On mobile devices, all containers will use responsive width (100% - 32px) regardless of size class
On tablets and desktops:
- If the responsive width is narrower than the specified size, the responsive width takes priority
- If the viewport is wider than the specified size, the container will use the defined width
Example: A _container-lg (1400px) will:
- Display at 1400px on large desktop screens
- Use responsive width on tablets/phones when the calculated responsive width is narrower than 1400px

Output
HTML
JS

_container-xxs (Click to Hide)

_container-xs (Click to Hide)

_container-sm (Click to Hide)

_container-md (Click to Hide)

_container-lg (Click to Hide)

_container-xl (Click to Hide)

_container-xxl (Click to Hide)
```
                
                
            
```

                
                let demo0002 = document.querySelector('#demo0002');
                demo0002btn01.onclick=()=>{
                    demo0002.setAttribute('class','_pos-fixed _pos-sb _w-full');
                }
                demo0001btn02.onclick=()=>{
                    demo0001.setAttribute('class','_d-none');
                }
                demo0002.onclick=()=>{
                    demo0002.setAttribute('class','_d-none');
                }

Custom Widths

When the predefined _container-xxs to _container-xxl classes don't meet your needs, you can use CSS variables to define custom widths.

CSS Variable	Purpose	Example Usage
`--_container-w`	Uniform width across all devices	`--_container-w: 900px;`
`--_xxs-w`	Mobile device width	`--_xxs-w: 100%;`
`--_xs-w`	Tablet portrait width	`--_xs-w: 720px;`
`--_sm-w`	Tablet landscape width	`--_sm-w: 960px;`
`--_md-w`	HD tablet width	`--_md-w: 1024px;`
`--_lg-w`	Laptop/Normal desktop width	`--_lg-w: 1280px;`
`--_xl-w`	2K desktop width	`--_xl-w: 1440px;`
`--_xxl-w`	4K desktop width	`--_xxl-w: 1600px;`

Important Notes:

All custom widths will be constrained by the responsive width limits
The actual displayed width will never exceed the calculated responsive width
Mobile devices will always use responsive width (100% - 32px) as the maximum

Output
HTML
JS

width 860px (Click to Hide)

xs-400,sm-600,md-800 (Click to Hide)
```
                
                
            
```

                
                let demo0006 = document.querySelector('#demo0006');
                demo0006btn01.onclick=()=>{
                    demo0006.setAttribute('class','_pos-fixed _pos-sb _w-full');
                }
                demo0006btn02.onclick=()=>{
                    demo0006.setAttribute('class','_d-none');
                }
                demo0006.onclick=()=>{
                    demo0006.setAttribute('class','_d-none');
                }

Full Width

Use _container-full for 100% width containers.

Output
HTML
JS

Full Width Box
```
                
                
            
```

                
                let demo0005 = document.querySelector('#demo0005');
                demo0005btn01.onclick=()=>{
                    demo0005.setAttribute('class','_pos-fixed _pos-sb _w-full');
                }
                demo0005btn02.onclick=()=>{
                    demo0005.setAttribute('class','_d-none');
                }
                demo0005.onclick=()=>{
                    demo0005.setAttribute('class','_d-none');
                }

Important Notes

Since _container uses media queries based on screen width, it should only be used:

Directly under body
Or under nodes matching body width

   
                    <html>
                        <body>
                            <div class="_container"></div>
                            <div style="width:100%">
                                <div class="_container"></div>
                            </div>
                        </body>
                    </html>

Animation

16 days ago

Text Direction