Layouts
Layouts in the Opportunity Standard are based on the 8px grid system. This means all dimensions and spacing between elements are determined by multiplying the value of 8px. The base value is stored in the --nyco-grid CSS custom property then other custom properties use the calc() CSS function to multiply it. There are also some layout utilities as well as a few basic predefined layouts.
Layout utilities provide basic parameters for layout container elements.
| Utility | Description |
|---|---|
wrap
|
The wrap class adds spacing on both sides of the element. This utility ensures a comfortable amount of window spacing for text and other elements for mobile and desktop browsers. |
page-max
|
The page maximum class sets the container element’s maximum width to --nyco-dimension-site-max-width which equals calc(var(--nyco-grid) * 180). This limits the element from growing beyond this width in larger desktop browsers. |
page-min
|
The page minimum class sets the container element’s minimum width to --nyco-dimension-site-min-width which equals calc(var(--nyco-grid) * 40). This prevents the element’s width from shrinking below this width. |
page-min-max
|
The page minimum and maximum class sets the container element’s maximum and minimum widths to the dimensions described above. |
Demonstration
Content Region
There are over 30 programs you or your family may be eligible for regardless of immigration status and even if you're already receiving benefits or have a job.
Code
The Content Layout creates a container with a maximum width for the comfortable reading of long-form text. The content region maximum width is calc(var(--nyco-grid) * 112).
Demonstration
Code
The Sidebar Layout creates a two-column container. The first element, the sidebar region, will have a maximum width of 20rem. The second element will stretch to the end of the layout’s container.
It is recommended to use a responsive utility prefix (small:, mobile:, tablet:, or desktop:) with the layout-content class to only enforce the layout in larger devices.
Demonstration
Code
The Small Sidebar Layout creates a smaller sidebar with a maximum width of 12rem.
Demonstration
Code
The Map Layout uses the Sidebar Layout to create a map view suited for displaying a list of locations that also appear as points in the map. This enables users to find locations of offices or location-based services (or other location information).
The container has two columns for desktop viewports. The map occupies the second, larger region and the sidebar is the first region. On smaller viewports, the map region is stacked on top of the sidebar region and occupies 50vh of the screen.
The entire layout container (sidebar and map) will have a fixed height of 90vh of the viewport. This enables the sidebar region to be scrollable vertically to accommodate long lists or large amounts of content.
Demonstration
Topbar header region
Topbar content region
Code
The Topbar Layout creates an application view with a fixed height topbar suited for tablet devices. The layout contains is a single-column container with a fixed-height header region and a vertically scrollable content region.
The first element, the header region, will have a fixed height of calc(var(--nyco-grid) * 11). The scrollable content region’s height will stretch to the end of the layout container. The entire layout container will have a fixed height of 100vh of the viewport.
Demonstration
Code
Layouts with multiple columns can be achieved using Tailwindcss Utilities. It supports column systems using CSS Grid or Flexbox.
Grid
-
gridsets the display property to grid. -
grid-col-{{ number }}determines the number of columns in the grid. Currently, the range is 1 - 8. -
gap-{{ multiplier }}determines the gap between columns. The number multiplies the grid base value8px. Currently, the range is 1 - 8.
Read more about Grid utilities on the Tailwindcss documentation.
Flexbox
flex sets the display property to grid. Elements in the container will fill up the required space. Read more about Flexbox utilities on the Tailwindcss documentation.
Both properties supported responsive variants for different column settings in each major breakpoint; small:, mobile:, tablet:, and desktop:. For example tablet:grid sets a container element to display: grid for tablet viewports.