3 #Objects Objects
Layout and structural design patterns that can be reused many times for many different purposes. Agnostic to function and content.
- layout display (grid/flexbox/multicol)
- positioning/floats/alignment
- sizing (width & height)
- spacing (padding & margin)
Example: a three-column grid. It has a specific visual structure but it can be used in many contexts, e.g., a grid of products, a group of action buttons, or a listing of passes.
kss-styleguide.scss, line 16
3.1 #Objects.List The List Object
A simple, plain, blocky list. It removes the usual padding and list item markers accompanied by (un)ordered lists. The result is a list of items, each on its own line. Combine this class with other classes to create a variety of styles.
- author
- Chris Harvey
- updated
- Burns & McDonnell Engineering
- DIS-TRAN Steel, LLC
- EDM International
- Electrical Consultants, Inc.
- Fabrimet Inc.
- Falcon Steel Company
Markup
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/o-List.css"/-->
<ul class="o-List">
<li class="o-List__Item">Burns & McDonnell Engineering</li>
<li class="o-List__Item">DIS-TRAN Steel, LLC</li>
<li class="o-List__Item">EDM International</li>
<li class="o-List__Item">Electrical Consultants, Inc.</li>
<li class="o-List__Item">Fabrimet Inc.</li>
<li class="o-List__Item">Falcon Steel Company</li>
</ul>_o-List.less, line 8
3.2 #Objects.Flex The Flex Object
The Flex Object is a container of flexible items arranged in one dimension.
The axis, called the main-axis, is horizontal by default, but you can
change the orientation to vertical using flex-direction.
Also by default, the items along the main-axis do not wrap to the next track (row or column),
but you can use flex-wrap to override this as well. If wrapping is turned on,
the point where the wrap occurs is not controlled. This is by design.
For two-dimensional control, see the Grid Object.
Each flex item has a main size of auto, which defers to its
width (or height) property. If that property is not explicitly set
(or is explicitly set to auto), then the item’s main size will set
automatically based its contents.
The flex items will grow or shrink together to fit into the allotted space.
By default, the extra space (if any) will be distributed between the items.
You can override this with justify-content.
See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for details.
- author
- Chris Harvey
- updated
- Burns & McDonnell Engineering
- DIS-TRAN Steel, LLC
- EDM International
- Electrical Consultants, Inc.
- Fabrimet Inc.
- Falcon Steel Company
- Sabre-FWT
- HDR
- Mitas Energy
- Power Consulting Associates, LLC
- Power Line Systems, Inc.
- Quanta Services
- ReliaPOLE Inspection Services
Markup
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/o-Flex.css"/-->
<ul class="o-List o-Flex">
<li class="o-List__Item o-Flex__Item">Burns & McDonnell Engineering</li>
<li class="o-List__Item o-Flex__Item">DIS-TRAN Steel, LLC</li>
<li class="o-List__Item o-Flex__Item">EDM International</li>
<li class="o-List__Item o-Flex__Item">Electrical Consultants, Inc.</li>
<li class="o-List__Item o-Flex__Item">Fabrimet Inc.</li>
<li class="o-List__Item o-Flex__Item">Falcon Steel Company</li>
<li class="o-List__Item o-Flex__Item">Sabre-FWT</li>
<li class="o-List__Item o-Flex__Item">HDR</li>
<li class="o-List__Item o-Flex__Item">Mitas Energy</li>
<li class="o-List__Item o-Flex__Item">Power Consulting Associates, LLC</li>
<li class="o-List__Item o-Flex__Item">Power Line Systems, Inc.</li>
<li class="o-List__Item o-Flex__Item">Quanta Services</li>
<li class="o-List__Item o-Flex__Item">ReliaPOLE Inspection Services</li>
</ul>_o-Flex.less, line 7
3.3 #Objects.Grid The Grid Object
The Grid Object is similar to the Flex Object except that it can be controlled in two dimensions.
It has the structure of a list in that all items share the same container (unlike tables where cells might not share the same row), while at the same time appearing like a table with rows and columns.
The Grid Object has one column at 1fr, unless overridden.
Using CSS Grid properties and media queries, you can achieve a flexible and responsive table effect,
adjusting the number of columns and rows based on screen size and/or content.
See https://css-tricks.com/snippets/css/complete-guide-grid/ for details.
- author
- Chris Harvey
- updated
- Burns & McDonnell Engineering
- DIS-TRAN Steel, LLC
- EDM International
- Electrical Consultants, Inc.
- Fabrimet Inc.
- Falcon Steel Company
- Sabre-FWT
- HDR
- Mitas Energy
- Power Consulting Associates, LLC
- Power Line Systems, Inc.
- Quanta Services
- ReliaPOLE Inspection Services
- Sabre-FWT
- SAE Towers
- TAPP Steel Poles
- Trinity Meyer Utility Structures
- TRC Engineers
- Underground Devices
- Valmont Newmark
Markup
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/o-Grid.css"/-->
<ul class="o-List o-Grid">
<li class="o-List__Item o-Grid__Item">Burns & McDonnell Engineering</li>
<li class="o-List__Item o-Grid__Item">DIS-TRAN Steel, LLC</li>
<li class="o-List__Item o-Grid__Item">EDM International</li>
<li class="o-List__Item o-Grid__Item">Electrical Consultants, Inc.</li>
<li class="o-List__Item o-Grid__Item">Fabrimet Inc.</li>
<li class="o-List__Item o-Grid__Item">Falcon Steel Company</li>
<li class="o-List__Item o-Grid__Item">Sabre-FWT</li>
<li class="o-List__Item o-Grid__Item">HDR</li>
<li class="o-List__Item o-Grid__Item">Mitas Energy</li>
<li class="o-List__Item o-Grid__Item">Power Consulting Associates, LLC</li>
<li class="o-List__Item o-Grid__Item">Power Line Systems, Inc.</li>
<li class="o-List__Item o-Grid__Item">Quanta Services</li>
<li class="o-List__Item o-Grid__Item">ReliaPOLE Inspection Services</li>
<li class="o-List__Item o-Grid__Item">Sabre-FWT</li>
<li class="o-List__Item o-Grid__Item">SAE Towers</li>
<li class="o-List__Item o-Grid__Item">TAPP Steel Poles</li>
<li class="o-List__Item o-Grid__Item">Trinity Meyer Utility Structures</li>
<li class="o-List__Item o-Grid__Item">TRC Engineers</li>
<li class="o-List__Item o-Grid__Item">Underground Devices</li>
<li class="o-List__Item o-Grid__Item">Valmont Newmark</li>
</ul>_o-Grid.less, line 7