Skip to content
Hoot

App Structure

The Layout

Here’s the main structure of Chatter. This can all be pulled from inspecting the app, but this is a bit easier, right?

<section>
  <!-- This is the entire app -->
  <div id="chatBoundary">
    <div id="chatBubble">
      <!-- For each message -->
      <div id="chatContent">
        <span>
          <b class="chatName"></b>
          <span class="pronoun"></span>
          <span class="divider"></span>
          <!-- For each word of message -->
          <span class="word"> </span>
          <!-- For each emote of message -->
          <img class="emote" />
        </span>
      </div>
    </div>
    <!-- Underlying background -->
    <div id="chatBackground"></div>
  </div>
</section>

Notable Sections

Chat Boundary id:chatBoundary

This contains the whole app, so used for broad changes.

CSS Variables

--padding --fontSize

Chat Bubble class:chatBubble

Each chat message comes through as a bubble. Specific CSS variables related to the user that has sent the message will be applied to each bubble, which you could overwrite. See more about that in the next section

Text flow and wrapping is annoyingly tricky in CSS, so beware that any changes could mess up multi-line chat messages.

animHeight is needed for animations, so would not recommend applying anything to that unless you are specifically writing custom animations.

CSS Variables

--animTime --animEase --userCol --shadowCol --animHeight

Divider class:divider

The divider symbol between user and message, : by default. To change, target the :before psudeo-element and change the content CSS value.

chatBackground id:chatBackground

Very self-explanitory. Does not contain any chat data.

Could be replaced with images, gradients, or other custom designs.

CSS Variables

--bgColour