Container
Category: BasicWeb 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 by simply adding a wrap container. The container supports multiple fixed sizes for different desktop displays.
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>