Skip to main content

# 2 base Base

Source: `00-config/_variables.scss`, line 9

## 2.1 base.root Root

The HTML root component contains the doctype, HTML element, HEAD element and BODY element. It also contains the CSS for those elements and the `*` universal selector.

Source: `01-base/root/_root.scss`, line 1

## 2.2 base.type Typography

Headings, paragraphs, blockquotes, lists, and more have some global resets.

Source: `01-base/text/_text.scss`, line 1

### 2.2.1 base.type.font Font

The standard font Open social uses is Montserrat. We have included the font files with our theme. We bundle our theme with 3 different font weights you can use: 300, 500 and 700

### Setting a custom font

Option 1

Use the social_font module to upload custom fonts and select you new font in the theme settings.

Option 2

Upload your font to the assets folder of your theme. Update the base component text/fonts and update the `$font-family-webfont` variable. Don't forget to compile the CSS again.

Source: `01-base/text/_fonts.scss`, line 1

### 2.2.2 base.type.headings Headings

Toggle example guides
Toggle HTML markup

Example

# A Heading Level 1 (h1) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

## Heading Level 2 (h2) with enough text to wrap to another line; Heading Level 2 (h2) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

### Heading Level 3 (h3) with enough text to wrap to another line; Heading Level 3 (h3) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

#### Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

##### Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

###### Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Markup

#

##

###

####

#####

######

    A Heading Level 1 (h1) with enough text to wrap to another line
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
    Heading Level 2 (h2) with enough text to wrap to another line; Heading Level 2 (h2) with enough text to wrap to another line
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
    Heading Level 3 (h3) with enough text to wrap to another line; Heading Level 3 (h3) with enough text to wrap to another line
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
    Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line; Heading Level 4 (h4) with enough text to wrap to another line
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
    Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line; Heading Level 5 (h5) with enough text to wrap to another line
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
    Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line; Heading Level 6 (h6) with enough text to wrap to another line
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.

Source: `01-base/headings/_headings.scss`, line 1

### 2.2.3 base.type.links Links

Toggle example guides
Toggle HTML markup

Hyperlinks are used to allow the user to navigate to other resources or to download a resource.

Example

This is a link to another web page

Markup

    This is a link to another web page

Source: `01-base/links/_links.scss`, line 1

### 2.2.4 base.type.text Text elements

Toggle example guides
Toggle HTML markup

The elements in this section give semantics to inline text.

Example

The default font-size and line-height properties are applied to the `<body>` element and all paragraphs. In addition, `<p>` (paragraphs) receive a bottom margin.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

The following snippets of text are rendered as bold text. Bold text nested inside italic text should still be bold.

The following snippets of text are rendered as italic text. Italic text nested inside bold text should still be italic

An abbreviation of the word attribute is attr. And HTML is an acroynm.

Mlle Gwendoline wrote the equation `f(x, n) = log4xn`.

Markup

    The default font-size and line-height properties are applied to the <body> element and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin.
    You can use the mark tag to highlight text.
    This line of text is meant to be treated as deleted text.
    This line of text is meant to be treated as no longer accurate.
    This line of text is meant to be treated as an addition to the document.
    This line of text will render as underlined
    This line of text is meant to be treated as fine print.
    The following snippets of text are rendered as bold
        text. Bold text nested inside italic text should still be
        bold.
    The following snippets of text are rendered as italic text.
      Italic text nested inside bold text should still be
        italic
    An abbreviation of the word attribute is attr.
      And HTML is an acroynm.
    Mlle Gwendoline wrote the equation f(x, n) = log4xn.

Source: `01-base/text/_text.scss`, line 9

### 2.2.5 base.type.address Addresses

Toggle example guides
Toggle HTML markup

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with `<br>`.

Example
Markup

Source: `01-base/text/_text.scss`, line 19

### 2.2.6 base.type.blockquotes Blockquotes

Toggle example guides
Toggle HTML markup

Wrap `<blockquote>` around any HTML as the quote. For straight quotes, we recommend a `<p>`.

Example

> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Markup

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Source: `01-base/text/_text.scss`, line 30

### 2.2.7 base.type.h-rule Horizontal rule

Toggle example guides
Toggle HTML markup

The `<hr>` element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book.

Example

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

Markup

    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
      penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id
      dolor id nibh ultricies vehicula.

    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.

Source: `01-base/text/_text.scss`, line 41

## 2.3 base.code Code

Toggle example guides
Toggle HTML markup

The `<code>` element represents a fragment of computer code.
The `<var>` element represents a variable.
The `<samp>` element represents (sample) output from a program or computing system.
The `<kbd>` element represents user input (typically keyboard input.)

Example

The `code` element represents a fragment of computer code.

There are y = m x + b flavors of ice cream to be available for purchase!

`This text is meant to be treated as sample output from a computer program.`

To switch directories, type `cd` followed by the name of the directory.
To edit settings, press ``ctrl` + `,``

Markup

    The code element represents a fragment of computer code.
    There are y = mx + b flavors of ice cream to be available for purchase!
    This text is meant to be treated as sample output from a computer program.
    To switch directories, type cd followed by the name of the directory.

      To edit settings, press ctrl + ,

Source: `01-base/code/_code.scss`, line 1

## 2.4 base.lists Lists

Source: `01-base/lists/_lists.scss`, line 1

### 2.4.1 base.lists.ul Unordered list

Toggle example guides
Toggle HTML markup

The `<ul>` element is a list of items in which the order does not explicitly matter.

Example

- Sit Ullamcorper Ultricies
- Tortor
- Mollis
- Dolor
  - Cursus
  - Cras
  - Pellentesque
  - Egestas Sem
- Cursus Malesuada
- Fermentum Tellus

Markup

      Sit Ullamcorper Ultricies
      Tortor
      Mollis
      Dolor

          Cursus
          Cras
          Pellentesque
          Egestas Sem

      Cursus Malesuada
      Fermentum Tellus

Source: `01-base/lists/_lists.scss`, line 7

### 2.4.2 base.lists.ol Ordered list

Toggle example guides
Toggle HTML markup

The `<ol>` element is a list of items in which the order does explicitly matter.

Example

1. Sit Ullamcorper Ultricies
2. Tortor
3. Mollis
4. Dolor
   1. Cursus
   2. Cras
   3. Pellentesque
   4. Egestas Sem
5. Cursus Malesuada
6. Fermentum Tellus

Markup

      Sit Ullamcorper Ultricies
      Tortor
      Mollis
      Dolor

          Cursus
          Cras
          Pellentesque
          Egestas Sem

      Cursus Malesuada
      Fermentum Tellus

Source: `01-base/lists/_lists.scss`, line 16

### 2.4.3 base.lists.dl Description list

Toggle example guides
Toggle HTML markup

The `<dl>` element is a list of terms with their associated descriptions.

Example

Description lists
  A description list is perfect for defining terms.
Euismod
  Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
  Donec id elit non mi porta gravida at eget metus.
Malesuada porta
  Etiam porta sem malesuada magna mollis euismod.

Markup

      Description lists
      A description list is perfect for defining terms.
      Euismod
      Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
      Donec id elit non mi porta gravida at eget metus.
      Malesuada porta
      Etiam porta sem malesuada magna mollis euismod.

Source: `01-base/lists/_lists.scss`, line 27

## 2.5 base.tables Tables

Toggle example guides
Toggle HTML markup

The `<table>` element displays tabular data in rows, columns, and cells.

Example

Optional table caption.
Member | Organisation | Role | Action
--- | --- | --- | ---
Chris Hall | Receptionist at Bastion Hotels | Member |
Michelle Williams | Community manager at Open Social | Group organiser |
Jim Oyster | Plumber at Forgottoflush | Member |

Markup

      Optional table caption.

          Member
          Organisation
          Role
          Action

        Chris Hall
        Receptionist at Bastion Hotels
        Member

        Michelle Williams
        Community manager at Open Social
        Group organiser

        Jim Oyster
        Plumber at Forgottoflush
        Member

Source: `01-base/tables/_tables.scss`, line 3

## 2.6 base.embedded Embedded content

Source: `01-base/embedded/_embedded.scss`, line 1

### 2.6.1 base.embedded.img Images

Toggle example guides
Toggle HTML markup

An `<img>` element represents an image. We are using the following image styles in Drupal. You can use devtools to inspect images.

Name | Sizes | Effects | Example
--- | --- | --- | ---
Social extra extra large | 1200 x 423 | Scale & crop | Hero background
Social extra large | 220 x 220 | Scale & crop | Event teaser
Social large | 128 x 128 | Scale & crop | Profile image
Social medium | 44 x 44 | Scale & crop | Stream avatar
Social small | 24 x 24 | Scale & crop | Newest members listd

Example

An image that is inline with other text.

An image inside a figure.
Markup

    An image  that is inline with other text.

      An image inside a figure.

Source: `01-base/embedded/_embedded.scss`, line 7

### 2.6.2 base.embedded.svg Scalable vector

Toggle example guides
Toggle HTML markup

A `<svg>` element represents an image encoded as a Scalable Vector Graphic.

Example

A svg image
that is inline with other text.

A svg inside a figure.
Markup

    A svg image  that is inline with other text.

      A svg inside a figure.

Source: `01-base/embedded/_embedded.scss`, line 27