Badges
Source: less/components/badge.lessMerriam-Webster defines a badge as an emblem awarded for a particular accomplishment. Since we consider moderating and publishing data on this website an amazing feat, we decided to award badges for all the people involved. Additionally, it also allows regular-non-awarded people to quickly identify public servants and administrators.
Available colors : grey-400
(default), orange-100
, grey-300
Borders
Source: less/components/borders.lessYou spin me right round, baby right round ! Round all the things with this collection of border-radii
Solid borders don't really exist in real life, CSS people were fools once again. Those utilities make for nice borders.
.border
simply adds a 1px solid border with grey-50 as the default color.
Notation
The classes are named using the format border-{sides}
Where sides is one of:
top
- for classes that setborder-top
bottom
- for classes that setborder-bottom
left
- for classes that setborder-left
right
- for classes that setborder-right
- 0 - for classes that resets border
For responsive, currently only the border-{breakpoint}-0
is supported with the usual breakpoints.
Feel free to change this if it is ever needed.
Colors modifiers are available, limited supply :
.border-orange-100
Even though it sounds delicious, it's actually something rather boring: a left round border before the element you wish to ornate. It's similar to blockquotes' typical styling and is originally a play on the fact that users used to abuse the blockquote element to create headings in their content. It has since made it officially in the design and is used not only for blockquote but for any kind of content.
Technically this class adds a ::before
pseudo-element that will be colored with blue-350 by default.
You can change this behaviour by using the filet-currentcolor
class that will set the color to the currentColor
.
Dataset
Source: less/components/dataset.lessDatasets cards are used to display... data sets. Pretty simple layout that could be achieved using the standard grid, but using a customized component allow for less verbose and less redundant HTML.
There's also a .compact
version for smaller areas (like the search popover) without separators and overall smaller elements.
For displaying dataset search results, a .dataset-search-result
version is available. It's essentially the same informations in a different order, with a part that appears only on hover.
Disclaimer : the search-result component is weird in styling and uses a lot of fixed pixel values. Please beware if you make any changes in it, you might break responsive.
Description list
Source: less/components/description-list.lessDescription lists enclose a list of groups of terms (defined with the <dt>
element) and their description (<dd>
elements).
This is used to display lists of key-values pairs.
Dropdown
Source: less/components/dropdown.lessDropdowns are used throughout the website, as selectors, or as togglers.
Their construction is based on a standard secondary button, but with some specifics (arrow inserted after the text, supports an .active
class...)
You an use a <select>
element that will be reset to display correctly on all browsers, or any arbitrary HTML element with the .label
and .select
classes.
A: without label (options are the label)
B: without options (only specified label is shown)
For interactivity, please check the corresponding section of this styleguide.
Embed
Source: less/components/embed.lessEmbed allows you to display some GitHub-style embedding code capabilities.
This component is a single input and its accompanying copy-to-clipboard button.
See macros/integrate.html
for common usage. The icon is svg/copy.svg
.
Follow
Source: less/components/follow-button.lessA simple button to follow various entities on the website. On mobile, it's shown as an icon only.
Its aria-label
changes based on the favorite status and includes the action add to favorites
or remove from favorites
.
See Vue file for more informations about props and usage.
Forms
Source: less/components/forms.lessSimple forms for simple needs.
We're assuming some well formed fieldsets
with proper legends
, this is mostyly used in the login/signup flows.
A well formed form (eh) should include one main fieldset with a proper legend.
Icons
Source: less/icons.lessSize does matter, after all.
Quick utility for SVG icons sizing. Icons can come up in multiple sizes : sm
, lg
... Pick your weapon !
Logo
Source: less/components/logo.lessLogo is a Danish toy production company best known for the manufacture of toys consisting mostly of interlocking plastic bricks.
Sometimes your logo is mostly white and can cause disruption in the design. Because we can't blame anything or anyone for being too white, we came up with a solution : we build a wall around it.
.logo
is a very simple utility that adds padding, white background and grey border around logos for consistent display.
Markdown
Source: less/components/markdown.lessPagination
Source: less/components/pagination.lessSometimes, when you're in luck, your content can be too long for a single screen. Instead of having an infinity scroll or other attention-grabbing mechanisms, you can opt for a nice paginator component that will gently display pages and buttons to change pages in various ways.
We're now using DSFR pagination component ! 🥳
There's a VueJS component that you can use directly in js/components/pagination
.
There's also a Jinja2 component that will allow you to paginate everything and more.
It's located in templates/macros/paginator.html
and can be used easily.
Summary
Source: less/components/summary.lessTabs
Source: less/components/tabs.lessTabs allow for easy navigation between categories. You can toggle a .active
class to make them appear selected.
Warning : .tab
first immediate child (.tab > *
) has a pointer-events: none
property set so that clicks actually register to the tab element and not the children.
This prevents messy event handling with bubbling prevention, but might cause you trouble in some edge cases.
By default, tabs have no style, just like many of us.
You can either use .btn-tab
(check out the buttons documentation page for more informations), or any element you'd like.
There's also a .tab-panel
class available that simply provides border-radius, paddings and lower opacity for non-active elements. We recommand you combine this one with .bg-{color}
classes.
You can use tabs from DSFR. It uses DSFR colors and conventions. It allows you to choose an optional icon in every tabs.
Well
Source: less/components/well.lessA well is an excavation or structure created in the ground by digging, driving, or drilling to access liquid resources, usually water. In this case, it's nothing like that. Wells used to be an "inset" effect on previous versions of Bootstrap. Now it's just a box with a background and rounded corners.
They exist in many colors and two versions, primary with a solid background and secondary with a transparent background :
Callouts
Source: less/content/callouts.lessCallouts are areas that are meant to pop "out" of the page, usually with a coloured background.
Colors
Source: less/content/colors.lessConvey meaning through color with a handful of color utility classes. Colors are coded with the following scheme :
{color}-{weight}
where weight is a number in increments of 100 (100, 200, 300...), the bigger the number the darker the color.
Includes support for styling links with hover states, too.
Similar to the contextual text color classes, easily set the background of an element to any contextual class.
Hero Image
Source: less/content/hero-image.lessA small utility for hero images used to present user-uploaded images. Used on posts and on the home page for example.
It simply sets some minimum height and some background positionning stuff. You have to inject the image as a backgroundImage CSS property, which can be done with Jinja
Links
Source: less/content/links.lessSimple anchors can be used with a simple <a>
tag.
If you need to use a link with no styling (no color or text-decoration), you can use the specially crafted class .unstyled
.
This behaviour might be inversed at some point (normal <a>
having no style by default and a special "styled" class available for colored links) if the current way proves to be too cumbersome.
Some links are intented to be used as a secondary navigation within the website, you can use them with .nav-link
. Their sizes can be tweaked.
Sometimes you really want more than one link, that's what .nav-list
are for.
You can use links from DSFR. It uses DSFR colors and conventions. It allows you to choose an optional icon to show :
- on the left
- on the right
- an icon alone (bad practice)
Typography
Source: less/content/typography.lessWe use the Aileron font from Sora Sagano in Light, Regular and Semibold
All HTML headings, <h1>
through <h5>
, are available.
.h1
through .h5
classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element :
For most headings we can have an exponent representing the amount of things found in the current section, you can use a <sup>
tag to reprensent those
You can also apply the .sup
class to any arbitrary element (preferably a <sup>
to respect semantics) to add an exponent as well.
To adjust the font size of an element you can use the .fs-{font-size}
classes.
To adjust the font weight, you can use the .f-{light, normal, bold}
classes.
Styling for common inline HTML5 elements.
You can specify alignment for text blocks, with responsive capabilities, using .text-align-{left|center|right}
and .text-align-{left|center|right}-{breakpoint}
.
Visibility
Source: less/content/visibility.lessSometimes you need to hide some elements, mostly while doing some responsive rules. You can use .hidden-{breakpoint}
and .visible-{breakpoint}
to do so.
Sometimes you need to show some elements only to assistive technologies (like screen readers). You can use .visually-hidden
to do so.
It was previously called .sr-only
in CSS frameworks so the name is still often used.
Because .visually-hidden
is in position: absolute
, it'll be placed based on the same rules as other position: absolute
.
This can cause some strange behavior with flex no-wrap.
Accordion
Source: js/components/vanilla/accordion.jsBecause accordion are not only seen in the subway, you can use this tidbit to create collapsible ARIA-compatible accordions.
The button needs to have :
.accordion-button
classaria-controls
andhref
set to a valid#id
on the pagearia-label
to explain what the button does if there's not enough text in the button itself (like an icon)aria-expanded
set to eithertrue
(if the accordion is visible by default) orfalse
- An optionnal
.trigger-once
class that will make the button disappear once the content it controls is expanded
The accordion panel needs to have :
.accordion-content
class.active
class if the accordion is visible by defaultaria-labelledby
set to the button's#id
- A valid
#id
corresponding to the button'shref
Clipboard
Source: js/components/vanilla/clipboard.jsCopy to clipboard thanks to clipboardjs.com
Just have an element with an id
ending with -copy
and use clipboardJS API for endless possibilities !
Modals
Source: js/plugins/modals.jsBecause sometimes the whole page isn't enough to show all the data you want to show to the world.
You can define modal templates in the form of VueJS templates and call them anywhere within the site.
- Defining a modal
Modals are defined in the
theme/js/components/**
folder. You'll find an example below. Note that you can define variables in theprops
part of the Vue template definition and pass them to the modal later on.
- Modal registration
Once you defined your modal, you need to import it inside the js package in the
theme/js/components/vue/modals.js
component. Themodals
object lists all the available modal. The key you'll give in this object will be the modal's name, required when you'll want to open it.
To open a modal, simply call the global showModal
method with your modal name as seen above.
The first argument is the modal name, the second one is an object containing the params passed to the modal.
The third argument to the showModal
method is an override for the scrollable
property. Defaults to false, but when set to true, the modal is scrollable.
You should also add a <modals-container></modals-container>
element that will host the modal DOM inside the same VueJS app.
Tabs JS
Source: js/components/vanilla/tabs.jsInspired by Bootstrap, tabs leverage the power of JavaScript® to enable quick tabs & tab-content interactivity.
The is a two parts systems : tabs, with individual pill-shaped (or any element you'd like) buttons, and tab-content, that the buttons will show.
Only one tab-content can be shown at a time, and toggling a new tab-content will make the previous active tab no longer visible.
You only need to specify an id
in the href
attribute of the button, then add this id
to the tab-content.
Tip : don't forget to add an "active" class to the default-active button and tab content.
Tip : if the href is invalid (no div with specified id
), the tabs will kinda crash. Don't do that.
Grid
Source: less/layout/grid.lessIt's a grid. You know how grids work. Even if you don't, you'll understand in no time.
12 columns of almost endless possibilities at your fingertips.
It's very easy !
Containers
.container
class is a 1100px-wide centered container.
Rows
.row
is used to denote a new row. Pretty easy.
Inline-row
.row-inline
can be used to create an inline "row" without margin. It simply sets a display: flex
and flex-wrap: wrap
.
It's also available for each responsive breakpoint with .row-inline-{breakpoint}
classes.
Utilities
.w-100
can be used to apply a 100% width to an element. w-auto
does the same for the auto
value.
.mw-100
applies max-width: 100%
to any element.
.no-wrap
applies flex-wrap: nowrap
.
.overflow-hidden
and .overflow-visible
can be used to trigger the corresponding overflow classes for special edge cases where you need a container that can or cannot overflow.
Auto layout
By default, .col
classes allow for an easy auto-layout : they all take an equal space within the row.
They're also available for each responsive breakpoint with .col-{breakpoint}
classes.
Specified width
You can also specify a block width by using .col-{n}
classes, with n ∈ [1...12]. You can also mix & match by specifing only one or two colomn widths and letting the others in auto mode :
Responsive classes
The grid provides 4 breakpoints : sm
, md
, lg
and xl
. You can use the corresponding .col-{sm|md|lg|xl}-{n}
(with n ∈ [1...12]) to easily make responsive layouts.
For example, if you want a layout with 3 blocks of 4 columns on desktop and stack them on medium widths :
Offsets
You can offset a block to the right by using .offset-{sm|md|lg|xl}-{n}
(with n ∈ [0...12]) depending on the screen resolution you're targeting.
Please note that special cancelling classes .offset-{ø|sm|md|lg|xl}-0
exist, allowing you to reset offset on specific resolutions. This allows for offsetting a block on desktop and not on mobile for example.
Vertical alignement
By default, blocks on the same row will take up an equal height. You can opt for a different behaviour by using the .align-items-start
, .align-items-center
and .align-items-end
classes on the .row
div.
When you need to alter the alignment of one item you can use .self-stretch
, .self-start
, .self-end
, and .self-center
,
Horizontal alignement
Sometimes you also need to specify an horizontal alignment for some items in a row, you can use .justify-start
, .justify-end
, .justify-center
, .justify-between
, .justify-around
, and .justify-evenly
Fluid grids
Sometimes you need to occupy the available space fully, you can use .container-fluid
to still have a grid available to you when needed.
Hagrid usually refers to a half-giant character in the Harry Potter universe. Because of his large size, small children are very scared of him, as they should be. He's also very careless in his attitude and tends to expose children of the school to various dangers.
Our version of .hagrid
follows the same principles : it's huge (1320px) and dangerous.
This is an extra-width version of the 12 columns-grid, but made such that 10 columns of the Hagrid correspond to 12 columns of the normal grid. This allows you to have a full 12-column width content that extend past the normal grid while maintening aligment with the normal grid when needed.
Two main use-cases : to make content bigger than the rest (in which case you'll use the 12 columns within one div), or to place content to the side of the existing grid, in which case you'll have one column on each side and the main content will span 10 columns, aligning perfectly with the standard grid.
Rhythm
Source: less/layout/rhythm.lessUse a standardised spacing value for most of the general layout to ensure consistency across pages.
Prefer setting your vertical rhythm using margin-bottom
to avoid entering the collapsing margins hell.
The classes are named using the format {property}{sides}-{size}
or {property}{sides}-{breakpoint}-{size}
.
Where property is one of:
m
- for classes that setmargin
p
- for classes that setpadding
Where sides is one of:
t
- for classes that setmargin-top
orpadding-top
b
- for classes that setmargin-bottom
orpadding-bottom
l
- for classes that setmargin-left
orpadding-left
r
- for classes that setmargin-right
orpadding-right
x
- for classes that set both*-left
and*-right
y
- for classes that set both*-top
and*-bottom
- blank - for classes that set a
margin
orpadding
on all 4 sides of the element
Where size is one of:
0
- for classes that eliminate themargin
orpadding
by setting it to0
xxxs
- for classes that set themargin
orpadding
to0.125rem; // 2px
xxs
- for classes that set themargin
orpadding
to0.25rem; // 4px
xs
- for classes that set themargin
orpadding
to0.5rem; // 8px
sm
- for classes that set themargin
orpadding
to0.75rem; // 12px
md
- for classes that set themargin
orpadding
to1rem; // 16px
lg
- for classes that set themargin
orpadding
to1.5rem; // 24px
xl
- for classes that set themargin
orpadding
to2.25rem; // 36px
hg
- for classes that set themargin
orpadding
to3.5rem; // 56px
auto
- for classes that set themargin
to auto
Metadata
Source: less/specific/metadata.lessMetadata are pairs of key-values providing additional informations about a dataset, a reuse or literally everything else. To ease the reading experience, a default style is provided here.
Producer Summary
Source: less/specific/producer-summary.lessWe display some sample about a producer in a short summary. This is used in dataset page and later in reuse page.
The summary shows the organization name and description. There is also their datasets and reuses count with links to search pages.
For certified organisation, a badge is shown on the image.
The summary work the same way for a user.