Badges

Source: less/index.css

Merriam-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/index.css

Round

You spin me right round, baby right round ! Round all the things with this collection of border-radii

Solid border

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 set border-top
  • bottom - for classes that set border-bottom
  • left - for classes that set border-left
  • right - for classes that set border-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

Filet

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.

Buttons

Source: less/index.css

Primary buttons

The .btn classes are designed to be used with the <button> element.

However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering). When using button classes on <a> elements that are used to trigger in-page functionality (like collapsing content), rather than linking to new pages or sections within the current page, these links should be given a role="button" to appropriately convey their purpose to assistive technologies such as screen readers.

Primary buttons exist for every color in this UI-kit. Please refer to the colors page to see available text and background colors.

Some of them are unusable due to the low contrast they offer.

Secondary buttons

As for primary buttons, secondary buttons exist in every color available.

Arrows

Secondary buttons can come with arrows after the content to denote links. Simply add the btn-with-arrow class to your secondary button and all the magic will be done for you.

Active state

Buttons will appear pressed (with a lighter background, darker border, and inset shadow) when active. There’s no need to add a class to <button>s as they use a pseudo-class. However, you can still force the same active appearance with .active (and include the aria-pressed="true" attribute) should you need to replicate the state programmatically.

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

<a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled. Disabled buttons should include the aria-disabled="true" attribute to indicate the state of the element to assistive technologies.

Venti buttons

Big blocky buttons for people who love Italia, overpriced coffees and nice home pages. In Italian, we say it's a "bottoni molto grandi".

Use the bg-{color} classes to style the background accordingly.

Action buttons

Action buttons combine an icon with an optional call to action to provide maximum usability. Because of technical limitations, this styleguide hardcodes the svg icon. When using it in the uData ecosystem, please use something like this : {% include('svg/myIcon.svg') %}.

Tab buttons

On some pages, you'll find secondary buttons looking like little "tabs" that can be toggled thanks to ECMAScript-compatible language such as JavaScript. Those tabs are actually smaller versions of .btn-secondary-200 with no text-decorations, and become .btn-secondary-400 when active. Because developpers are lazy and less code is better code, there's a .btn-tab class that will default to those values.

Dataset

Source: less/index.css

Datasets 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/index.css

Description 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.

Embed

Source: less/index.css

Embed

Embed allows you to display some GitHub-style embedding code capabilities. This component is a single input and its accompanying copy-to-clipboard button.

Forms

Source: less/index.css

Simple 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/index.css

Icons sizes

Size does matter, after all.

Quick utility for SVG icons sizing. Icons can come up in multiple sizes : sm, lg... Pick your weapon !

Markdown

Source: less/index.css

Content on the site can be styled with Markdown. Ready made styles are provided as below :

Tabs

Source: less/index.css

Tabs 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.

Styling

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.

Tags

Source: less/index.css

Tags allow for easy categorization of datasets. They also come in a bigger size with the .big class.

Well

Source: less/index.css

A 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/index.css

Callouts are areas that are meant to pop "out" of the page, usually with a coloured background.

Colors

Source: less/index.css

Text color

Convey 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.

Background color

Similar to the contextual text color classes, easily set the background of an element to any contextual class.

Hero Image

Source: less/index.css

A small utility for hero images used to present user-uploaded images. Used on posts and on the home page for example.

Usage

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

Typography

Source: less/index.css

Base Font

We use the Aileron font from Sora Sagano in Light, Regular and Semibold

Headings

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 :

Headings Exponents

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.

Font Sizes

To adjust the font size of an element you can use the .fs-{font-size} classes.

Font weights

To adjust the font weight, you can use the .f-{light, normal, bold} classes.

Inline Styles

Styling for common inline HTML5 elements.

Alignment

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/index.css

Hiding things

Sometimes you need to hide some elements, mostly while doing some responsive rules. You can use .hidden-{breakpoint} and .visible-{breakpoint} to do so.

`visibility.html

Always Visible

Visually hidden

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.

Grid

Source: less/index.css

Grid system

It'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

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/index.css

Spacing

Use 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.

Notation

The classes are named using the format {property}{sides}-{size} or {property}{sides}-{breakpoint}-{size}.

Where property is one of:

  • m - for classes that set margin
  • p - for classes that set padding

Where sides is one of:

  • t - for classes that set margin-top or padding-top
  • b - for classes that set margin-bottom or padding-bottom
  • l - for classes that set margin-left or padding-left
  • r - for classes that set margin-right or padding-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 or padding on all 4 sides of the element

Where size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • xxxs - for classes that set the margin or padding to 0.125rem; // 2px
  • xxs - for classes that set the margin or padding to 0.25rem; // 4px
  • xs - for classes that set the margin or padding to 0.5rem; // 8px
  • sm - for classes that set the margin or padding to 0.75rem; // 12px
  • md - for classes that set the margin or padding to 1rem; // 16px
  • lg - for classes that set the margin or padding to 1.5rem; // 24px
  • xl - for classes that set the margin or padding to 2.25rem; // 36px
  • hg - for classes that set the margin or padding to 3.5rem; // 56px
  • auto - for classes that set the margin to auto

udata_front Ui-Kit

No matches.