Fedora UI - Fractal Components for Bootstrap

NOTE: this is just the preview of ongoing work and might contain incostistencies!

This page can be edited with markdown: docs/01-index.md This is still pretty new and undergoing some work. So things can change fast and you should not rely on it as an official reference. There is not alot of examples yet, check out Nav and Background images to get an idea on how the structure for components might be looking.

Masthead component needs some work because of the Sass mixin that does not seem to work.

Anyone within Fedora community is welcome to contribute the changes. The name of the project is temporary and the repository location will change and move somewhere else on Pagure.io Follow the discussion here: https://pagure.io/design/issue/618 and add your thoughts about it.

Fedora Fractal Components for Bootstrap

Fedora Bootstrap is a custom Bootstrap 4 build used for Fedora Community applications. Fractal Build https://fractal.build/ is a component framework for styleguide documentation.

The built CSS and Javascript files are hosted on apps.fedoraproject.org for inclusion in Fedora Infrastructure apps. To include the most recent version of Fedora Bootstrap in your Fedora app, use the following lines in your HTML output:

<link href="https://apps.fedoraproject.org/global/fedora-bootstrap-fonts/hack.css" type="text/css" rel="stylesheet" />
<link href="https://apps.fedoraproject.org/global/fedora-bootstrap-fonts/open-sans.css" type="text/css" rel="stylesheet" />
<link href="https://apps.fedoraproject.org/global/fedora-bootstrap-fonts/font-awesome.css" type="text/css" rel="stylesheet" />

If you don’t want to include from this location, you can download built versions of these files from the Fedora Bootstrap pagure.

Fedora Bootstrap does not bundle jQuery as part of fedora-bootstrap.js. You will have to include this seperately as part of the other JS imports in your application.

Fonts

Apps that use Fedora Bootstrap require you include 3 webfonts: Open Sans for general use, Hack for code and the like that need monospace, and FontAwesome for icons. The fonts are also available on apps.fedoraproject.org for inclusion in Fedora Infra apps, and can be included like this:

<link href="https://apps.fedoraproject.org/global/fedora-bootstrap-fonts/hack.css" type="text/css" rel="stylesheet" />
<link href="https://apps.fedoraproject.org/global/fedora-bootstrap-fonts/open-sans.css" type="text/css" rel="stylesheet" />
<link href="https://apps.fedoraproject.org/global/fedora-bootstrap-fonts/font-awesome.css" type="text/css" rel="stylesheet" />

If you don’t want to include from this location, you can download these files as they appear there from the Fedora Bootstrap Fonts pagure.

Basic Layout

All Fedora Bootstrap based apps follow a similar layout. This includes

  • A masthead component at the top of the page for the app logo, top-level app navigation, and user login / menu
  • an optional subheader for apps provide information about an item under the main app. For example, a project in pagure. The subheader also can include a tabbed navigation for the item, and actions
  • a dark coloured body colour that should only be seen for the footer. This is to ensure the footer colour extends to the bottom of the browser window
  • a bodycontent class that sets the colour of the main body of the document to white An example of this basic layout would be: