Layout
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
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.
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.
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.
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.
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
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
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:
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:
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 |
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.
Permalinks
- Permalink to this version
- 3ab3afc2010546cb9383d0d552ae669c
- Permalink to latest version
- 71G4TMCHVW
Geographic coverage
For references, please go to https://www.eea.europa.eu/code/design-elements/design-layout-documentation or scan the QR code.
PDF generated on 20 May 2022, 03:40 PM
Document Actions
Share with others