Layout

Page Last modified 31 Jul 2023

4 min read

This page was archived on 31 Jul 2023 with reason: Other (new version on http://eea.github.io/)

Containers and utility classes for layouts found within our site.

Menu

Contents

Containers

EEA Website uses a mix of containers from Plone 4 deco system and some custom containers inspired from css frameworks such as Bootstrap and Bulma.

Content container

As part of News style content types redesign our main content column is now maximum 830px (800px width with 15px left and right padding) and centered in view.

This design decision was made in order to remove the right column area and put focus on the content area which has larger fonts making it easier to read both on mobile and desktop resolutions.

Default main content container class


<div class="width-3:4">
  <p>Default main content container class</p>
</div>

Flex container

Acting like Bulma's level container flex-container is used in sections where we want content to be vertically centered and of the same size.

In our website we use this container to force the left and right boxes construct to be of the same size and fit next to each other as floated left and right items would.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, cum cumque cupiditate, deserunt dignissimos enim error fuga in inventore libero minima, minus molestias nesciunt nulla numquam porro sit ullam voluptatem.


<div class="flex-container">

    <div class="box box--left  box-secondary">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Alias, cum cumque cupiditate, deserunt dignissimos enim error
        fuga in inventore libero minima,
        minus molestias nesciunt nulla numquam porro sit ullam voluptatem.
      </p>
    </div>

    <div class="box box--right box-primary">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Alias, cum cumque cupiditate, deserunt dignissimos enim error
        fuga in inventore libero minima,
        minus molestias nesciunt nulla numquam porro sit ullam voluptatem.
      </p>
    </div>
  
</div>

Fullwidth container

Acting like Bootstrap's container-fluid fullwidth-container is used in sections where we want content to break out of the content area and fill up the entire browser width.

Common sections where this is used within our website are for Dashboard and GIS Map Application content types where we have external maps and graphs that benefit from spanning over a large area.

The only difference between fullwidth-container and fullwidth-container-centered is the fact that the latter restricts the non image content to 800px, useful for content that needs to be spaced apart such as pictures with an emphasis area section, hence the content is centered and kept on the content area.

This container is used best for chart applications such as Tableau rather than text, based content.


<div class="fullwidth-container">
  <img src="https://www.eea.europa.eu/highlights/new-challenges-facing-europe2019s-wastewater/image_panoramic">
  <p>This container is used best for chart applications such as <strong>Tableau</strong>
    rather than text, based content.
  </p>
</div>

Widescreen container

Acting like Bulma's is-widescreen container widescreen-container is used in sections where we want content to break out of the content area and fill up 100% of width up to 1400px, without any top and bottom margin and without centering any of the children.

Common sections where this is used within our website are for Indicator Assessments and Infographic content types where we have external maps and graphs that benefit from spanning over a large area and description and title needs to be left aligned instead of centered.

Widescreen container title

This container is best used for content that needs to span to full content area, without any top or bottom margin added to the container.


<div class="widescreen-container">
  <p><strong>Widescreen container title</strong></p>
  <img src="https://www.eea.europa.eu/highlights/new-challenges-facing-europe2019s-wastewater/image_panoramic">
  <p>This container is best used for content that needs to span to full
     content area, without any top or bottom margin added to the container.
  </p>
</div>

Utilities

eea-block

Sometimes we want compose several design components together such as a box container with a blockquote.

In this case all of the components selectable from TinyMCE have the eea-block class applied such that if we stack them the second block removes the top and bottom margin.

This is useful when the spacing is coming from the padding of the first block and having the extra margin is unnecessary.

This is an emphasis-area div with eea-block class

Another text here

This is an emphasis-area div without eea-block class

Another text here


<div class="box eea-block box--full box-primary">
  <div class="emphasis-area eea-block">
    <p>This is an <em>emphasis-area</em> div with eea-block class</p>
  </div>
  <p>Another text here</p>
</div>

<div class="box eea-block box--full box-primary">
  <div class="emphasis-area">
    <p>This is an <em>emphasis-area</em> div without eea-block class</p>
  </div>
  <p>Another text here</p>
</div>

eea-section-* wrapper classes

These classes are useful when we want to have normalized top and bottom margin, to be used with any components or elements that need to be consistently spaced apart, they being especially useful for container classes in order to avoid having any top and bottom margins values on the containers.

The following classes are available with the following values:

Name	Margin top and bottom values
eea-section-sm	1.5rem (24px)
eea-section-md	2rem (32px)
eea-section-lg	2.5rem (40px)
eea-section-xl	3.75rem (60px)
eea-section-hero	6.25rem (100px)

Examples of these classes in action:

        EEA Section Small margin top and bottom
      
        EEA Section Medium margin top and bottom
      
        EEA Section Large margin top and bottom
      
        EEA Section Extra Large margin top and bottom
      
        EEA Section Hero margin top and bottom
      
<div class="fullwidth-bg eea-section-sm bg-primary">
  <h2 class="notoc">EEA Section Small margin top and bottom</h2>
</div>

<div class="fullwidth-bg eea-section-md bg-primary">
  <h2 class="notoc">EEA Section Medium margin top and bottom</h2>
</div>

<div class="fullwidth-bg eea-section-lg bg-primary">
  <h2 class="notoc">EEA Section Large margin top and bottom</h2>
</div>

<div class="fullwidth-bg eea-section-xl bg-primary">
  <h2 class="notoc">EEA Section Extra Large margin top and bottom</h2>
</div>

<div class="fullwidth-bg eea-section-xl bg-primary">
  <h2 class="notoc">EEA Section Hero margin top and bottom</h2>
</div>

Fullwidth background sections

Just like boxes we can also make use of fullwidth background sections to add emphasis to the given area.

Also like the boxes we have 3 color options:

Are you a journalist?

Contact our press team

Write to the following:

EEA Press officer
EEA Press officer

Full width background section with primary background color

Thank you for your contact

Even table header	Odd table header
Even table item	Odd table item
Odd table item	Even table item

Are you a journalist?

Contact our press team

Write to the following:

EEA Press officer
EEA Press officer

Full width background section with secondary background color

Thank you for your contact

Even table header	Odd table header
Even table item	Odd table item
Odd table item	Even table item

Are you a journalist?

Contact our press team

Write to the following:

EEA Press officer
EEA Press officer

Full width background section with tertiary background color

Thank you for your contact

Even table header	Odd table header
Even table item	Odd table item
Odd table item	Even table item


<div class="fullwidth-bg eea-block bg-primary">
  <h2 class="notoc">Are you a journalist?</h2>
  <h3 class="notoc">Contact our press team</h3>
  <h4 class="figureHeading notoc">Write to the following:</h4>
  <ul>
    <li><a href="#">EEA</a> Press officer</li>
    <li><a href="#">EEA</a>&nbsp;Press officer</li>
  </ul>
  <p>Full width background section with primary background color</p>
  <p class="discreet">Thank you for your contact</p>
  <table class="invisible" summary="Muted table example within boxes">
    <thead>
    <tr class="even">
      <th>Even table header</th>
      <th>Odd table header</th>
    </tr>
    </thead>
    <tbody>
    <tr class="even">
      <td>Even table item</td>
      <td>Odd table item</td>
    </tr>
    <tr class="even">
      <td>Odd table item</td>
      <td>Even table item</td>
    </tr>
    </tbody>
  </table>
</div>

<div class="fullwidth-bg eea-block bg-secondary">
  <h2 class="notoc">Are you a journalist?</h2>
  <h3 class="notoc">Contact our press team</h3>
  <h4 class="figureHeading notoc">Write to the following:</h4>
  <ul>
    <li><a href="#">EEA</a> Press officer</li>
    <li><a href="#">EEA</a>&nbsp;Press officer</li>
  </ul>
  <p>Full width background section with secondary background color</p>
  <p class="discreet">Thank you for your contact</p>
  <table class="invisible" summary="Muted table example within boxes">
    <thead>
    <tr class="even">
      <th>Even table header</th>
      <th>Odd table header</th>
    </tr>
    </thead>
    <tbody>
    <tr class="even">
      <td>Even table item</td>
      <td>Odd table item</td>
    </tr>
    <tr class="even">
      <td>Odd table item</td>
      <td>Even table item</td>
    </tr>
    </tbody>
  </table>
</div>

<div class="fullwidth-bg eea-block bg-tertiary">
  <h2 class="notoc">Are you a journalist?</h2>
  <h3 class="notoc">Contact our press team</h3>
  <h4 class="figureHeading notoc">Write to the following:</h4>
  <ul>
    <li><a href="#">EEA</a> Press officer</li>
    <li><a href="#">EEA</a>&nbsp;Press officer</li>
  </ul>
  <p>Full width background section with tertiary background color</p>
  <p class="discreet">Thank you for your contact</p>
  <table class="invisible" summary="Muted table example within boxes">
    <thead>
    <tr class="even">
      <th>Even table header</th>
      <th>Odd table header</th>
    </tr>
    </thead>
    <tbody>
    <tr class="even">
      <td>Even table item</td>
      <td>Odd table item</td>
    </tr>
    <tr class="even">
      <td>Odd table item</td>
      <td>Even table item</td>
    </tr>
    </tbody>
  </table>
</div>

Fullwidth background section with other elements

Besides the simple styles, you can also nest several styles for a combined effect in case it fit's the page design.

This way you can nest a Inline quote within a Fullwidth background section.


<div class="fullwidth-bg eea-block bg-primary">
  <blockquote>
    <p>Besides the simple styles, you can also nest several styles
      for a combined effect in case it fit's the page design.
    </p>
  </blockquote>
  <p>This way you can nest a <strong>Inline quote</strong> within a
    <strong>Fullwidth background section</strong>.
  </p>
</div>