Bits
Present software you can contribute to, download, install and use the opensource way.

Bits refers to software you can contribute to, download, install and use the opensource way.

Bits can be either upstream or downstream:

  1. Upstream bits are produced by commercial opensource companies. Introducing changes in this kind of bits, though possible, is really hard and painful experience when you are outside the commercial opensource company producing such bit. Mainly because it is the commercial opensource company’s responsibility to meet all commercial and business restrictions that make the bits successful.

  2. Downstream bits are produced entirely by people participating in opensource communities. Downstream bits use to be developed on top of upstream bits following the opensource community established mission and rules.

Presentation template

Bits presentation template is defined in the _includes/base/bits.html file.

Bits presentation template offers bits through two-levels of nested cards. The first card level describes the “upstream bit” and the second card level describes one or more related “downstream bits”. The relationship between upstream bit and downstream bits is always one to many, never the other way aroud.

Bits presentation template can be customized using configuration files and configuration variables.

Upstream card layout

Upstream card layout is illustrated in Upstream card layout.

Downstream card layout

Upstream card layout has the following characteristics:

  • Card title and card content are always visible.

  • Card content presents an screenshot, logo, title, description, prominent action buttons, accordion of downstream items.

  • Card screenshot is always centered in the space available. When the card screenshot is larger than space available, it looks cropped to keep its ratio. This is relevant when you are designing the related image. For example, you may want to set the most relevant visual information in the image’s center, so it can be visible in both small and large media.

  • Card screenshot is responsive. On large media (>=960px), it changes its height, to cover the vertical space consumed on the right column by logo/icon, title, description and prominent action buttons column. Similarly, on small media, card screenshot changes its width to cover the horizontal space available while the height is fixed to 150px.

    On large media On small media
    Horizontal Vertical

Downstream card layout

Downstream card layout is illustrated in figure Downstream card layout.

Downstream card layout

Downstream card layout has the following characteristics:

  • Card title is always visible but card content is not. It is collapsed by default and you need to click one the card title to expand its content. Only one card title can be expanded at a time. If you have one card title open and do click on a different card title, the first one will be collapsed while the second one expands.

  • Card content presents screenshot, description and prominent action buttons. Note that card title is always visible and it is not duplicated inside content.

  • Card screenshot is always centered in the space available. When the card screenshot is larger than space available, it looks cropped to keep its ratio. This is relevant when you are designing the related image. For example, you may want to set the most relevant visual information in the image’s center, so it can be visible in both small and large media.

  • Card screenshot is responsive. On large media (>=960px), it changes its height, to cover the vertical space consumed on the right column by logo/icon, title, description and prominent action buttons column. Similarly, on small media, card screenshot changes its width to cover the horizontal space available while the height is fixed to 150px.

Example

The following example configures three upstream cards and two different downstream cards association. It shows some of the combinations you can use to present bits.

Configuration (default data distributed in _data/base/bits.yml file):

---
 - name: Upstream card example 1
   class: mb-3 p-3 align-items-start rounded-bottom
   type: upstream
   preamble: "Bits produced upstream:"
   image: centos-symbol.svg
   image_style: "height: 92px"
   description: |
     Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet
     convallis at efficitur in eros. Sagittis morbi scelerisque faucibus
     conubia consectetur.
   screenshot: base/screenshot-example-1600x1200.webp
   finale: "Bits produces downstream:"
   actions:
     - name: Action 1
       icon: fa-solid fa-circle-info
       icon_position: start
       url: "#"
     - name: Action 2
       icon: fa-solid fa-circle-info
       icon_position: end
       url: "#"
     - name: Action 3
       icon: fa-solid fa-circle-info
       url: "#"
     - name: Action 4
       url: "#"
   relationship:
     - Downstream example 1-1
     - Downstream example 1-2
 - name: Downstream example 1-1
   type: downstream
   description: |
     Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet
     convallis at efficitur in eros. Sagittis morbi scelerisque faucibus
   screenshot: base/screenshot-example-1600x1200.webp
   image: centos-symbol.svg
   actions:
     - name: Action 1
       icon: fa-solid fa-circle-info
       icon_position: start
       url: "#"
     - name: Action 2
       icon: fa-solid fa-circle-info
       icon_position: end
       url: "#"
     - name: Action 3
       icon: fa-solid fa-circle-info
       url: "#"
     - name: Action 4
       url: "#"
   relationship:
     - Upstream card example 1
 - name: Downstream example 1-2
   icon: fa-solid fa-circle-info
   type: downstream
   description: |
     Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet
     convallis at efficitur in eros. Sagittis morbi scelerisque faucibus
   relationship:
     - Upstream card example 1
 - name: Downstream example 1-3
   type: downstream
   description: |
     Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet
     convallis at efficitur in eros. Sagittis morbi scelerisque faucibus
   relationship:
     - Upstream card example 1
 - name: Upstream card example 2
   type: upstream
   color: secondary
   icon: fa-solid fa-swatchbook
   description: |
     Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet
     convallis at efficitur in eros. Sagittis morbi scelerisque faucibus
     conubia consectetur.
   screenshot: base/screenshot-example-1600x1200.webp
   actions:
     - name: Action 1
       icon: fa-solid fa-circle-info
       icon_position: start
       url: "#"
     - name: Action 2
       icon: fa-solid fa-circle-info
       icon_position: end
       url: "#"
     - name: Action 3
       icon: fa-solid fa-circle-info
       url: "#"
     - name: Action 4
       url: "#"
   relationship:
     - Downstream example 2-1
     - Downstream example 2-2
 - name: Downstream example 2-1
   type: downstream
   icon: fa-solid fa-swatchbook
   description: |
     Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet
     convallis at efficitur in eros. Sagittis morbi scelerisque faucibus
     conubia consectetur.
   screenshot: base/screenshot-example-1600x1200.webp
   actions:
     - name: Action 1
       icon: fa-solid fa-circle-info
       icon_position: start
       url: "#"
     - name: Action 2
       icon: fa-solid fa-circle-info
       icon_position: end
       url: "#"
     - name: Action 3
       icon: fa-solid fa-circle-info
       url: "#"
     - name: Action 4
       url: "#"
   relationship:
     - Upstream card example 2
 - name: Downstream example 2-2
   type: downstream
   icon: fa-solid fa-swatchbook
   description: |
     Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet
     convallis at efficitur in eros. Sagittis morbi scelerisque faucibus
     conubia consectetur.
   actions:
     - name: Action 1
       icon: fa-solid fa-circle-info
       icon_position: start
       url: "#"
     - name: Action 2
       icon: fa-solid fa-circle-info
       icon_position: end
       url: "#"
     - name: Action 3
       icon: fa-solid fa-circle-info
       url: "#"
     - name: Action 4
       url: "#"
   relationship:
     - Upstream card example 2
 - name: Upstream card example 3
   class: mb-3 px-3 pt-3 pb-0 bg-gradient-primary border border-1 border-primary border-opacity-25 rounded align-items-start
   type: upstream
   description: |
     Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet
     convallis at efficitur in eros. Sagittis morbi scelerisque faucibus
     conubia consectetur.
   actions:
     - name: Action 1
       icon: fa-solid fa-circle-info
       icon_position: start
       url: "#"
     - name: Action 2
       icon: fa-solid fa-circle-info
       icon_position: end
       url: "#"
     - name: Action 3
       icon: fa-solid fa-circle-info
       url: "#"
     - name: Action 4
       url: "#"
 - name: Upstream card example 4
   class: mb-3 px-3 pt-3 pb-0 bg-gradient-secondary border border-1 border-secondary border-opacity-25 rounded align-items-start
   type: upstream
   description: |
     Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet
     convallis at efficitur in eros. Sagittis morbi scelerisque faucibus
     conubia consectetur.
   actions:
     - name: Action 1
       icon: fa-solid fa-circle-info
       icon_position: start
       url: "#"
     - name: Action 2
       icon: fa-solid fa-circle-info
       icon_position: end
       url: "#"
     - name: Action 3
       icon: fa-solid fa-circle-info
       url: "#"
     - name: Action 4
       url: "#"

Output:

Bits produced upstream:
centos-symbol.svg
Upstream card example 1
Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet convallis at efficitur in eros. Sagittis morbi scelerisque faucibus conubia consectetur.
Action 1 Action 2 Action 3 Action 4
Bits produces downstream:
Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet convallis at efficitur in eros. Sagittis morbi scelerisque faucibus
Action 1 Action 2 Action 3 Action 4
Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet convallis at efficitur in eros. Sagittis morbi scelerisque faucibus
Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet convallis at efficitur in eros. Sagittis morbi scelerisque faucibus
Upstream card example 2
Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet convallis at efficitur in eros. Sagittis morbi scelerisque faucibus conubia consectetur.
Action 1 Action 2 Action 3 Action 4
Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet convallis at efficitur in eros. Sagittis morbi scelerisque faucibus conubia consectetur.
Action 1 Action 2 Action 3 Action 4
Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet convallis at efficitur in eros. Sagittis morbi scelerisque faucibus conubia consectetur.
Action 1 Action 2 Action 3 Action 4
Upstream card example 3
Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet convallis at efficitur in eros. Sagittis morbi scelerisque faucibus conubia consectetur.
Action 1 Action 2 Action 3 Action 4
Upstream card example 4
Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet convallis at efficitur in eros. Sagittis morbi scelerisque faucibus conubia consectetur.
Action 1 Action 2 Action 3 Action 4

Configuration files

Bits presentation template reads configuration variables from different configuration files. The first configuration file found wins. This section describes these files and their reading order.

  1. Site’s configuration file:

    <jekyll-site>/_config.yml

    The site’s configuration file allows you to set the with_bits_data configuration variable on all site pages.

    # site.defaults - Set global default values.
defaults:
  - scope:
      path: "" # an empty string here means all files in the project.
    values:
      with_bits_data:
         - name: Upstream card example 1
           type: upstream
           description: |
             Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet
             convallis at efficitur in eros. Sagittis morbi scelerisque faucibus
             conubia consectetur.

    By default, the with_bits_data page configuration variable is not set in _config.yml file and the bits presentation template reads the site component’s data file instead.

  2. Site component’s data file:

    <jekyll-site>/_data/{{ site.component_data_dirname }}/bits.yml

    The site component’s data file is an auxiliar construction the site administrator can use to organize site data files. For example, to make custom data files available for content writers to test. By default the site.component_data_dirname variable is not set, and the site administrator needs to set it in the _config.yml file.

    When the site component’s data file doesn’t exist, or it is an empty file, the bits presentation template reads the site’s data file instead.

  3. Site’s data file:

    <jekyll-site>/_data/bits.yml

    When the site data file doesn’t exist, or it is an empty file, the bits presentation template reads the theme component data file instead.

  4. Theme component’s data file.

    <jekyll-theme-centos>/_data/base/bits.yml

    The theme component’s data file is available read-only at run time, when you build your site with jekyll-theme-centos container image. This file provides default values. Example:

    {"name"=>"Upstream card example 1", "class"=>"mb-3 p-3 align-items-start rounded-bottom", "type"=>"upstream", "preamble"=>"Bits produced upstream:", "image"=>"centos-symbol.svg", "image_style"=>"height: 92px", "description"=>"Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet\nconvallis at efficitur in eros. Sagittis morbi scelerisque faucibus\nconubia consectetur.\n", "screenshot"=>"base/screenshot-example-1600x1200.webp", "finale"=>"Bits produces downstream:", "actions"=>[{"name"=>"Action 1", "icon"=>"fa-solid fa-circle-info", "icon_position"=>"start", "url"=>"#"}, {"name"=>"Action 2", "icon"=>"fa-solid fa-circle-info", "icon_position"=>"end", "url"=>"#"}, {"name"=>"Action 3", "icon"=>"fa-solid fa-circle-info", "url"=>"#"}, {"name"=>"Action 4", "url"=>"#"}], "relationship"=>["Downstream example 1-1", "Downstream example 1-2"]}{"name"=>"Downstream example 1-1", "type"=>"downstream", "description"=>"Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet\nconvallis at efficitur in eros. Sagittis morbi scelerisque faucibus\n", "screenshot"=>"base/screenshot-example-1600x1200.webp", "image"=>"centos-symbol.svg", "actions"=>[{"name"=>"Action 1", "icon"=>"fa-solid fa-circle-info", "icon_position"=>"start", "url"=>"#"}, {"name"=>"Action 2", "icon"=>"fa-solid fa-circle-info", "icon_position"=>"end", "url"=>"#"}, {"name"=>"Action 3", "icon"=>"fa-solid fa-circle-info", "url"=>"#"}, {"name"=>"Action 4", "url"=>"#"}], "relationship"=>["Upstream card example 1"]}{"name"=>"Downstream example 1-2", "icon"=>"fa-solid fa-circle-info", "type"=>"downstream", "description"=>"Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet\nconvallis at efficitur in eros. Sagittis morbi scelerisque faucibus\n", "relationship"=>["Upstream card example 1"]}{"name"=>"Downstream example 1-3", "type"=>"downstream", "description"=>"Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet\nconvallis at efficitur in eros. Sagittis morbi scelerisque faucibus\n", "relationship"=>["Upstream card example 1"]}{"name"=>"Upstream card example 2", "type"=>"upstream", "color"=>"secondary", "icon"=>"fa-solid fa-swatchbook", "description"=>"Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet\nconvallis at efficitur in eros. Sagittis morbi scelerisque faucibus\nconubia consectetur.\n", "screenshot"=>"base/screenshot-example-1600x1200.webp", "actions"=>[{"name"=>"Action 1", "icon"=>"fa-solid fa-circle-info", "icon_position"=>"start", "url"=>"#"}, {"name"=>"Action 2", "icon"=>"fa-solid fa-circle-info", "icon_position"=>"end", "url"=>"#"}, {"name"=>"Action 3", "icon"=>"fa-solid fa-circle-info", "url"=>"#"}, {"name"=>"Action 4", "url"=>"#"}], "relationship"=>["Downstream example 2-1", "Downstream example 2-2"]}{"name"=>"Downstream example 2-1", "type"=>"downstream", "icon"=>"fa-solid fa-swatchbook", "description"=>"Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet\nconvallis at efficitur in eros. Sagittis morbi scelerisque faucibus\nconubia consectetur.\n", "screenshot"=>"base/screenshot-example-1600x1200.webp", "actions"=>[{"name"=>"Action 1", "icon"=>"fa-solid fa-circle-info", "icon_position"=>"start", "url"=>"#"}, {"name"=>"Action 2", "icon"=>"fa-solid fa-circle-info", "icon_position"=>"end", "url"=>"#"}, {"name"=>"Action 3", "icon"=>"fa-solid fa-circle-info", "url"=>"#"}, {"name"=>"Action 4", "url"=>"#"}], "relationship"=>["Upstream card example 2"]}{"name"=>"Downstream example 2-2", "type"=>"downstream", "icon"=>"fa-solid fa-swatchbook", "description"=>"Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet\nconvallis at efficitur in eros. Sagittis morbi scelerisque faucibus\nconubia consectetur.\n", "actions"=>[{"name"=>"Action 1", "icon"=>"fa-solid fa-circle-info", "icon_position"=>"start", "url"=>"#"}, {"name"=>"Action 2", "icon"=>"fa-solid fa-circle-info", "icon_position"=>"end", "url"=>"#"}, {"name"=>"Action 3", "icon"=>"fa-solid fa-circle-info", "url"=>"#"}, {"name"=>"Action 4", "url"=>"#"}], "relationship"=>["Upstream card example 2"]}{"name"=>"Upstream card example 3", "class"=>"mb-3 px-3 pt-3 pb-0 bg-gradient-primary align-items-start rounded", "type"=>"upstream", "description"=>"Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet\nconvallis at efficitur in eros. Sagittis morbi scelerisque faucibus\nconubia consectetur.\n", "actions"=>[{"name"=>"Action 1", "icon"=>"fa-solid fa-circle-info", "icon_position"=>"start", "url"=>"#"}, {"name"=>"Action 2", "icon"=>"fa-solid fa-circle-info", "icon_position"=>"end", "url"=>"#"}, {"name"=>"Action 3", "icon"=>"fa-solid fa-circle-info", "url"=>"#"}, {"name"=>"Action 4", "url"=>"#"}]}{"name"=>"Upstream card example 4", "class"=>"mb-3 px-3 pt-3 pb-0 bg-gradient-secondary align-items-start rounded", "type"=>"upstream", "description"=>"Lorem ipsum odor amet, consectetuer adipiscing elit. Varius imperdiet\nconvallis at efficitur in eros. Sagittis morbi scelerisque faucibus\nconubia consectetur.\n", "actions"=>[{"name"=>"Action 1", "icon"=>"fa-solid fa-circle-info", "icon_position"=>"start", "url"=>"#"}, {"name"=>"Action 2", "icon"=>"fa-solid fa-circle-info", "icon_position"=>"end", "url"=>"#"}, {"name"=>"Action 3", "icon"=>"fa-solid fa-circle-info", "url"=>"#"}, {"name"=>"Action 4", "url"=>"#"}]}

Configuration variables

Bits configuration variables let you to control the bits presentation template visibility in the page layout, the content it presents and how it presents it. The presentation order of elements inside the bits presentation template cannot be changed without changing the bits presentation template file.

Bits configuration variables are described in the following table:

Name Description
with_bits When set to true, render the bits presentation template. By default, it is set to false and bits presentation template is not rendered.
with_bits_data Custom data structure for bits presentation template. When it is defined, it overrides all values set in component configuration file.

The following table describes the data structure used by both with_bits_data page variable and configuration files:

Name Description
name The bits name (e.g., CentOS Stream, CentOS Hyperscale, CentOS AutoSD, etc.). This value is transformed into HTML element ids, so it must only contain alphanumerical, dash and underscore characters.
name_class The customization bootstrap classes of name property.
icon The bits icon. Possible values to use here are limited to fontawesome freely distributed icons.
icon_class The customization bootstrap classes of icon property.
image The bits branding image file, relative to /assets/img/. For example, if your project logo is stored at assets/img/logo.svg, the value you need to set is logo.svg.
image_class The customization bootstrap classes of image property.
image_style The customization css styles of image property. For example, if you want to control the image height in pixels. By default this property is not set.
screenshot The path to bits screenshot image file. The file path is relative to /assets/img/.
screenshot_class The customization bootstrap classes of screenshot property.
screenshot_style The customization css styles of screenshot property.
screenshot_alt The alternative text of screenshot property.
description The bits description. For example, one or two sentences describing what the bits you are presenting is about.
description_class The customization bootstrap classes of description property.
type The type of bits you are describing. This option controls content layout inside the bits presentation template. Possible values are upstream and downstream. When the value is upstream, content is presented in the upstream section. When the value is downstream, content is presented in the downstream section of an upstream bit. This requires you to set the related upstream bits name using the relationship property.
relationship The list of names telling how bits relate one another. When you read this property along with type property, you can answer questions like: What downstream bits does this upstream bits has? or; What is the upstream bits for this downstream bits? The direct relationship between bits of the same type is not supported.
actions The list of prominent action buttons you want to present in the card content.
actions[].name The action button name. Normally, a verb or, a call for action phrase.
actions[].url The action button url.
actions[].icon The action button icon. Possible values to use here are limited to fontawesome freely distributed icons.
actions[].icon_position The icon position inside the action button. Possible values are start (default) or end.
actions_class The customization bootstrap classes of actions property.
preamble The preamble message for upstream section. This property is valid only when type is upstream. By default, it is set to Bits produced upstream:.
preamble_class The customization bootstrap classes of preamble property. By default, it is set to mb-3.
finale The finale message for upstream section. This property is valid only when type is upstream. By default, it is set to Bits produced downstream:.
finale_class The customization bootstrap classes of finale property. By default, it is set to mb-3.
class The customization bootstrap classes of upstream bits container. Here you can control padding, background and alignment of elements in the upstream card layout. By default, it is set to mb-3 p-3 align-items-start rounded. Use in combination with color property.
color The bits presentation color. Possible values are any bootstrap color class. For example, primary (default), secondary, warning, success, danger, info, light, dark.
accordion_class The customization bootstrap classes of downstream accordion presentation. By default, it is set to w-100.
accordion_body_class The customization bootstrap classes of downstream accordion body presentation. Useful when you want to present downstream card description without any extra bottom space due to description paragraph’s bottom padding itself. In this case, you can set accordion_body_class to pb-0 to get an even result. By default, it is not set.

Enabling bits at page level

To show bits in a single page using values from configuration files, set the with_bits property in the page front-matter section using the structure described in the configuration variables section.

---
title: This is a page with bits presentation from configuration files

with_bits: true
---

Page content here.

To show bits in a single page-specific values, set both with_bits and with_bits_data properties in the page front-matter section.

---
title: This is a page with bits presentation from page front-matter

with_bits: true
with_bits_data:
  - name: One
    type: upstream
    relationship:
      - Two
      - Three
  - name: Two
    type: downstream
    relationship:
      - One
  - name: Three
    type: downstream
    relationship:
      - One
---

Page content here.

Disabling bits at page level

To hide bits from a single page, set the with_bits property to false in the page preamble.

---
title: This is a page without bits presentation

with_bits: false
---

Page content here.

Enabling bits at site level

To show bits in all site pages using values from configuration files, set the with_bits property in the site configuration file using the structure described in the configuration variables section.

---
defaults:
- scope:
    path: "" # an empty string here means all files in the project.
  values:
    with_bits: true

Disabling bits at site level

To hide bits at site level, set the with_bits configuration variable to false in the site configuration file.

---
defaults:
- scope:
    path: "" # an empty string here means all files in the project.
  values:
    with_bits: false

Including bits at content level

To include bits in a page using values from a single page, do the following:

  1. Add the with_bits_data variable in the page front-matter section with the values you want to present. The example below creates two upstream cards (e.g., One and Four) with different downstream cards each.

    ---
with_bits_data:
  - name: One
    type: upstream
    relationship:
      - Two
      - Three
  - name: Two
    type: downstream
    relationship:
      - One
  - name: Three
    type: downstream
    relationship:
      - One
  - name: Four
    type: upstream
    relationship:
      - Five
      - Six
      - Seven
  - name: Five
    type: downstream
    relationship:
      - Four
  - name: Six
    type: downstream
    relationship:
      - Four
  - name: Seven
    type: downstream
    relationship:
      - Four
---

    When you include bits at page level, ensure with_bits is set to false. Otherwise, you would end up having two copies of bits, the one shown by page layout and the one shown by include.

  2. Include the base/bits.html presentation template passing the page.with_bits_data values to bits argument:

    {% include base/bits.html %}

Announcement

Background gradient

Breadcrumb

Breakingnews

Category index

Code highlight

Color

Contextual feedback

Copyright note

Heading

Language selector

Navigation bar

Page layout

Project

Shortcuts

Social network

Text gradient

Text link

Typography