Overview
NYP Framework Core uses a Bootstrap 4 based flex grid coupled with BEMIT and ITCSS principles. The gutters are responsive, sizing from 16px gutters by default to 32px on md and up breakpoints.
Optional Bootstrap 4 Classes
You can also optionally disable NYP Framework BEMIT class generation and use the Bootstrap 4 grid directly. See more in the installing and configuring NYP Framework section.
Basic Grid
Below is a basic example of the NYP Framework Grid, showcasing both grid column classes at different breakpoints and equal-sizing and auto-sizing variants of the o-grid__item column class.
<div class="o-grid">
<div class="o-grid__item-6 o-grid__item-3@md">
<span class="u-d-none@md">6 Column</span>
<span class="u-d-none u-d-inline@md">3 Column</span>
</div>
<div class="o-grid__item-6 o-grid__item-4@md">
<span class="u-d-none@md">6 Column</span>
<span class="u-d-none u-d-inline@md">4 Column</span>
</div>
<div class="o-grid__item o-grid__item-5@md">
<span class="u-d-none@md">Auto Column</span>
<span class="u-d-none u-d-inline@md">5 Column</span>
</div>
<div class="o-grid__item o-grid__item-6@md">
<span class="u-d-none@md">Auto Column</span>
<span class="u-d-none u-d-inline@md">6 Column</span>
</div>
<div class="o-grid__item o-grid__item-6@md">
<span class="u-d-none u-d-inline@md">6 Column</span>
<span class="u-d-none@md">Auto Column</span>
</div>
</div>
Auto-layout Columns
Mostly Equal-width Columns
You can also utilize o-grid__item classes without column expressions to create mostly equal width columns. Columns with grow if size of the content dictates, meaning columns will sometimes grow.
You can also use the @sm - @xl media query modifiers, for example:
o-grid__item-3 o-grid__item@md
<div class="o-grid">
<div class="o-grid__item-3">
Equal Column
</div>
<div class="o-grid__item-3">
Equal Column
</div>
<div class="o-grid__item-3">
Equal Column
</div>
<div class="o-grid__item-3">
Equal Column
</div>
</div>
When do equal width columns grow?
When using the o-grid__item classes, there are situations where the content (say, for example, a long word like "onomatopoeia") will force the auto equal columns to grow to fit the content, where a column count will ensure equal widths regardless of the content.
Auto Columns
Use o-grid__item-auto to allow the content to completely dictate the size of the columns.
<div class="o-grid">
<div class="o-grid__item">
Pretend you're water.
</div>
<div class="o-grid__item-auto">
Titanium white, Thalo green, Prussian blue, Van Dyke brown.
</div>
<div class="o-grid__item">
Just floating without any effort.
</div>
</div>
Auto Columns Warning
Auto columns will do their best to automatically adjust flex widths and spacing depending on the content of the column, making auto columns sometimes unpredictable.
Nesting Columns
You can freely nest grid objects. You can use o-grid-container as a parent if you don't want the grid to be inset.
<div class="o-grid">
<div class="o-grid__item-4 o-grid__item-6@md">
<span class="u-d-none@md">6 Column</span>
<span class="u-d-none u-d-inline@md">3 Column</span>
</div>
<div class="o-grid__item-8 o-grid__item-6@md">
<span class="u-d-none@md">Parent 8 Column</span>
<span class="u-d-none u-d-inline@md">Parent 6 Column</span>
<div class="o-grid">
<div class="o-grid__item-6 o-grid__item-4@md">
<span class="u-d-none@md">Nested 6 Column</span>
<span class="u-d-none u-d-inline@md">Nested 4 Column</span>
</div>
<div class="o-grid__item-6 o-grid__item-4@md">
<span class="u-d-none@md">Nested 6 Column</span>
<span class="u-d-none u-d-inline@md">Nested 4 Column</span>
</div>
<div class="o-grid__item o-grid__item-4@md">
<span class="u-d-none@md">Nested Auto Column</span>
<span class="u-d-none u-d-inline@md">Nested 4 Column</span>
</div>
</div>
</div>
</div>
Alignment and Flex Utilities
You can also use the available flex utility and margin utility classes to the control grid and grid items for horizontal and vertical positioning, along with column pushes or pulls.
Vertical Alignment
<div class="o-grid u-f-align-center">
<div class="o-grid__item-4">Align</div>
<div class="o-grid__item-4">Items</div>
<div class="o-grid__item-4">End</div>
</div>
<div class="o-grid u-f-align-end">
<div class="o-grid__item-4">Align</div>
<div class="o-grid__item-4">Items</div>
<div class="o-grid__item-4">End</div>
</div>
<div class="o-grid">
<div class="o-grid__item-4 u-f-align-self-start">Self Start</div>
<div class="o-grid__item-4 u-f-align-self-center">Self Center</div>
<div class="o-grid__item-4 u-f-align-self-end">Self End</div>
</div>
Horizontal Alignment
<div class="o-grid u-f-justify-end">
<div class="o-grid__item-3">Justify</div>
<div class="o-grid__item-3">Flex</div>
<div class="o-grid__item-3">End</div>
</div>
<div class="o-grid u-f-justify-center">
<div class="o-grid__item-3">Justify</div>
<div class="o-grid__item-3"></div>
<div class="o-grid__item-3">Center</div>
</div>
<div class="o-grid u-f-justify-between">
<div class="o-grid__item-3">Justify</div>
<div class="o-grid__item-3">Space</div>
<div class="o-grid__item-3">Between</div>
</div>
<div class="o-grid u-f-justify-around">
<div class="o-grid__item-3">Justify</div>
<div class="o-grid__item-3">Space</div>
<div class="o-grid__item-3">Around</div>
</div>
Pulling and Pushing
By adding u-m-l-auto or u-m-r-auto you can easily push and pull a single or groups of columns to the left or right.
<div class="o-grid">
<div class="o-grid__item-3">Margin</div>
<div class="o-grid__item-3 u-m-r-auto">Right</div>
<div class="o-grid__item-3">Auto</div>
</div>
<div class="o-grid u-f-align-end">
<div class="o-grid__item-3">Margin</div>
<div class="o-grid__item-3 u-m-l-auto">Left</div>
<div class="o-grid__item-3">Auto</div>
</div>
You can also use the offset modifiers to add margin percentages for finer grain control.
<div class="o-grid">
<div class="o-grid__item-3 o-grid__item--offset-3">Offset 3</div>
<div class="o-grid__item-6">Column 6</div>
</div>
<div class="o-grid u-f-align-end">
<div class="o-grid__item-4 o-grid__item--offset-2">Offset 3</div>
<div class="o-grid__item-4 o-grid__item--offset-2">Offset 6</div>
</div>