Skip to main content
Version: next

Objects

The objects layer contains class-based selectors to provide blocks with no aesthetics.
If components are UI blocks, you can consider than objects are UX blocks.

// OBJECTS
@forward "@glsass/objects/objects.divider";
@forward "@glsass/objects/objects.layout";
@forward "@glsass/objects/objects.link";
@forward "@glsass/objects/objects.list-bare";
@forward "@glsass/objects/objects.list-inline";
@forward "@glsass/objects/objects.media";
@forward "@glsass/objects/objects.overlay";
@forward "@glsass/objects/objects.table";

/* Or import all of objects */

// OBJECTS
@forward "@glsass/objects";

Since objects are low CSS code, you can use all of them by importing the folder. But you can improve your loading charge by use only which ones you need.

The folder doesn't contain very simple objects like box or block like you can see in others framework, since you can achieve these layouts by playing with utilities classes.

Divider​

Since v1.0.0
View source

Since the <hr> tag have a semantic value, the divider object allows to add a separating element between blocks.

you can add content inside
<div class="o-divider"></div>

<div class="o-divider o-divider--content">you can add content inside</div>

Layout​

The grid layout system is explained in the dedicated Grid layout page.

Since v1.0.0
View source

The link object can be used to have the opposite behavior compared to a default link (it's not underlined by default, and it becomes on hover).

Link to the home

Link to MDN homepage
<a class="o-link" href="/">Link to the home</a>

<a class="o-link" href="https://developer.mozilla.org/" target="_blank" rel="noopener noreferrer">Link to MDN homepage</a>

This behavior cannot be reproduced easily with utilities classes, since it defines a unique state, without interaction detection (hover, focus, etc.). And it can avoid you to create a component for a footer menu (which contains a lot of links) for example.

List bare​

Since v1.0.0
View source

The list bare object erase the list style to a list (bullet and indentation).
Depending of the default list styling, the class might not be necessary. Especially if you follow the reset from the elements layer.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Sed do eiusmod tempor incididunt
<ul class="o-list-bare">
  <li class="o-list-bare__item">Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Sed do eiusmod tempor incididunt</li>
</ul>
info

Depending of reset on lists (from generics or elements), the class .o-list-bare__item may be not required on the <li> tag.

List inline​

Since v1.0.0
View source

Similar to the list bare, but it displays the list in one line.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Sed do eiusmod tempor incididunt
<ul class="o-list-inline">
  <li class="o-list-inline__item">Lorem ipsum dolor sit amet</li>
  <li class="o-list-inline__item">Consectetur adipiscing elit</li>
  <li class="o-list-inline__item">Sed do eiusmod tempor incididunt</li>
</ul>

Media​

Since v1.0.0
View source

The media object is a legacy of OOCSS, but the old syntax was made with a float display. In Glsass, the display is managed with flex.

Placeholder image70x70
This is the default layout of the media object. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing.
Placeholder image70x70
But it also can been reversed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing.
Placeholder image70x70
Or the media can be vertically centered. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing. Vivamus sit amet risus ligula. Nunc eu pulvinar augue.
<div class="o-media">
  <div class="o-media__image">
    <img src="/assets/data/media-example.png" alt="media image">
    <!-- Also work with a SVG tag -->
  </div>
  <div class="o-media__body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing.
  </div>
</div>

<div class="o-media o-media--reverse">
  <div class="o-media__image">
    <img src="/assets/data/media-example.png" alt="media image">
  </div>
  <div class="o-media__body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing.
  </div>
</div>

<div class="o-media o-media--center">
  <div class="o-media__image">
    <img src="/assets/data/media-example.png" alt="media image">
  </div>
  <div class="o-media__body">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac nisl quis massa vulputate adipiscing.
  </div>
</div>

Overlay​

Since v1.0.0
View source

This optional object can be used with a modal system. Some JavaScript is added for the demo below.

Click the button to enable the overlay, then click on it or use the escape or space key.

<div class="o-overlay"></div>

<div class="o-overlay is-visible"></div>

Table​

Since v1.0.0
View source

The table object might be consider as a component since it add some aesthetics, like borders, but that's all.

If you need others options like a striped or hoverable rows, you can create your own component.

<table class="o-table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Developer</th>
      <th scope="col">Release date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>The Last of Us Part II</td>
      <td>Naughty Dog</td>
      <td>19 June 2020</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>God of War</td>
      <td>Santa Monica Studio</td>
      <td>20 April 2018</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Death Stranding</td>
      <td>Kojima Productions</td>
      <td>8 November 2019</td>
    </tr>
  </tbody>
</table>